The WordPress implementation uses already-available image resizing functionality to accomplish this task. WordPress 4.4+ automatically generates srcset and sizes attributes for images included in a post or page. Responsive Images in WordPressĪt the end of 2015, in partnership with members of the RICG, WordPress shipped version 4.4, which included native support for responsive images.
For a deeper dive into this and other responsive image markup patterns, I strongly recommend reading Jason Grigsby’s Responsive Images 101 series.
#Responsive resize an image with css download
This new markup allows browsers to determine and download the image that’s most appropriate, saving bytes (and time) for users. The src attribute is included to serve as a fallback for older browsers that don’t support the new srcset and sizes attributes. In this example, the markup now includes two new attributes: a srcset, which contains a list of image files and their corresponding pixel widths, and sizes, which gives the browser an estimate of the image’s intended layout size, depending on certain media query conditions. Here’s an example of one of the new markup patterns: Not good.Īn intrepid group of web developers, known as the Responsive Issues Community Group (RICG), set out to fix this problem by introducing new HTML so that developers could identify different image sources for a web page based on contextual information like screen size. With responsive design, developers began to send images that look beautiful on large desktop displays to all users, which resulted in sending extra bytes to smaller mobile devices, making the mobile browsing experience much slower than necessary. This focus made clear just how big a pain point images are for performance, accounting for most of the bytes included on each web page. Responsive web design also increased interest in optimizing the performance of websites based on screen size. This arrangement was fine until 2010, when Ethan Marcotte published his seminal article, Responsive Web Design, which popularized the technique of using Cascading Style Sheet media queries to modify the layout of web pages to fit whatever size device a person is using. This markup is straightforward in that it tells the browser to download and render a specific image file, referenced by the src element, onto the web page. In this example, the element references a single image file named `image.jpg` located on a server at `/path/to/my`.
#Responsive resize an image with css how to
(Then we’ll get to the WordPress part, and how to make them even better with Cloudinary.) For most of the Web’s existence, any time you wanted to include an image on a web page, you would create markup that looked like this: Even so, it may be helpful to have a little background. If you’re reading this, you’re probably already familiar with responsive images.