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
940
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
Feature FlagsのDX/UXの 頂点「 DevCycle 」に 辿り着くまでの道のり
gunta
5
1.1k
OpenSaaS Studio - 強いSaaSを作り続けるOpenSaaS Studioの挑戦
gunta
2
2.7k
OpenSTF @ Test Engineers' Meetup #3
gunta
1
1.1k
Android Testing Bootcamp #2: OpenSTF
gunta
1
1.3k
Chrome Tech Night 8 - STF
gunta
0
120
CAOS 2015 Summer: Introducing STF (Smartphone Test Farm)
gunta
1
1.6k
CAOS 2015 Summer: Hayabusa Internals
gunta
0
750
画像変換Night「ImageHayabusa」デザイン作業効率化
gunta
6
12k
Are mobile HTML5 3D apps possible right now?
gunta
0
130
Other Decks in Programming
See All in Programming
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Trial
cairolibrary720
1
130
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
Rust.Nagoya #1
codemountains
0
170
英語
s_shimotori
1
220
CSC307 Lecture 10
javiergs
PRO
0
310
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
Featured
See All Featured
A designer walks into a library…
pauljervisheath
201
24k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Unsuck your backbone
ammeep
666
57k
Rails Girls Zürich Keynote
gr2m
93
13k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Optimizing for Happiness
mojombo
373
69k
Being A Developer After 40
akosma
72
580k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Clear Off the Table
cherdarchuk
89
320k
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