Image Formats: the nerdy parts

A part of a presentation I gave about image formats and how to optimize each for performance. http://larahogan.me/images/

Transcript

1. @lara_hogan larahogan.me/images/ (the nerdy parts) Image Formats
2. JPEG Joint Photographic Experts Group Group began in 1986.
 First standard in 1992.
3. JPEG Best for: Photos, images with many colors.
4. JPEG Optimization options: Reduce noise and other complexity. Blur unimportant areas. Decrease export quality.
5. JPEG JPEGs are lossy. Their algorithm is based loosely on how humans see and process information.
6. JPEG Good at: 
 Smooth gradients, low contrast. Bad at: 
 High contrast areas, edges.
7. @lara_hogan 8 Quality: 25 Quality: 100
8. @lara_hogan 9 Noise amount: 5% JPEG quality: 50% File size: 1.56 KB Noise amount: 5% JPEG quality: 75% File size: 4.83 KB Noise amount: 10% JPEG quality: 50% File size: 2.98 KB Noise amount: 10% JPEG quality: 75% File size: 9.02 KB
9. @lara_hogan 10 responsivedesign.is/articles/reducing-image-sizes Before blur: 211KB After blur: 150KB
10. @lara_hogan 11 Left crop from original: 50KB Right crop from original: 60KB Center crop from original: 57KB
11. JPEG We can also nerd out about
 baseline vs progressive JPEGs
 during Q&A, if you want.
12. GIF Graphics Interchange Format Introduced by CompuServe in 1987.
 Enhanced version (animation!) in 1989.
13. GIF Best for: Animations.
14. GIF Optimization options Decrease dithering and number of colors. Increase horizontal patterns. Reduce vertical noise.
15. GIF Contain up to 256 colors (per frame). Are lossless. Please don’t use them.
16. … if you must use a GIF…
17. GIF Dithering gives the appearance of a smoother blend.
18. @lara_hogan 19 GIF with dithering set to 0: 4.8KB GIF with dithering set to 100: 9.7KB
19. @lara_hogan 20 GIF with horizontal pattern: 9.7KB GIF with vertical pattern: 21KB
20. GIF Their compression algorithm removes horizontal redundancy. The more details or noise, 
 the larger the file will be.
21. GIF But seriously, folks: Replace animated GIFs with animated CSS. Replace non-animated GIFs with PNG-8s.
22. @lara_hogan 23 PNG-8 with vertical pattern: 1.62KB GIF with vertical pattern: 21KB
23. PNG Portable Network Graphics Created as an improved, non-patented replacement for GIF in 1996.
24. PNG-8 Best for: Images with few colors.
25. PNG-8 Optimization options: Decrease dithering. Decrease number of colors. Increase horizontal and vertical patterns.
26. PNG-8 Lossless (like GIFs!) 256 color palette (like GIFs!) Dither (like GIFs!) Recognize horizontal and vertical patterns.
27. PNG-24 No restriction on color palette. Handles transparency differently.
28. PNG-24 Optimization options: Decrease noise. Decrease number of colors.
29. @lara_hogan 30 PNG-8 PNG-24
30. @lara_hogan 31 PNG-24: 1.28MB JPEG @ 75 Quality: 288KB
31. SVG Scalable Vector Graphics XML-based vector image format, born out of competing standards submitted to W3C. Became a W3C recommendation in 2001.
32. SVG Scales up beautifully for retina devices. If inline, eliminates an HTTP request. Not supported on IE8 and below. Exports with a lot of cruft.
33. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/ Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y=“0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"> <polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887 15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592, 8.112 8.015,8.112 "/> </svg> 34
34. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/ Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y=“0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"> <polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887 15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592, 8.112 8.015,8.112 "/> </svg> 35
35. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y=“0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"> <polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887 15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592, 8.112 8.015,8.112 "/> </svg> 36
36. You can apply it as a background element: .star {
 background: url(star.svg); 
 display: block;
 width: 83px;
 height: 83px; 
 background-size: 83px 83px; } 37
37. Or inline the SVG into your HTML: <body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable- background="new 0 0 20 20" xml:space="preserve"> <polygon fill="#FFFFFF" stroke="#000000" stroke- miterlimit="10" points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887 15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592, 8.112 8.015,8.112 "/> </svg> </body> 38
38. SVG You can control the color of inline SVGs with CSS using the fill CSS property. But inlined SVG removes cacheability and makes your HTML file size larger. So, as with everything else, test it.
39. WebP WebPicture Both lossless and lossy compression. Supports transparency and animation. Announced by Google in 2010 to reduce file sizes on the web.
40. WebP Employs a methodology from a video codec to compress keyframes in videos. Predicts a value, then encodes the difference between the prediction and actual value.
41. WebP Creation: there’s a Photoshop plugin, and online conversion tools. Support: only Chrome, Opera, and 
 Android Browser.
42. @lara_hogan 43 Optimize compression parameters, clean junk metadata and comments, and remove unnecessary color profiles.
43. @lara_hogan We ran all PNGs in Etsy’s templates through extra compression. 44 Average per-file space savings 19.76% Total bytes before optimization 223,997,522 Total bytes after optimization 124,675,640 Total space savings 44.34%
44. @lara_hogan Automate the extra compression. ImageOptim CLI: github.com/JamieMason/ImageOptim-CLI Wordpress plugin: wordpress.org/plugins/ewww-image-optimizer/ SVG scrubber: codedread.com/scour/ or github.com/svg/svgo 45