The below was pulled out from a blog post in regards to SEO speed optimization:Let’s say that you upload a 720px-wide image to your site.If someone visits on a mobile device with a much smaller display, say 320px-wide, then their browser still has to load the 720px image. That image will look perfectly fine. But so would a 320px-wide image.Do you see the problem? Loading the 720px image is a waste of bandwidth and serves only to slow down how fast the page loads. That isn’t good for SEO.The solution is to use srcset.This is a magical piece of HTML code that tells the browser to load different versions of an image for different screen resolutions.Here’s the syntax, followed by an explanation:<img src="image.jpg" srcset="image-medium.jpg 1000w, image-large.jpg 2000w">The first part of the syntax is a pretty standard <img> tag. We then also include links to two other versions of the same image in different sizes—medium (1000px wide) and large (2000px wide).Now I’m going to steal this next part of the explanation pretty much word for word from this article because it does a fantastic job of explaining what happens here.Say you’re on a device with a screen width of 320px and is a 1x (non-retina) display. The images you have are small.jpg (500px wide), medium.jpg (1000px wide), and large.jpg (2000px wide).The browser goes:Lemme do some quick math that nobody cares about except me.500 / 320 = 1.56251000 / 320 = 3.1252000 / 320 = 6.25OK, so since I’m a 1x display, 1.5625 is the closest to what I need. It’s a little high, but it’s the best option compared to those other that are way too high.Now another browser visits the site. It’s also a 320px display but it’s a retina (2x) display. That browser does the same math, only then goes:OK, so since I’m a 2x display, I’m going to throw out that 1.5625 image because it’s too low for me and might look bad. I’m going to use the 3.125 image.Make sense? The browser essentially chooses the most efficient image to send to the visitor, thus reducing bandwidth and improving load time. Perfect. But does that mean that you need to upload many different sizes of all your images? Not necessarily. WordPress takes care of automatically (starting in WordPress 4.4—which you should all be using by now). For each image you upload, WordPress makes these versions by default:Thumbnail: A square crop (150px by 150px).Medium: Resized so that the longest side is 300 pixels wide or high.Medium Large. Resized to 768 pixels wide.Large: Resized so that the longest side is 1024 pixels wide or high.Full: Original image.Furthermore, WordPress also adds srcset automatically.Here’s what that looks like for our blog (which runs on WordPress):To reiterate: That code is generated entirely by WordPress. We didn’t upload multiple versions of that image.Note that you can use the @2x syntax if you wish to optimize for retina displays. There’s also this WordPress plugin which adds support for such displays pretty much out of the box. Having said that, unless you go crazy with image compression (i.e., anything below ~40%) for JPEGs, you’ll likely find that your ‘regular’ images scale up just fine on retina displays. That’s my experience, anyhow.

HIGHLVL-I-2470