High-performance images in WordPress

High-Performance Images in WordPress - WordSesh EMEA 2019 - @keithdevon
High-Performance Images in WordPress

What we’ll cover • Image optimisation overview • Number of images • Image style • Compression • Image formats • Image dimensions • Viewports, screens, resolutions and pixels • Responsive images • Lazy loading • Browser caching • Image CDNs • Image optimisation demo • Summary

Hi! I’m Keith @keithdevon https:/ /highrise.digital @highrisedigital

Why care about web performance? • Accessibility • Conversion optimisation • SEO • Hosting costs • The environment

Why are images so important?

Median kilobytes Desktop Mobile Total page weight 1,937 KB 1,748 KB Image bytes 987 KB 897 KB Image % 51% 51%

Image optimisation factors • Number of images • Image style • Compression • File type/format • Physical dimensions • Responsive images • Lazy loading • Browser caching • CDNs

Do you need those images?

Image style

Compression

Compression types Lossless • No loss of visual quality • Removal of metadata • Small file size changes Lossy • Varying loss of visual quality • Choice of quality setting • Potential large file size savings

Bonus: Using CSS3 1.5 MB 1.3 MB CSS gradient 0.76 MB + =

Image formats

Vector Raster

Vector • Created using mathematical instructions • SVG format • Can scale and zoom perfectly • Use for simple geometric shapes • Can be manipulated with CSS and JS

Optimising SVGs

https:/ /jakearchibald.github.io/svgomg/

Enable Gzip for SVG on Apache servers

Raster • Grid of pixels (bitmap) • JPEG, PNG, GIF formats • Don’t scale and zoom • Use for complex images and photos

GIF ❌ Rich imagery ✅ Transparency ✅ Animation

JPEG

JPEG Quality setting

JPEG Quality setting 100% - 123 KB 75% - 27 KB 50% - 15 KB 25% - 8 KB

JPEG Compression modes

JPEG Compression modes Baseline Progressive

PNG

Transparency : PNG vs GIF

Which image format should I use?

Browser-specific image formats • WebP • JPEG XR • JPEG 2000

Image format summary • Use vector formats for simple geometric shapes that scale. • Use JPEG for photos and complex images • Use PNGs for transparency • Don’t use GIFs!

Physical dimensions

Image delivery

A quick refresher on viewports, screens, resolutions and pixels

iPhone X pixel dimensions Physical pixels CSS pixels 1 CSS pixel equals 9 physical pixels

Display size

Viewport size

Responsive images

Scaled images

Art direction

Scaled images

srcset and sizes

WordPress image sizes • Thumbnail - 150px - hard cropped  • Medium - 300px  • Medium-large - 768px  • Large - 1024px  • Full - original uploaded file

Adding new WordPress image sizes

Responsive images in WordPress

Image block

Rendered image block

Gallery block

Rendered gallery block

40x too big! This. Is. Crazy.

Cover block

Lazy loading Visible image Off-screen images

Native lazy loading

https:/ /kinsta.com/blog/wordpress-lazy-load/

WordPress image performance plugins • Imagify Image Optimizer • Imsanity • ShortPixel Image Optimizer • Optimole • EWWW Image Optimizer Cloud • WP Smush • TingPNG • ImageRecycle

Browser caching

Apache image caching Cache-control headers Expires headers Add these to your .htaccess file

Nginx image caching Cache-control headers Expires headers Add these to your server config’s server location or block

Image CDNs

Image CDNs • Reduce server load • Reduce latency • Compression • Cropping • Resizing • Modern image formats • Do all this on the fly

CDNs • Cloudflare • Fastly • KeyCDN • MetaCDN • StackPath • etc.

WP Offload Media

Image CDNs • KeyCDN • Sirv • Cloudinary • etc.

Live demo time!

Summary • Web performance is important • Images are a huge part of that! • Optimise your image files • Optimise image delivery • Experiment and learn

Thanks for joining me! @keithdevon @highrisedigital

High-performance images in WordPress

High-performance images in WordPress

More Decks by keithdevon

Other Decks in Programming

Featured

Transcript