Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CAOS 2015 Summer: Introducing Hayabusa
Search
Gunther Brunner
July 08, 2015
Programming
0
970
CAOS 2015 Summer: Introducing Hayabusa
Hayabusa
http://hayabusa.io
Gunther Brunner
July 08, 2015
Tweet
Share
More Decks by Gunther Brunner
See All by Gunther Brunner
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
3.3k
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
15
5.8k
Breaking Down Enterprise AI Tool Adoption Barriers in Japan: CyberAgent's Cursor Implementation Strategy
gunta
0
120
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
45
31k
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
6
1.3k
Feature FlagsのDX/UXの 頂点「 DevCycle 」に 辿り着くまでの道のり
gunta
5
1.7k
OpenSaaS Studio - 強いSaaSを作り続けるOpenSaaS Studioの挑戦
gunta
3
3.1k
OpenSTF @ Test Engineers' Meetup #3
gunta
1
1.4k
Android Testing Bootcamp #2: OpenSTF
gunta
1
1.4k
Other Decks in Programming
See All in Programming
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
2
510
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
410
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
290
OWASP Kansai DAY 2025.09: OSINTにふれてみよう
deka_morita
0
160
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
980
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
3
930
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
半自動E2Eで手っ取り早くリグレッションテストを効率化しよう
beryu
6
2.3k
実践AIチャットボットUI実装入門
syumai
7
2.3k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
140
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
790
CSC305 Lecture 04
javiergs
PRO
0
230
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Producing Creativity
orderedlist
PRO
347
40k
Code Reviewing Like a Champion
maltzj
525
40k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Unsuck your backbone
ammeep
671
58k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Making Projects Easy
brettharned
118
6.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
2015 SUMMER #caos2015
Günther Brunner @gunta85 Hayabusa 2015 SUMMER #caos2015 Morino Kohei @kohei_april20
Data Binding Fastest Design Flow ImageHayabusa
Designer Developer
Current Workflow New Workflow PSD AI Designer Developer Export PNG?
JPG? Frontend ImageAlpha? ImageOptim? Grunt? WebP? SpriteSheet? SVN image320.jpg PSD AI Hayabusa /image.jpg?w=320 or
Current Workflow New Workflow PSD AI Export PNG? JPG? Frontend
ImageAlpha? ImageOptim? Grunt? WebP? SpriteSheet? SVN image320.jpg PSD AI Hayabusa /image.jpg?w=320 or 10 min 10 ~ 30 min 1 hour ~ 1 day Designer Developer
Advantages • Workflow becomes much faster • Uses the most
suitable format in any platform • Creates the best size for any device • Checking design is instantly
Advantages
Advantages Working becomes easier
None
Input files PSD, AI, PNG /images/image.psd
Input files /images/image.psd
Output REST API
JPEG - Resize Width /images/image.jpg?w=480
PNG32 - Retina / ImageOptim /images/image.w480.x2.png
PNG 7 bit - ImageAlpha /images/image.png?colors=128 PSD
JPEG - Black & white /images/image.jpg?grayscale=true PSD
PNG - Blur /images/image.png?blur=10
WebP - Android / iOS Native /images/image.webp PSD WEBP
Formats for Web (Picture Quality) BPG (HEVC) > H.264 I-Frame
> WebP > JPEG 2000 > JPEG XR > JPEG http://xooyoozoo.github.io/yolo-octo-bugfixes/
GPU Texture Formats ASTC ETC PVRTC PVRTC.GZ DXT5 DDS CRN
CRN.GZ
ETC - Android / WebGL /images/image.etc
PVRTC - Unity / Cocos2D / iOS /images/image.pvr?format=rgba4444
PVR GZIP - iOS Native /images/image.pvr.gz
Sprite Sheet / Atlas Auto Generation { images: [ image1:
"image1.png", image2: "image2.psd", image3: "image3.jpg", image4: "image4.png", image5: "image5.png?w=200", ], max: { w: 2048, h: 2048 } } Input /images/sprite.json Output /images/sprite.sheet.jpg /images/sprite.sheet.json PSD
JPEG - PSD Layer Export /images/image.jpg?layer=Name
Distributing • Amazon CloudFront / Akamai / Others • HTTP/SPDY/HTTP
2.0 support • As middleware • As Mac App, As Local Server
As Local Server /assets/image.w480.x2.png • Unity’s asset bundle • iOS
/ Android static assets
File generation time • Convert with the 1st request •
After the 1st request, cache it
CSS Output Info • Layer Mask • Clipping Mask •
Layer Mask • Gradients • Layer Comp • Adjustment Layer • Linked & Smart Objects • Alpha Channel Mask
CSS Output /images/image.css?layer=name .name { font-family: "Source Sans Pro"; color:
rgba(69, 69, 69, 0.7); font-size: 36px; font-weight: 700; line-height: 36px; width: 253px; height: 69px; }
http://hayabusa.io ImageHayabusa