Use image thumbnails vs original images

Note:  POFO WordPress theme has already implemented srcset for images, so there is no action required by POFO theme users.

SRCSET is newly standardized HTML attribute used with the <img> tag. The SRCSET attribute is fully supported by most modern mobile devices. It allows webmasters to display different images based on a device’s screen size without the need for JavaScript or other script code.

SRCSET is allowing developers and content creators to easily create responsive images for WordPress, swapping out large images for smaller ones more suitable to the size of the devices screen. That means mobile browsers can be served the smaller images, thus speeding up their ability to render the page. For SEOs, it helps to rank with faster loading mobile site. It also helps to improve load time, reduce the amount of visitor’s bandwidth.

Let’s understand with an example.

<img src="/wp-content/uploads/flamingo-fallback.jpg" srcset="/wp-content/uploads/flamingo4x.jpg 4025w, /wp-content/uploads/flamingo3x.jpg 3019w, /wp-content/uploads/flamingo2x.jpg 2013w, /wp-content/uploads/flamingo1x.jpg 1006w>

Here we have one img tag to display image. In “src” attribute we have added the original image url. We have uploaded same image as original but in different sizes and used it in srcset as seen above mentioned code. After the image url we will provide the size of the image at the end.

So according to the size of your screen, srcset will provide best suitable image to display on screen. It will also save time to load page as we do not need to show high resolution image for each device by resizing it.

Go Back