My presentation about using images for the web, the right way. Questions will answers: - Which format is suitable for web? - When and why to use a certain format? - Web image with high resolution display?

1. Web Images
The Right Way

2. Image Formats
Vector
Bitmap
.SVG
.WOFF
CSS Shapes
.GIF
.PNG
.JPG
.WEBP
Lossless
Lossy

3. 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

4. Image formats
walkthrough

5. 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

6. Image Formats
Vector
Bitmap
.SVG
.WOFF
CSS Shapes
.GIF
.PNG
.JPG
.WEBP
Lossless
Lossy

7. CSS Shapes
http://codepen.io/daviddcarr/pen/EsLhr

8. Icon Font
http://icomoon.io/
http://fontawesome.io
gulp-iconfont

10. What is Retina Display?

12. Device Pixel Ratio?

13. devicePixelRatio = physical pixels / device-independent pixels*
*dips A.K.A CSS pixels, virtual pixels

14. Retina Display: devicePixelRatio >= 2

15. Web Images & Retina Display
• Use vector images wherever possible
• Use @2x bitmap (JPG/PNG) by default
• For background images, use between @1.5x ~
2x

16. Responsive Images

17. <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

19. Do we need
responsive images?

20. ImplementationLesseffort
More effective
+srcset w/ polyfill
+desktop-size images
+@1x images
+hand-coded res. images

21. • 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

22. Optimization Tools

23. Optimization Tools
• Photoshop Save for Web
• ImageOptim
• gulp-imagemin
• imagemin-cli

24. Case Study
https://naustud.io/work/2016/11/kuadobox/

25. Thank you