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:
- 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.
- Compare the differences between a static image and a responsive image by inspecting two image tags with and without the srcset attribute.
- 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.
- Identify the use cases in which WordPress can and cannot assist us with responsive images.
- Discuss the practical application of responsive images when setting image sizes within a theme.
- 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.