Slide 1
Slide 1 text
σβΠϯ࡞ۀޮԽ
ImageHayabusa
Slide 2
Slide 2 text
@gunta85
Günther Brunner
άϯλɾϒϧϯφʔ
CyberAgent
Creative Engineer
Slide 3
Slide 3 text
• σβΠφʔ 㱻 ϑϩϯτΤϯυɺωΠςΟϒΤϯδχΞ
ͷؒʹେ͖͍ͳλΠϜϩε͕ൃੜ͢Δɻ
• ϑϩϯτΤϯυʹඞཁͳૉࡐͷαΠζɺΓग़͠Λ
ຖσβΠφʔʹґཔ͠ͳ͍ͱ͍͚ͳ͍ɻ
• ͦΕʹैͬͯσβΠφʔPSDΛ։͖ɺཔ·ΕͨαΠ
ζͰΓग़͞ͳ͍ͱ͍͚ͳ͍ɻ
Slide 4
Slide 4 text
σβΠφʔ ΤϯδχΞ
Slide 5
Slide 5 text
ݱঢ়ͷϫʔΫϑϩʔ
͜Ε͔Β
PSD
AI
σβΠφʔ ΤϯδχΞ
Γग़͠
PNG? JPG?
ϑϩϯτ࡞ۀ
ImageAlpha?
ImageOptim?
Grunt?
WebP?
SpriteSheet?
SVN
image320.jpg
PSD
AI
Ϳ͞
/image.jpg?w=320
or
Slide 6
Slide 6 text
ݱঢ়ͷϫʔΫϑϩʔ
͜Ε͔Β
PSD
AI
σβΠφʔ ΤϯδχΞ
Γग़͠
PNG? JPG?
ϑϩϯτ࡞ۀ
ImageAlpha?
ImageOptim?
Grunt?
WebP?
SpriteSheet?
SVN
image320.jpg
PSD
AI
Ϳ͞
/image.jpg?w=320
or
30ඵ
10ʙ30
1࣌ؒʙ1
Slide 7
Slide 7 text
ϝϦοτ
• ੍࡞ͷϑϩʔ͕ܶతʹૣ͘ͳΔ
• ͋ΒΏΔϓϥοτϗʔϜʹ࠷దͳܗࣜ
• ͋ΒΏΔσόΠεʹ࠷దͳαΠζ
• σβΠϯͷ֬ೝ͕͙͢ʹग़དྷΔ
Ϩεϙϯε্
ίετμϯ
εϐʔυΞοϓ
ଈ࣌λϒϨοτରԠ
Slide 8
Slide 8 text
ϝϦοτ
Slide 9
Slide 9 text
ϝϦοτ
࡞ۀָ͕ʹͳΔ
Slide 10
Slide 10 text
ղܾ
Slide 11
Slide 11 text
ೖྗϑΝΠϧ
PSD, AI, PNG
/images/image.psd
Slide 12
Slide 12 text
γϯϓϧUI
Slide 13
Slide 13 text
ग़ྗ REST API
Slide 14
Slide 14 text
JPEG - ෯ϦαΠζ
/images/image.jpg?w=480
PNG32 - Retina/ImageOptim
/images/image.w480.x2.png
Slide 15
Slide 15 text
PNG 7 bit - ImageAlpha
/images/image.png?colors=128
JPEG - നࠇ
/images/image.jpg?grayscale=true
PSD
PSD
Slide 16
Slide 16 text
PNG - ΅͔͠
/images/image.png?blur=10
WebP - Android/iOS Native༻
/images/image.webp
PSD
PSD WEBP
Slide 17
Slide 17 text
BPG (HEVC) > H.264 I-Frame >
WebP > JPEG 2000 > JPEG XR > JPEG
http://xooyoozoo.github.io/yolo-octo-bugfixes/
ը࣭
Web༻
Slide 18
Slide 18 text
ASTCɺETCɺPVRTCɺPVRTC.GZɺDXT5ɺ
DDSɺCRNɺCRN.GZ
GPUςΫενϟ༻
Slide 19
Slide 19 text
ETC - Android/WebGL༻
/images/image.etc
PVRTC - Unity/iOS༻
/images/image.pvr?format=rgba4444
PVR GZIP - iOS Native༻
/images/image.pvr.gz
Slide 20
Slide 20 text
ೖྗ /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
Slide 21
Slide 21 text
JPEG - PSDϨΠϠʔॻ͖ग़͠
/images/image.jpg?layer=ϨΠϠʔ໊
Slide 22
Slide 22 text
৴ܗࣜ
• Amazon CloudFrontɺCloudFlare CDN৴
• HTTP/SPDY/HTTP 2.0ରԠͷΫϥυαʔϏε
• ϛουϧΣΞͰߏஙՄೳʢϓϩδΣΫτʣ
• MacΞϓϦɺϩʔΧϧαʔόʔͰಈ͘
Slide 23
Slide 23 text
ϩʔΧϧͰಈ͘
• UnityͷΞηοτόϯυϧ
• iOS/AndroidͷstaticΞηοτ
/assets/image.w480.x2.png
Slide 24
Slide 24 text
ϑΝΠϧͷੜ࣌
• ҰճAPIΛୟ͍ͨΒɺม͢Δ
• ͦΕҎ߱ɺΩϟογϡ͢Δ
Slide 25
Slide 25 text
CSSग़ྗใ
•ϨΠϠʔϚεΫ
•ΫϦοϐϯάϚεΫ
•ϨΠϠʔϚεΫ
•άϥσʔγϣϯ
•ϨΠϠʔΧϯϓ
•ௐϨΠϠʔ
•ϦϯΫˍຒΊࠐΈεϚʔτΦϒδΣΫτ
•ΞϧϑΝνϟϯωϧϚεΫ
Slide 26
Slide 26 text
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;
}
Slide 27
Slide 27 text
http://hayabusa.io
ImageHayabusa
@gunta85