How Responsive Images Work in WordPress

Sal Ferrarello / @salcode

Ice Skates for Renting
A very large shirt
A phone, tablet, and monitor screen

srcset

(source-set)


<img
src="example.jpg"
alt="Example">
					

<img srcset="
example-300x162.jpg   300w,
example-768x414.jpg   768w,
example-1024x551.jpg  1024w,
example.jpg           1170w"

src="example.jpg"
alt="Example">
					

Take Your Pick


example-300x162.jpg   300w,
example-768x414.jpg   768w,
example-1024x551.jpg  1024w,
example.jpg           1170w
					
Viewport Width Image Size Loaded
1170 px 1170w
800 px 1024w
400 px 768w
300 px 300w

High Pixel Density Screens

(a.k.a. High DPI or Retina)

Pixel Density Diagrams for 1x 2x 3x
High Pixel Density Diagram
Viewport Width Image Size Loaded
1170 px 1170w
800 px 1024w
400 px 768w
300 px 300w
300 px with 2x pixel density* 768w
300 px with 3x pixel density* 1024w

Is this Really Worth it?

Image Dimensions Image Weight
1170 x 630 124 kb
1024 x 551 75 kb
768 x 414 49 kb

Speed

Browser Width Page Weight Load Time*
1700px 724 kb 4s
1000px 479 kb 2.7s
740px 386 kb 2.2s

* Simulated 3G (1.5 Mb/s) connection

Not All Images are Full Width

Example of Four Column Bootstrap Grid
Containers for Storing Leftovers

sizes attribute


<img srcset="
example-300x162.jpg   300w,
example-768x414.jpg   768w,
example-1024x551.jpg  1024w,
example.jpg           1170w"

sizes="100vw"

src="example.jpg"
alt="Example">
					

<img srcset="
example-300x162.jpg   300w,
example-768x414.jpg   768w,
example-1024x551.jpg  1024w,
example.jpg           1170w"

sizes="25vw"

src="example.jpg"
alt="Example">
					

sizes="(min-width: 768px) 25vw, 100vw"
					

<img srcset="
example-300x162.jpg   300w,
example-768x414.jpg   768w,
example-1024x551.jpg  1024w,
example.jpg           1170w"

sizes="(min-width: 768px) 25vw, 100vw"

src="example.jpg"
alt="Example">
					

A Better Default Value for "sizes"


<img srcset="
example-300x162.jpg   300w,
example-768x414.jpg   768w,
example-1024x551.jpg  1024w,
example.jpg           1170w"

sizes="(max-width: 1170px) 100vw, 1170px"

src="example.jpg"
alt="Example">
					

<img srcset="
example-300x162.jpg   300w,
example-768x414.jpg   768w,
example-1024x551.jpg  1024w,
example.jpg           1170w"

sizes="(max-width: 300px) 100vw, 300px"

src="example-300x162.jpg"
alt="Example">
					

How Does WordPress Use Responsive Images

wp_calculate_image_sizes()


(max-width: 1170px) 100vw, 1170px

wp_calculate_image_srcset()

Find all images that work for srcset

wp_make_content_images_responsive()

Gets the image ID from the class


class="aligncenter size-full wp-image-2284"
						

<img srcset="
example-300x162.jpg   300w,
example-768x414.jpg   768w,
example-1024x551.jpg  1024w,
example.jpg           1170w"

sizes="(max-width: 1170px) 100vw, 1170px"

src="example.jpg"
alt="Example">
						

Hook into sizes Attribute


sizes="
  (max-width: 767px) 100vw,
  (max-width: 1200px) 75vw,
  900px"
						

Bootstrap Genesis Sizes Modification Plugin

When Responsive Images Go Bad

Desktop Load is Smaller Than Mobile

Iron Code Studio

Sal Ferrarello

salcode.com/wpsrcset

@salcode

Image Credits