Step 1: modify functions.php to generate more image sizes
Every time you upload an image WordPress saves it at its native size. It also automatically generates 3 resized copies in these standard sizes (either height or width may change based on image ratio):- Thumbnail (150×150)
- Medium (300×300)
- Large (1024×1024)
add_image_size( 'sml_size', 300 ); add_image_size( 'mid_size', 600 ); add_image_size( 'lrg_size', 1200 ); add_image_size( 'sup_size', 2400 );Each call to the function includes a name (so Wordpress can identify the size) and a width. The new sizes will be 300, 600, 1200 & 2400 pixels wide. It is possible with the add_image_size function to have Wordpress also set the height or crop the image, but the example above will keep the original image aspect ratio. (More can be found out about the add_image_size function in the Wordpress Codex.) The example above only shows four new image sizes being added, but you may want to add more or less... this will be based on your theme design. Now any time an image is upload to Wordpress, it will generate the new image sizes. The next step is to include them in the HTML.
Step 2: install the RICG Responsive Images plugin
In order for Wordpress to output all the image sizes, a new plugin needs to be installed: the RICG Responsive Images plugin. Once it is installed and activated all the images sizes will be included in the image tag via the srcset attribute. Typically when an image is added to a page in Wordpress the output HTML looks like this:<img class="aligncenter wp-image–176 size-full" src="https://somedomain.co.uk/wp-content/uploads/2015/05/img1.jpg" alt="App Screenshot">There is a single image in the src attribute. Once the plugin is installed the HTML will look like this:
<img class="aligncenter wp-image–137 size-full" src="https://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg" srcset="https://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–169x300.jpg 169w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–576x1024.jpg 576w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–300x534.jpg 300w, http://localhost/SebastianGreen/2015/wp_dev/wp-content/uploads/2015/05/onavo–600x1067.jpg 600w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg 600w" alt="onavo" width="600" height="1067" sizes="(max-width: 600px) 100vw, 600px">All the new image sizes have been added via the srcset attribute. The plugin also includes Picturefill.js, a responsive image polyfill which adds support for both the picture element and the new responsive attributes for the img element. This, together with the srcset attributes now being included in the image tag is what makes your images responsive.
Your images are now responsive
Now the images on your website will be responsive — the browser will choose the most appropriate image to download. Users on devices with smaller screens will get the smaller images. Your website will load faster as these images will download quicker, they will need less of the users’ bandwidth. Users on devices with larger screens will get the bigger images. They won’t appear pixelated or of a lesser quality. There is only one potential problem with this method: it will only work with images uploaded to Wordpress after the RICG Responsive Images plugin has been installed. If it is a brand new website you are working on then this may not be a problem, however if it is an existing website with existing content the new image sizes which you added in functions.php won’t have been generated. Thankfully, you don’t need to re-add all the images — there is a plugin which can help.Step 3: Install plugin to re-generate image sizes (optional)
The Regenerate Thumbnails plugin will go through all the existing image attachments and re-generate the new image sizes based on the new ones created in functions.php - it is a real time saver and only requires the click of a single button. Once installed, go to Tools -> Regen. Thumbnails then click the “Regenerate All Thumbnails” button. A status bar will appear and you will see the information about how many images have been resized. Now, all the existing images in your website will be output correctly using the image tag via the srcset attribute. Featured image uses device image and mobile device image via Shutterstock.Sebastian Green
Sebastian Green works at a small web startup within an established IT Support Business in Manchester. His passion is using the latest technologies to aid business growth & automate boring procedures.
Read Next
20 Best New Websites, April 2024
Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…
Exciting New Tools for Designers, April 2024
Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…
14 Top UX Tools for Designers in 2024
User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…
By Simon Sterne
What Negative Effects Does a Bad Website Design Have On My Business?
Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne
15 Best New Fonts, March 2024
Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…
By Ben Moss
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff
20 Best New Websites, March 2024
Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…
Exciting New Tools for Designers, March 2024
The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…
Web Tech Trends to Watch in 2024 and Beyond
It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…
By Louise North