Overview of responsive images functionality in WordPress from my talk at WordCamp Antwerp 2016.

1. WordPress
Gets
Responsive

2. 1. About Responsive Design
2. About Responsive Images
3. About Retina Images
4. Responsive Support in
WordPress
5. Summary
Agenda

3. ABOUT
RESPONSIVE DESIGN

4. What is Responsive Design
• Design and development respond to the user
• Layout tailored for resolution, image size,
scripting
• Media Queries to determine layout at
different sizes
• Percentages rather that fixed width
• display: none - to hide sections when
appropriate

5. LAYOUTS THAT WORK FOR ALL
SCREENS

7. ABOUT
RESPONSIVE IMAGES

8. WHAT MAKES IMAGE
RESPONSIVE?

9. Why Responsive Images?
Mobile users have surpassed desktop users
Images comprise up to 62% the web
No benefit of hi-res images on low-res screens
Small images look fuzzy at high resolution

10. More Mobile than Desktop

11. IMAGES THAT WORK FOR ALL
VISITORS

14. ABOUT
RETINA IMAGES

15. Retina Images
• Term Created by Apple for the iPhone 4
• High pixel density
• Pixels are not visible to the eye
• resolution effectively half
• 2560x1600 is 1280x800
• HiDPI displays
• 2x, 3x resolution

16. High Res images
• Retina Images
• high resolution
• double, triple or even
higher
• aspect ratio maintained
1x
2x
3x

17. RESPONSIVE SUPPORT
IN WORDPRESS

18. New in WordPress 4.4
Support for srcset HTML attribute
Uses default sizes attribute
Reference:
https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

19. New Image Size as of 4.4
• Medium Large
• Dimensions - 768 x height

20. WordPress Default Image Sizes
• First Level
• Second Level
• Third
Level
• First Level
• Second Level
• Third
Level

21. get_intermediate_image_sizes()
var_dump( get_image_sizes() );
array (size=5)
0 => string 'thumbnail' (length=9)
1 => string 'medium' (length=6)
2 => string 'medium_large' (length=12)
3 => string 'large' (length=5)
4 => string 'post-thumbnail' (length=14)

22. Show all Image Sizes
Display all image sizes
• Use the example function from the codex
• Copy function and call it via var_dump:
var_dump( get_image_sizes() );
Reference:
https://codex.wordpress.org/Function_Reference/get_intermediate_image_sizes

23. get_image_sizes() returns:
array (size=5)
'thumbnail' =>
array (size=3)
'width' => string '150' (length=3)
'height' => string '150' (length=3)
'crop' => boolean true
'medium' =>
array (size=3)
'width' => string '300' (length=3)
'height' => string '300' (length=3)
'crop' => boolean false
'medium_large' =>
array (size=3)
'width' => string '768' (length=3)
'height' => string '0' (length=1)
'crop' => boolean false

24. Adding Images to the Media Library
Media -> Add New
•Uploads original file
•WordPress creates image
files for all media sizes

25. Custom Image Sizes
• Defaults sizes can be changed in the
dashboard
• Dashboard -> Settings -> Media
• Can be created via add_image_size()
• add_image_size($name, $width,
$height, $crop)
width x height

26. <img> element
srcset attribute
sizes attribute

27. <img>
src attribute loads media file

28. <img> element
<img src=“image.png”>

29. srcset attribute
specifies media at different display widths

30. srcset attribute
<img src=“image.png”
srcset=“image.png 40003w”>

31. sizes attribute
how wide an image is
depending on the screen size

32. sizes attribute
<img src=“image.png”
srcset=“image.png 4003w”
sizes="(max-width: 768px) 50vw”, 100vw>

33. Media Queries
@media screen and (min-width: 480px) {
img {
width: 50%;
}
}

34. <img> tag with srcset and sizes
<img src="peleton-Bicycle-Race.jpg"
srcset="peleton-Bicycle-Race.jpg 4003w,
peleton-Bicycle-Race-300x190.jpg 300w,
peleton-Bicycle-Race-768x487.jpg 768w,
peleton-Bicycle-Race-1024x649.jpg 1024w,
peleton-Bicycle-Race-1200x761.jpg 1200w"
sizes="(max-width: 709px) 85vw,
(max-width: 909px) 67vw,
(max-width: 1362px) 62vw,
840px"
height="2537"
width="4003">

35. Which Image is Used
Browser Decides Based on a Calculation
•image width / display width
•results vary depending on browser
Reference:
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

36. WP Retina 2x
Media -> Retina
•Creates 2x version of each file
•Changes to 2x retina version
depending on resolution
Reference:
https://wordpress.org/plugins/wp-retina-2x/

37. SUMMARY

38. Responsive Images
Image loaded based
on screen size

39. Retina Images
Used for high
resolution 2x displays

40. Summary
• Responsive images allow for an optimized experience for all displays
• WordPress has built in support for responsive images
• Theme images outside of the Media Library will not be responsive

41. Thank you!
@spicecadet
edmund.turbin@wpengine.com