Post on 12-Apr-2017
transcript
Web ImagesThe Right Way
Image Formats
Vector
Bitmap
.SVG
.WOFFCSS Shapes
.GIF
.PNG
.JPG
.WEBP
Lossless
Lossy
Vector vs. Bitmap• Unlimited scalability
• Suitable for “clip art” graphics
• Retina display friendly
• Easy run-time manipulation
• Harder for implementation
• Pixelated or blurry when scaled
• Suitable for realistic photos
• Larger file size for larger resolution
• Not so easy run-time manipulation
• Easy implementation
Image formats walkthrough
PNG vs. JPG• Lossless compression
• Support partial transparency
• Efficient for simple shapes & texture
• Suitable for UI elements, logo, screenshots
• Lossy compression
• Only CSS opacity
• Efficient for photorealistic images
• Suitable for images of products, content, photo gallery
Image Formats
Vector
Bitmap
.SVG
.WOFFCSS Shapes
.GIF
.PNG
.JPG
.WEBP
Lossless
Lossy
Icon Fonthttp://icomoon.io/
http://fontawesome.iogulp-iconfont
What is Retina Display?
Device Pixel Ratio?
devicePixelRatio = physical pixels / device-independent pixels*
*dips A.K.A CSS pixels, virtual pixels
Retina Display: devicePixelRatio >= 2
Web Images & Retina Display
• Use vector images wherever possible• Use @2x bitmap (JPG/PNG) by default• For background images, use between
@1.5x ~ 2x
Responsive Images
<picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""></picture>
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A rad wolf">
Picture element
Image element srcset & sizes
Do we need responsive images?
ImplementationLe
ss e
ffort
More effective
+ srcset w/ polyfill
+ desktop-size images+ @1x images
+ hand-coded res. images
• 2650px / @2x -> 1400kB
• 1920px / @1.5x -> 822kB
• 1440px / @1x -> 484kB
Most popular desktop size*: 1366x768
• 960px @3x -> 509kB
• 640px @2x -> 249kB
• 320px @1x -> 69kB
* Source: gs.statcounter.com
Photoshop save for web, JPG, 60% quality
Optimization Tools
Optimization Tools
• Photoshop Save for Web• ImageOptim• gulp-imagemin• imagemin-cli
Thank you