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
Breaking Down Enterprise AI Tool Adoption Barriers in Japan: CyberAgent's Cursor Implementation Strategy
gunta
0
90
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
42
26k
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
5
1.2k
Feature FlagsのDX/UXの 頂点「 DevCycle 」に 辿り着くまでの道のり
gunta
5
1.6k
OpenSaaS Studio - 強いSaaSを作り続けるOpenSaaS Studioの挑戦
gunta
3
3k
OpenSTF @ Test Engineers' Meetup #3
gunta
1
1.4k
Android Testing Bootcamp #2: OpenSTF
gunta
1
1.4k
Chrome Tech Night 8 - STF
gunta
0
150
CAOS 2015 Summer: Introducing STF (Smartphone Test Farm)
gunta
1
1.7k
Other Decks in Programming
See All in Programming
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
技術同人誌をMCP Serverにしてみた
74th
1
630
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
600
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
200
ふつうの技術スタックでアート作品を作ってみる
akira888
0
450
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
500
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
450
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
770
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
Visualization
eitanlees
146
16k
Site-Speed That Sticks
csswizardry
10
680
Code Review Best Practice
trishagee
69
18k
Git: the NoSQL Database
bkeepers
PRO
430
65k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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