Image Formats: the nerdy parts

Slide 1

Slide 1 text

@lara_hogan larahogan.me/images/ (the nerdy parts) Image Formats

Slide 2

Slide 2 text

JPEG Joint Photographic Experts Group Group began in 1986.  First standard in 1992.

Slide 3

Slide 3 text

JPEG Best for: Photos, images with many colors.

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

JPEG Good at:   Smooth gradients, low contrast. Bad at:   High contrast areas, edges.

Slide 7

Slide 7 text

@lara_hogan 8 Quality: 25 Quality: 100

Slide 8

Slide 8 text

@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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

JPEG We can also nerd out about  baseline vs progressive JPEGs  during Q&A, if you want.

Slide 12

Slide 12 text

GIF Graphics Interchange Format Introduced by CompuServe in 1987.  Enhanced version (animation!) in 1989.

Slide 13

Slide 13 text

GIF Best for: Animations.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

… if you must use a GIF…

Slide 17

Slide 17 text

GIF Dithering gives the appearance of a smoother blend.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

GIF Their compression algorithm removes horizontal redundancy. The more details or noise,   the larger the ﬁle will be.

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

PNG-8 Best for: Images with few colors.

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

PNG-24 No restriction on color palette. Handles transparency diﬀerently.

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

@lara_hogan 30 PNG-8 PNG-24

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

You can apply it as a background element: .star {  background: url(star.svg);   display: block;  width: 83px;  height: 83px;   background-size: 83px 83px; } 37

Slide 37

Slide 37 text

Or inline the SVG into your HTML: 38

Slide 38

Slide 38 text

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 ﬁle size larger. So, as with everything else, test it.

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

WebP Employs a methodology from a video codec to compress keyframes in videos. Predicts a value, then encodes the diﬀerence between the prediction and actual value.

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

@lara_hogan 43 Optimize compression parameters, clean junk metadata and comments, and remove unnecessary color proﬁles.

Slide 43

Slide 43 text

@lara_hogan We ran all PNGs in Etsy’s templates through extra compression. 44 Average per-ﬁle space savings 19.76% Total bytes before optimization 223,997,522 Total bytes after optimization 124,675,640 Total space savings 44.34%

Slide 44

Slide 44 text

@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