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
   

   View Slide

2. JPEG
   Joint Photographic Experts Group
   Group began in 1986.

   First standard in 1992.
   

   View Slide

3. JPEG Best for: Photos, images with many colors.
   

   View Slide

4. JPEG
   Optimization options:
   Reduce noise and other complexity.
   Blur unimportant areas.
   Decrease export quality.
   

   View Slide

5. JPEG
   JPEGs are lossy.
   Their algorithm is based loosely on how
   humans see and process information.
   

   View Slide

6. JPEG
   Good at: 

   Smooth gradients, low contrast.
   Bad at: 

   High contrast areas, edges.
   

   View Slide

7. @lara_hogan 8
   Quality: 25 Quality: 100
   

   View Slide

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
   

   View Slide

9. @lara_hogan 10
   responsivedesign.is/articles/reducing-image-sizes
   Before blur: 211KB After blur: 150KB
   

   View Slide

10. @lara_hogan 11
    Left crop from original: 50KB Right crop from original: 60KB
    Center crop from original: 57KB
    

    View Slide

11. JPEG
    We can also nerd out about

    baseline vs progressive JPEGs

    during Q&A, if you want.
    

    View Slide

12. GIF
    Graphics Interchange Format
    Introduced by CompuServe in 1987.

    Enhanced version (animation!) in 1989.
    

    View Slide

13. GIF Best for: Animations.
    

    View Slide

14. GIF
    Optimization options
    Decrease dithering and number of colors.
    Increase horizontal patterns.
    Reduce vertical noise.
    

    View Slide

15. GIF
    Contain up to 256 colors (per frame).
    Are lossless.
    Please don’t use them.
    

    View Slide

16. … if you must use a GIF…
    

    View Slide

17. GIF
    Dithering gives the appearance of a
    smoother blend.
    

    View Slide

18. @lara_hogan 19
    GIF with dithering set to 0: 4.8KB GIF with dithering set to 100: 9.7KB
    

    View Slide

19. @lara_hogan 20
    GIF with horizontal pattern: 9.7KB GIF with vertical pattern: 21KB
    

    View Slide

20. GIF
    Their compression algorithm removes
    horizontal redundancy.
    The more details or noise, 

    the larger the file will be.
    

    View Slide

21. GIF
    But seriously, folks:
    Replace animated GIFs with animated CSS.
    Replace non-animated GIFs with PNG-8s.
    

    View Slide

22. @lara_hogan 23
    PNG-8 with vertical pattern: 1.62KB
    GIF with vertical pattern: 21KB
    

    View Slide

23. PNG
    Portable Network Graphics
    Created as an improved, non-patented
    replacement for GIF in 1996.
    

    View Slide

24. PNG-8 Best for: Images with few colors.
    

    View Slide

25. PNG-8
    Optimization options:
    Decrease dithering.
    Decrease number of colors.
    Increase horizontal and vertical patterns.
    

    View Slide

26. PNG-8
    Lossless (like GIFs!)
    256 color palette (like GIFs!)
    Dither (like GIFs!)
    Recognize horizontal and vertical patterns.
    

    View Slide

27. PNG-24
    No restriction on color palette.
    Handles transparency differently.
    

    View Slide

28. PNG-24
    Optimization options:
    Decrease noise.
    Decrease number of colors.
    

    View Slide

29. @lara_hogan 30
    PNG-8 PNG-24
    

    View Slide

30. @lara_hogan 31
    PNG-24: 1.28MB JPEG @ 75 Quality: 288KB
    

    View Slide

31. SVG
    Scalable Vector Graphics
    XML-based vector image format, born out
    of competing standards submitted to W3C.
    Became a W3C recommendation in 2001.
    

    View Slide

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.
    

    View Slide

33. 
    
    
    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">
    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 "/>
    
    34
    

    View Slide

34. 
    
    
    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">
    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 "/>
    
    35
    

    View Slide

35. 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">
    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 "/>
    
    36
    

    View Slide

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
    

    View Slide

37. Or inline the SVG into your HTML:
    
    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">
    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 "/>
    
    
    38
    

    View Slide

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.
    

    View Slide

39. WebP
    WebPicture
    Both lossless and lossy compression.
    Supports transparency and animation.
    Announced by Google in 2010 to reduce
    file sizes on the web.
    

    View Slide

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.
    

    View Slide

41. WebP
    Creation: there’s a Photoshop plugin, and
    online conversion tools.
    Support: only Chrome, Opera, and 

    Android Browser.
    

    View Slide

42. @lara_hogan 43
    Optimize compression
    parameters, clean junk
    metadata and comments,
    and remove unnecessary
    color profiles.
    

    View Slide

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%
    

    View Slide

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
    

    View Slide