What is a scaled image?
A scaled image is an image whose size matches exactly with the size defined in CSS or HTML. Let’s say a user of a website uploads a 400 x 400 dimension picture and uses it as a thumbnail of 40 x 40 using HTML/CSS. This means that the browser will have to download the large file first and scale it down before displaying it. A more efficient method would be resizing the image to 40 x 40 so that the browser would not have to inefficiently download and scale down the image.
Benefits of serving scaled images
Using properly sized images can save many bytes of data and improve the performance of your site, especially on mobile devices or tablets. A scaled image will take up less space, will be loaded faster and reduce the resource usage. Serving scaled images is also one of the recommendations provided by website optimization tools. Having a better score will improve your site’s ranking on Google and boost SEO.
- Make Sure That Your Images Are Sized Correctly
Avoid scaling images to ensure fast load times. This way you can guarantee the best experience for your visitors. Using the correct images sizes for your site helps avoid massive images being uploaded here and there. Be sure to set the height and the width correctly.
<img src=”/images/image.jpg” width=”350″ height=”400″ />
- Lazy Load Your Images
Have you ever noticed that on some pages, images slowly fade in as you scroll? Well, that’s what we call “lazy loading”. It helps only load images when your visitor has scrolled to that content. This in turn reduces the load time for your visitors and the improves server bandwidth. Enable Lazyload Images feature in Swift Settings->Media->Images.
- Resize images
Resize your images to the correct size for your site. For site images, figure out how wide your website content area is and never upload an image wider than that. If it’s going to be used in a slider, make sure you determine the dimensions of the slider first. For important images such as logos, headers and others that load on every page of your website, best practice is to make new versions of those images and then for all other images, you could use a plugin, such as Enable Media Replace plugin. This will allow you to simply replace existing images in your media library with the new, optimized ones, without breaking any links.
For the other images in your Media library, where it would be unrealistic to go through and fix them all individually, you may use Swift Image Optimizer.
- Optimize and compress your images
With Image Optimizer you can optimize every image on your site. It will scan the whole site, and pick up every image from themes, plugins and upload folder. With
If you still see warnings regarding serve scaled images, then probably your theme is using bigger images and resize those with CSS, as you will need different size on different screen resolutions.