I have set up custom thumbnail sizes in my functions.php, as follows:

function df_theme_support() {
  add_theme_support('post-thumbnails');

  //Custom image sizes
  add_image_size('small-thumbnail', 430, 242, true);
  add_image_size('medium-thumbnail', 645, 363, true);
  add_image_size('medium-large-thumbnail', 860, 484, true);
}
add_action('after_setup_theme', 'df_theme_support');

The problem is that the site is displaying the smallest version (430x242) for all viewport widths. Furthermore there are no src and sizes attribute for the image(s).

• All the images are produced correctly and put in the default images folder: /wp-content/uploads/12/

Is there some additional function/method I need to implement codewise to activate responsive images in WordPress (in other words that the src and sizes attributes is applied so that the image changes depending on viewport conditions)?

I thought of using JS and media queries to achive this, but from what I understand there should be "built in" functionality for this in Wordpress already.

I have the gd module installed however not the imagick. Maybe I need imagick installed to get this to work?

I have set up custom thumbnail sizes in my functions.php, as follows:

function df_theme_support() {
  add_theme_support('post-thumbnails');

  //Custom image sizes
  add_image_size('small-thumbnail', 430, 242, true);
  add_image_size('medium-thumbnail', 645, 363, true);
  add_image_size('medium-large-thumbnail', 860, 484, true);
}
add_action('after_setup_theme', 'df_theme_support');

The problem is that the site is displaying the smallest version (430x242) for all viewport widths. Furthermore there are no src and sizes attribute for the image(s).

• All the images are produced correctly and put in the default images folder: /wp-content/uploads/12/

Is there some additional function/method I need to implement codewise to activate responsive images in WordPress (in other words that the src and sizes attributes is applied so that the image changes depending on viewport conditions)?

I thought of using JS and media queries to achive this, but from what I understand there should be "built in" functionality for this in Wordpress already.

I have the gd module installed however not the imagick. Maybe I need imagick installed to get this to work?

• functions
• theme-development
• post-thumbnails
• responsive

Share Improve this question edited Dec 18, 2024 at 14:23 dfr asked Dec 18, 2024 at 12:00 dfrdfr 3588 bronze badges 4

• 1 Consider checking you are displaying the images using the wp_get_attachment_image() function in PHP code, or using one of the core image-type blocks if using blocks. – Wongjn Commented Dec 18, 2024 at 12:22
• 1 Duplicate of stackoverflow.com/questions/79290813/…. Please post on only one site in the StackExchange network. – Caleb Commented Dec 18, 2024 at 14:27
• Thanks a lot, Wongjin. I used the_post_thumbnail_url() to output it, but now when trying the wp_get_attachment_image() it is outputing the srcset and sizes attributes to the image, as wished. However it naturally only uses the one specified version ("medium-large-thumnail"). I guess the best option is to add the 'small-thumbnail' as src and use an array with the srcset attribute values and the sizes values in that function? – dfr Commented Dec 18, 2024 at 17:22
• Thanks Caleb, noted. – dfr Commented Dec 18, 2024 at 17:23

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

WordPress Responsive Images Without Imagick

No, you do not need Imagick to get WordPress responsive images (srcset and sizes) working. As of WordPress 4.4+, if your theme has post-thumbnails enabled and you are using core functions like the_post_thumbnail() or wp_get_attachment_image(), WordPress will automatically include srcset and sizes attributes (assuming multiple image sizes exist). The GD library will suffice for generating those images.

Below are the main things to double-check to ensure WordPress automatically generates srcset:

1. Confirm Theme Support for Thumbnails In your functions.php, you've already added:

function df_theme_support() { add_theme_support('post-thumbnails');

// Custom image sizes add_image_size('small-thumbnail', 430, 242, true); add_image_size('medium-thumbnail', 645, 363, true); add_image_size('medium-large-thumbnail', 860, 484, true); } add_action('after_setup_theme', 'df_theme_support');

That's correct for registering both thumbnail support and custom sizes.

2. Use WordPress Image Functions When rendering images in your theme templates, make sure you're using something like:

or

If you hardcode an <img> tag yourself (e.g., <img src="...">), then WordPress won't have a chance to add srcset or sizes automatically.

3. Ensure Images Are Large Enough WordPress only generates srcset attributes if the images are large enough to justify multiple sizes. If your original images are very small, the srcset might not appear. Make sure your uploaded images are bigger than your defined sizes so WordPress can generate the scaled versions.

4. Regenerate Thumbnails (Optional) If the images were uploaded before you registered your new custom sizes, WordPress may not have generated those sizes yet. In that case, install and run the Regenerate Thumbnails plugin to force WordPress to generate the new image sizes.

5. Imagick vs. GD You do not need Imagick installed for srcset to work. WordPress will happily generate resized images via GD if that's the only library available. The presence of Imagick is optional and not required specifically for responsive image attributes.

Example Putting it all together in a template (e.g., single.php or a custom template file):

Once that's in place, WordPress will automatically generate the srcset and sizes attributes (again, assuming the source image is large enough and that multiple sizes exist).

Conclusion

• You have correctly registered custom sizes.
• Make sure you use WordPress functions (the_post_thumbnail() or wp_get_attachment_image()) to output images.
• Regenerate thumbnails if needed.
• GD alone is sufficient; Imagick is not strictly necessary.

This setup will ensure that WordPress adds responsive image attributes to your thumbnails out of the box. Happy coding!