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
画像変換Night「ImageHayabusa」デザイン作業効率化
Search
Gunther Brunner
February 18, 2015
Design
6
12k
画像変換Night「ImageHayabusa」デザイン作業効率化
http://hayabusa.io
Gunther Brunner
February 18, 2015
Tweet
Share
More Decks by Gunther Brunner
See All by Gunther Brunner
Feature FlagsのDX/UXの 頂点「 DevCycle 」に 辿り着くまでの道のり
gunta
5
1.4k
OpenSaaS Studio - 強いSaaSを作り続けるOpenSaaS Studioの挑戦
gunta
3
2.9k
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 Hayabusa
gunta
0
940
CAOS 2015 Summer: Introducing STF (Smartphone Test Farm)
gunta
1
1.6k
CAOS 2015 Summer: Hayabusa Internals
gunta
0
760
Are mobile HTML5 3D apps possible right now?
gunta
0
140
Other Decks in Design
See All in Design
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
780
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
610
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
110
root COMPANY DECK / We are hiring!
root_recruit
1
17k
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
120
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
560
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
640
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
980
Night Shift (beginning sequence)
cpineda57
0
950
The One
chinweanimation
0
110
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
2.7k
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
8k
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
A Tale of Four Properties
chriscoyier
157
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building Applications with DynamoDB
mza
93
6.2k
The Cult of Friendly URLs
andyhume
78
6.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Embracing the Ebb and Flow
colly
84
4.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
Bash Introduction
62gerente
610
210k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Transcript
σβΠϯ࡞ۀޮԽ ImageHayabusa
@gunta85 Günther Brunner άϯλɾϒϧϯφʔ CyberAgent Creative Engineer
• σβΠφʔ 㱻 ϑϩϯτΤϯυɺωΠςΟϒΤϯδχΞ ͷؒʹେ͖͍ͳλΠϜϩε͕ൃੜ͢Δɻ • ϑϩϯτΤϯυʹඞཁͳૉࡐͷαΠζɺΓग़͠Λ ຖσβΠφʔʹґཔ͠ͳ͍ͱ͍͚ͳ͍ɻ •
ͦΕʹैͬͯσβΠφʔPSDΛ։͖ɺཔ·ΕͨαΠ ζͰΓग़͞ͳ͍ͱ͍͚ͳ͍ɻ
σβΠφʔ ΤϯδχΞ
ݱঢ়ͷϫʔΫϑϩʔ ͜Ε͔Β PSD AI σβΠφʔ ΤϯδχΞ Γग़͠ PNG? JPG? ϑϩϯτ࡞ۀ
ImageAlpha? ImageOptim? Grunt? WebP? SpriteSheet? SVN image320.jpg PSD AI Ϳ͞ /image.jpg?w=320 or
ݱঢ়ͷϫʔΫϑϩʔ ͜Ε͔Β PSD AI σβΠφʔ ΤϯδχΞ Γग़͠ PNG? JPG? ϑϩϯτ࡞ۀ
ImageAlpha? ImageOptim? Grunt? WebP? SpriteSheet? SVN image320.jpg PSD AI Ϳ͞ /image.jpg?w=320 or 30ඵ 10ʙ30 1࣌ؒʙ1
ϝϦοτ • ੍࡞ͷϑϩʔ͕ܶతʹૣ͘ͳΔ • ͋ΒΏΔϓϥοτϗʔϜʹ࠷దͳܗࣜ • ͋ΒΏΔσόΠεʹ࠷దͳαΠζ • σβΠϯͷ֬ೝ͕͙͢ʹग़དྷΔ Ϩεϙϯε্
ίετμϯ εϐʔυΞοϓ ଈ࣌λϒϨοτରԠ
ϝϦοτ
ϝϦοτ ࡞ۀָ͕ʹͳΔ
ղܾ
ೖྗϑΝΠϧ PSD, AI, PNG /images/image.psd
γϯϓϧUI
ग़ྗ REST API
JPEG - ෯ϦαΠζ /images/image.jpg?w=480 PNG32 - Retina/ImageOptim /images/image.w480.x2.png
PNG 7 bit - ImageAlpha /images/image.png?colors=128 JPEG - നࠇ /images/image.jpg?grayscale=true
PSD PSD
PNG - ΅͔͠ /images/image.png?blur=10 WebP - Android/iOS Native༻ /images/image.webp PSD
PSD WEBP
BPG (HEVC) > H.264 I-Frame > WebP > JPEG 2000
> JPEG XR > JPEG http://xooyoozoo.github.io/yolo-octo-bugfixes/ ը࣭ Web༻
ASTCɺETCɺPVRTCɺPVRTC.GZɺDXT5ɺ DDSɺCRNɺCRN.GZ GPUςΫενϟ༻
ETC - Android/WebGL༻ /images/image.etc PVRTC - Unity/iOS༻ /images/image.pvr?format=rgba4444 PVR GZIP
- iOS Native༻ /images/image.pvr.gz
ೖྗ /images/sprite.json { images: [ image1: "image1.png", image2: "image2.psd", image3:
"image3.jpg", image4: "image4.png", image5: "image5.png?w=200", ], max: { w: 2048, h: 2048 } } ग़ྗ /images/sprite.sheet.jpg /images/sprite.sheet.json ࣗಈੜεϓϥΠτγʔτ PSD
JPEG - PSDϨΠϠʔॻ͖ग़͠ /images/image.jpg?layer=ϨΠϠʔ໊
৴ܗࣜ • Amazon CloudFrontɺCloudFlare CDN৴ • HTTP/SPDY/HTTP 2.0ରԠͷΫϥυαʔϏε • ϛουϧΣΞͰߏஙՄೳʢϓϩδΣΫτʣ
• MacΞϓϦɺϩʔΧϧαʔόʔͰಈ͘
ϩʔΧϧͰಈ͘ • UnityͷΞηοτόϯυϧ • iOS/AndroidͷstaticΞηοτ /assets/image.w480.x2.png
ϑΝΠϧͷੜ࣌ • ҰճAPIΛୟ͍ͨΒɺม͢Δ • ͦΕҎ߱ɺΩϟογϡ͢Δ
CSSग़ྗใ •ϨΠϠʔϚεΫ •ΫϦοϐϯάϚεΫ •ϨΠϠʔϚεΫ •άϥσʔγϣϯ •ϨΠϠʔΧϯϓ •ௐϨΠϠʔ •ϦϯΫˍຒΊࠐΈεϚʔτΦϒδΣΫτ •ΞϧϑΝνϟϯωϧϚεΫ
CSSग़ྗ /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 @gunta85