Watch tutorial on YouTube.
The “srcset” attribute is designed to deliver smaller images for mobile devices while loading bigger images on computer screens.
When images on your WordPress website are already optimized and minified there is no need to use srcset feature for image optimization. You can disable srcset using this code snippet.
Code snippet
/* disable srcset */
add_filter('wp_calculate_image_srcset', '__return_false');
add_filter('wp_calculate_image_srcset_meta', '__return_null');
add_filter('wp_calculate_image_sizes', '__return_false', 99 );
// WP < 5.5
remove_filter( 'the_content', 'wp_make_content_images_responsive' );
// WP > 5.5
add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
Benefits of disabling SRCSET
- Remove code bloat added to every image tag.
- Resized image file size is not always smaller than original. You end up serving bigger images for mobile device.
- Consistent behavior across all devices.
- Simplify image usage.
Screenshot shows that original image is already optimized and 5 times smaller than auto resized image by WordPress. When we “Disable SRCSET” we will actually use smaller and crisper original image for mobile and desktop users.
If your images already optimized for the internet (less than 100 Kb file size) then you do not need to use srcset feature. Then safely disable it.
Image dimension and file size recommendation for websites
Regular images used on webpage should be preferable less than 1000px width and height. File size less than 200kb. These are not hard limits, you can go a litter above these values.
If you want to display high resolution images (more than 2000px or bigger than 1-2 Mb) then provide them as downloadable high resolution image or create downloadable PDF brochure.
- ✅ Use SRCSET — when you upload not optimized images more than 1 Mb in file size.
- 🚫 Disable SRCSET — if you always upload optimized images less than or around 100 Kb file size.
FAQ
What is the difference between image src and srcset?
Image src is default attribute to provide image source.
Example image with src:
<img src="image.png" width="800" height="354">
Image srcset is new attribute that has multiple image sources for different screen sizes. This is added to provide smaller or bigger images depending on device that is used to view a website.
Example image with srcset:
<img src="image.png" width="800" height="354"
srcset="image.png 800w, image-768x340.png 768w"
sizes="(max-width: 800px) 100vw, 800px">
Image tags will always have src attribute even if they have srcset attribute. Src serves as default and fallback for browser that does not support srcset.
I upload real big images with file size more than 1 Mb each. Should I disable srcset?
No, it is beneficial to use srcset when you have very big (more than 1 Mb) images. So do not disable scrset.
Will images still be responsive after disabling srcset?
Yes, in most up to date WordPress themes images are already responsive. Meaning they will scale to fit your mobile screen. Visually it does not change with or without srcset.
Does this snippet prevents image auto resize feature of WordPress?
No, it does not prevent auto resize.
Is there a plugin to disable srcset?
Yes, you can use “Disable Responsive Images Complete” plugin to disable srcset for images.
—
What is next:
- Guide to optimize images.
- Reduce page size by lazy loading YouTube videos.
- View more code snippets.