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
950
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
セブンデックス カルチャーブック
sevendex
0
2k
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
150
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
240
ネットワークセキュリティ科 学科紹介
sklbj_unz
0
180
太田博三(@usagisan2020)
otanet
0
230
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
Les petites aventures de CSS, saison 2025
goetter
3
4k
プロダクトデザインの「守破離」の「破」について
hayashirine
0
310
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
270
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
67k
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
35
1.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
The Invisible Side of Design
smashingmag
299
50k
Site-Speed That Sticks
csswizardry
4
380
A Modern Web Designer's Workflow
chriscoyier
693
190k
GraphQLとの向き合い方2022年版
quramy
44
13k
A designer walks into a library…
pauljervisheath
205
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GitHub's CSS Performance
jonrohan
1030
460k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
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