How to Make the Main Image Responsive on WordPress

Photo by Tim Gouw On Pexels

Have you been using WordPress version 4.4 or even the latest version? All new images added to posts after the WP update have the srcset attribute. Wait a minute Mangcoding, before diving deeper into how to make the main image responsive on WordPress, let’s first learn about the srcset attribute.

How srcset and the sizes attribute work

The srcset and sizes attributes contain information to help browsers determine which image size/file is best to use. Here is an example code!

<img src="image.jpg" srcset="image-300x188.jpg 300w, image-700x600.jpg 700w, 
image-1024x640.jpg 1024w, image-1200x750.jpg 1200w" sizes="(max-width: 709px) 85vw, 
(max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px">

Explanation:

• srcset: If the image width on the page is 300px or less, the browser will load and display image-300×188.jpg. If the width is more than 300px and less than 700px, it will load and display image-700×600.jpg, and so on.
• sizes: The maximum image width for the given media query. It’s similar to an if-else statement – if the viewport width is 709px or less, the image’s maximum width will be 85% of the viewport. Otherwise, the maximum width is 840px.

Responsive Images — A New Feature in WordPress 4.4

WordPress uses the_content to add responsive attributes to images you upload. Here’s how it works:

• If your image has the wp-image-{ATTACHMENT_ID} class.
• If your image does not have the srcset attribute.

How to stop WordPress from adding responsive attributes to all images in content?

One way is to remove the wp-image-{ATTACHMENT_ID} class from specific attachments or disable responsive images globally by adding the following code to your theme’s functions.php file

remove_filter( 'the_content', 'wp_make_content_images_responsive' );

How to add srcset and sizes attributes to WordPress attachments in code? Here is an example of the code!

<img src="<?php echo wp_get_attachment_image_url( $attachment_id, 'medium' ) ?>" 
  srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'medium' ) ?>" 
  sizes="<?php echo wp_get_attachment_image_sizes( $attachment_id, 'medium' ) ?>" />

Let’s break down each function.

1. wp_get_attachment_image_url() returns the URL of the image with the specified size (in this case, medium).
2. wp_get_attachment_image_srcset() iterates through all image sizes and adds each size to the srcset in the following format: image-{WIDTH}x{HEIGHT}.jpg {WIDTH}w.

Please note that the function ignores:

• If the aspect ratio of the resized image differs from the original by more than 0.002
• If the image size has been edited
• If the resized image width exceeds the maximum srcset width (by default 1600, but it can be customized)
3. wp_get_attachment_image_sizes() returns the following (max-width: {WIDTH}px) 100vw, {WIDTH}px, where {WIDTH} is the actual width of the file.

How to Use Images with Different Ratios for Mobile Devices

Look at the image below. Which one do you think looks better on an iPhone 5?

You might notice the image’s aspect ratio (width/height) is different, and WordPress won’t add the proper image size to the **srcset** attribute. What you can do is add the following code:

function misha_sources($sources, $size_array, $image_src, $image_meta, $attachment_id) {
    $image_size_name = 'square500'; // add_image_size('square500', 500, 500, true);
    $breakpoint = 500;
    $upload_dir = wp_upload_dir();
    $img_url = $upload_dir['baseurl'] . '/' . str_replace(basename($image_meta['file']), $image_meta['sizes'][$image_size_name]['file'], $image_meta['file']);


    $sources[$breakpoint] = array(
        'url' => $img_url,
        'descriptor' => 'w',
        'value' => $breakpoint,
    );


    return $sources;
}


add_filter('wp_calculate_image_srcset', 'misha_sources', 10, 5);

For a better user experience, you can use the Manual Image Crop plugin to crop images the way you want.

That’s the article on how to make the main image responsive on WordPress Mangcoding . I hope this is helpful and assists you. Feel free to practice what I’ve explained in the article, and if you have any feedback or suggestions, please comment or send them through email or social media.

Thank you.

Reference : How to make the main image responsive on WordPress