How to Serve Scaled Images from website

You are here:
Estimated reading time: 2 min

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.

  1. 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″ />

  1. 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.

  1. 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.

  1. 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 Resize Large Images feature, you can specify maximum image width in px. The plugin will resize images on upload which are larger than the specified maximum width. Previously uploaded images can be resized with the Image Optimizer. If you don’t need really big images, only web images you can resize uploaded images which are too large.

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.

Many themes are using bigger images and resize them with CSS, because you will need different size on different screen resolutions. For example lets say your images are 300px wide, you have a tablet with landscape width of 1000px and portrait is 600px. If you have 4 columns on landscape, you can use the 250px images. But, if you rotate the device to portrait, your theme will show 2 columns per each row, so you will need 300px wide images. So, there is not always an easy solution, but you may also see if another element of your theme(builder) provide more flexiblity to deal with these issues.
Was this article helpful?
Dislike 4 2 of 6 found this article helpful.