August 8, 2023

How to Implement Responsive Images in WordPress

To implement responsive images with PHP for WordPress, you need to do two things: upload multiple image sizes and display them with the appropriate HTML attributes.

To upload multiple image sizes, you can use the WordPress function add_image_size(), which allows you to register new image sizes for your theme. You can use this function in your theme’s functions.php file or in a plugin. For example, if you want to create three image sizes: small (300px wide), medium (600px wide), and large (1200px wide), you can use the following code:

// Add custom image sizes
function my_theme_add_image_sizes() {
  add_image_size( 'small', 300 ); // 300 pixels wide (and unlimited height)
  add_image_size( 'medium', 600 ); // 600 pixels wide (and unlimited height)
  add_image_size( 'large', 1200 ); // 1200 pixels wide (and unlimited height)
add_action( 'after_setup_theme', 'my_theme_add_image_sizes' );

This code will create three new image sizes with the names ‘small’, ‘medium’, and ‘large’. You can use any names you want, but make sure they are unique and descriptive. You can also specify the height of the images, or leave it blank for unlimited height. You can also set a boolean value for cropping the images, or leave it as false for no cropping.

Note that this function will only apply to new images that you upload after adding this code. If you want to apply it to existing images, you need to regenerate the thumbnails using a plugin like Regenerate Thumbnails.

To display the responsive images, you need to use the WordPress function wp_get_attachment_image(), which returns an HTML <img> element with the srcset and sizes attributes. You can use this function in your theme’s template files or in a plugin. For example, if you want to display an image with the ID of 123, you can use the following code:

// Display responsive image
echo wp_get_attachment_image( 123, 'medium' );

This code will display the image with the ID of 123 and the default size of ‘medium’. It will also generate the srcset attribute with the available image sizes and their widths, and the sizes attribute with the default value of (max-width: { {image-width}}px) 100vw, { {image-width}}px. You can customize these attributes by using filters like wp_calculate_image_srcset and wp_calculate_image_sizes. You can learn more about these filters from Responsive Images | Common APIs Handbook – WordPress Developer Resources.

I hope this helps you implement responsive images with PHP for WordPress. If you have any other questions, feel free to ask me.

Niche Money
Affiliate marketer with 25 years marketing online. Founder of, and a host of other businesses. I help people turn their side hustle into a full time income with SEO, email marketing and video marketing techniques. My hobbies are cooking, reading, blogging and hiking.

Follow my posts on Twitter

Related Posts

5 Email Writing Tips to Drive Traffic to Your Blog Posts (#4 is a Kicker)

Write better emails using these techniques to get more traffic to your blog: betters subject lines, personal tone, interesting content, all to action.

How to Monetize Your Blog

You can monetize your blog using advertising, sponsored posts, selling products, selling services, hosting ads, subscriptions, and donations.

How to Get Backlinks to Your Website [5 Ways]

How to Get Backlinks to Your Website: creating worthy content, publish guides, write testimonials, and listicles.

Keep Reading

Comments are closed.

Niche Money

About Dave Halmai:
I am a certified internet marketer who is passionate about technology. Since I was old enough to read a manual, I was connecting wires and programming the VCR. Now I share my advice and experience in the online marketing space. I recommend products and services, and offer help to startups, entrepreneurs and established businesses.

To learn more you can visit my about page or my contact page.
How to Leverage the Power of Blogging, SEO and Paid Ads to Earn $50K / Month or More
I wrote this eBook based on 23+ years experience building businesses online to help friends and family make more money online. I cover 5 ways you can use a blog and a business website to develop a side income or expand your business. I cover everything you need to start and scale your online business.
Niche Money