Handle media in the modern web

Maya Shavin

This talk is about...

  • Image & the Web
  • The importance of images in performance
  • How to load images responsively
  • How to optimize images

Images in the Web

Logo

Banner

Story-teller

Icons

Non-text description

Images are

everywhere

And loading them responsively & optimizedly is not easy...

Image types

+ AVIF (2020)

Most popular

(Big in size)

Great for icon, animation

Most optimized

Not fully supported

New

Efficient & light-weight

Why loading images responsively are important?

Google LightHouse Metrics

3

secs

How to load images responsively

Using <img> responsively

srcset

Device sizes-based

Resolution-based

<img 
  srcset="example-480w.jpg 480w,
          example-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
          800px"
  src="example-800w.jpg"
  alt="Example">
<img 
  srcset="example-320w.jpg,
          example-480w.jpg 1.5x,
          example-640w.jpg 2x"
  src="example-640w.jpg"
  alt="Example">

<img src="example.png">

Download

Decode

Render

Browser

Download

Decode

Render

<img srcset="...">

Browser

Choose the right

image

Using <img> responsively

srcset

Pre-defined set of images to chose per device size/resolution

Less waste resource to download

Native solution

Using <picture> when you can

The Art Direction problem 

<picture>
  <source type="image/svg+xml" srcset="example.svg">
  <source type="image/webp" srcset="example.webp">
  <img src="example.png" alt="Example">
</picture>

Full-details image for large screen 

Cropped/Shrink image (more focus) for small screen

Using CSS to load image

Media query to define breakpoint

@media screen and (max-width: 16em) { ... }
@media screen and (max-width: 32em) { ... }
@media screen and (max-width: 41em) { ... }

CSS logical function (url(), image-set())

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

But are they optimized?

The answer is No

The optimization problem

No cache image for CSS url() function (Chrome)

Download (preload) happens before CSS parsing

No EXACT match for device size (serve a 800w for a 700w or less)

High resolution image means heavy in bytes

All images downloaded despite of visibility on page

Different image types are meant for different usage

How to optimize your images?

Use the right format

Using SVG for complex icons

Scalable Vector Graphics

Light-weight

Stylable using CSS

Semantic

Inline and accessibility-support

Using JPG for photos

Using PNG/WebP for better quality and compression ratios

Lazy-loading images

<img loading="lazy" >

On-demand loading

Speed up initial page loading and rendering time

Automate image optimization

Image size compression without reducing quality (lossy/lossless)

External tools like jpegtran (lossless compression), or OptiPNG

Automatic run-time image optimisation with Cloudinary 😉 

1200x800

1MB

1200x800

300kB

500x500

crop: thumb

500x500

{gravity: auto}

500x500

Hokusai effect

{radius: max, dpr: auto, art effect: hokusai}

500x500

Stamp effect

{e_red: 50, e_vectorize: 2:0.2 }

https://res.cloudinary.com/mayashavin/image/upload/v1/maya_shavin.jpg

https://res.cloudinary.com/mayashavin/image/upload/w_500,h_500,c_thumb/v1/maya_shavin

https://.../image/upload/w_500,h_500,c_crop,g_auto/v1/maya_shavin

https://.../image/upload/w_500,h_500,c_thumb,r_max,dpr_auto,g_auto,e_art:hokusai/v1/maya_shavin.png

https://res.cloudinary.com/mayashavin/image/upload/q_auto,f_auto/v1/maya_shavin

https://.../image/upload/w_500,h_500,c_thumb,r_max,dpr_auto,g_auto,e_red:50/e_vectorize:2:0.2/v1/maya_shavin.png

Take action

Use srcset and relative sizes to help browser to render the right image

Use <picture> for specifying images per device type only.

Use SVG for complex icons and animation

Lazy-load whenever you can

Leave the automation of image optimization to Cloudinary!

console.log(Maya)

Senior Frontend Developer

Core maintainer of StorefrontUI

NuxtJS Ambassador

Everything about Frontend/Web

Further reading

THANK YOU!

Made with Slides.com