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.1k
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
16
5.4k
Breaking Down Enterprise AI Tool Adoption Barriers in Japan: CyberAgent's Cursor Implementation Strategy
gunta
0
110
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
45
29k
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
6
1.3k
Feature FlagsのDX/UXの 頂点「 DevCycle 」に 辿り着くまでの道のり
gunta
5
1.6k
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
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
990
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
3
1.4k
Namespace and Its Future
tagomoris
6
630
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
320
旅行プランAIエージェント開発の裏側
ippo012
1
470
Vue・React マルチプロダクト開発を支える Vite
andpad
0
100
The State of Fluid (2025)
s2b
0
200
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
680
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
AHC051解法紹介
eijirou
0
640
Infer入門
riru
4
1.6k
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
220
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Cult of Friendly URLs
andyhume
79
6.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Into the Great Unknown - MozCon
thekraken
40
2k
How STYLIGHT went responsive
nonsquared
100
5.8k
Documentation Writing (for coders)
carmenintech
73
5k
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