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
950
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
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
520
Feature FlagsのDX/UXの 頂点「 DevCycle 」に 辿り着くまでの道のり
gunta
5
1.5k
OpenSaaS Studio - 強いSaaSを作り続けるOpenSaaS Studioの挑戦
gunta
3
3k
OpenSTF @ Test Engineers' Meetup #3
gunta
1
1.3k
Android Testing Bootcamp #2: OpenSTF
gunta
1
1.3k
Chrome Tech Night 8 - STF
gunta
0
140
CAOS 2015 Summer: Introducing STF (Smartphone Test Farm)
gunta
1
1.7k
CAOS 2015 Summer: Hayabusa Internals
gunta
0
760
画像変換Night「ImageHayabusa」デザイン作業効率化
gunta
6
12k
Other Decks in Programming
See All in Programming
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
0
140
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
430
ベクトル検索システムの気持ち
monochromegane
29
8.7k
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
240
WordPress Playground for Developers
iambherulal
0
120
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
510
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
550
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
230
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
110
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
1
310
Gunma.web #55
tinykitten
0
130
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
520
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fireside Chat
paigeccino
37
3.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
How STYLIGHT went responsive
nonsquared
99
5.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
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