CODEWITHSUNDEEP
htmlcss
Manish Basdeo
Manish Basdeo

Reputation: 6269

What is a scaled image and how do I serve one in a webpage?

Whan I run a test page in google PageSpeed. I found a few warnings like for example serve scaled images..

 http://man-vimal.net78.net/introduction/?intro/action=main

THe results were as such :
The following images are resized in HTML or CSS. Serving scaled images could save 449.3KiB (99% reduction).
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).
http://man-vimal.net78.net/introduction/views/images/fb.png is resized in HTML or CSS from 1,692x1,692 to 20x20. Serving a scaled image could save 115.9KiB (99% reduction).
http://man-vimal.net78.net/.../linkedin.jpg is resized in HTML or CSS from 1,024x768 to 20x20. Serving a scaled image could save 99.6KiB (99% reduction).
http://man-vimal.net78.net/.../panorama.jpg is resized in HTML or CSS from 604x453 to 100x100. Serving a scaled image could save 81KiB (96% reduction).
http://man-vimal.net78.net/.../googleplus.jpg is resized in HTML or CSS from 450x320 to 20x20. Serving a scaled image could save 12KiB (99% reduction).

What is a scaled image and how can I fix this up ??

Upvotes: 14

Views: 46176

Answers (5)

Nadeem Khan
Nadeem Khan

Reputation: 3434

A Scaled Image is an image whose size matches exactly with the size defined in CSS or HTML.

If your original image called twitter-logo.png is of lets say 300 x 250 dimension but the dimension defined in the HTML statement is:

<img src="http://man-vimal.net78.net/.../twitter-logo.png" width="600" height="500">

then the browser will first download the original image (which has a dimension of 300 x 250) and will then resize it to match the dimensions defined in the HTML statement. i.e. 600 x 500

This resizing of images in the HTML or CSS slows down the overall page rendering considerably and should be avoided.

To resize images (and to optimize them losslessly) you can use a free software called RIOT (available only for Windows).

Upvotes: 1

cwiggo
cwiggo

Reputation: 2609

For example, if a user of a website uploads an image of size 400px x 400px and you use this image as a thumbnail say 40px x 40px using html/css.

The web browser has to download the larger image and compute it to the smaller size. The best way to solve this problem is to make a distinct copy of the image, say 'when the user uploads the image' and then use it directly.

So the web browser does not have to inefficiently scale down the image.

I hope this helps.

Upvotes: 2

PassKit
PassKit

Reputation: 12591

A scaled image is an image that has been scaled to match the size that it is displayed.

http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).

This is telling you that the your source image is 367x367 but you are displaying it at 20x20.

It is inefficient because the browser has to download the larger image and then rescale it. The 367x367 image is 140kb larger than a 20x20 image would be.

To fix this, resize the image (in photoshop, preview, etc. ) so that is 20x20 and serve that one instead of the image you are currently serving.

Upvotes: 21

nickcoxdotme
nickcoxdotme

Reputation: 6707

The typical situation is that, say you have an image with a width of 400px, but it doesn't fit in your layout, so you go to your style sheet and write:

img { width: 300px; }

Here, you've resized the image with CSS. But you're still serving the image at a 400px size and scaling the image down.

The implication here is that, rather than using the 400px image, you should use the image sized the way you need it because the file size will be smaller, and thus the page will load faster.

Upvotes: 2

Rachel Gallen
Rachel Gallen

Reputation: 28573

your images are too big. just resize them. you can even use paint to do that. a scaled image is basically a resized image.

Upvotes: 3

Related Questions