Whether you are an advanced WordPress theme developer or simply editing content from the dashboard, there is one question that everyone asks at one point or another:
What size should my images be?
This already complex question takes on a whole new dynamic with the recent addition of responsive images in WordPress 4.4. While the basic concept of responsive images may be easy to grasp, a true understanding of the inner workings is far more elusive. In this talk, we will demystify responsive images and learn how to strike a proper balance between image performance and image quality within any context.
Below is a brief overview of the main points we will touch upon throughout this talk:
1. Introduce the Responsive Image Spectrum that ranges from high-quality at one end to high-performance at the other. A successful responsive web site delivers images that hit a sweet spot between performance and quality.
2. Compare the differences between a static image and a responsive image by inspecting two image tags with and without the srcset attribute.
3. Learn how a web browser chooses which image size gets loaded using a calculation known as the Perceivable Limit (Container Size x Display Density). This formula helps us determine the ideal image size within any context.
5. Identify the use cases in which WordPress can and cannot assist us with responsive images.
6. Discuss the practical application of responsive images when setting image sizes within a theme.
7. With our new understanding of responsive images, we will revisit the original question: What size should my images be?
The talk should last about 35 minutes with remaining time open for Q&A.