CODEWITHSUNDEEP
cssimageperformance
Techagesite
Techagesite

Reputation: 475

Resizing images via css

If an image is 200px by 200px and you give that image a class in css with the same dimensions, will the browser still resize that image via css?

Ive been looking frequently into reducing page load time and one of the things that comes up is resizing via css slowing down page load time.

Upvotes: 0

Views: 63

Answers (4)

G.L.P
G.L.P

Reputation: 7217

Full optimization of images can be quite an art to perfect as there are such a wide variety of images you might be dealing with. Here are the most common ways to optimize your images for the web.

Use proper file formats. If you have icons, bullets or any graphics that don't have too many colours use a format such as GIF and save the file with lower amounts of colours. If you have more detailed graphics then use JPG file format to save your images and reduce the quality.

Save your images in the proper dimensions. If you are having to use HTML or CSS to resize your images, stop right there. Save the image in the desired size to reduce the file size.

To resize your images you will have to use some form of program. For basic compression you can use a simple editing program such as GIMP. For more advanced optimization you will have to save specific files in Photoshop, Illustrator or Fireworks. Source Link

Edit: Check this link to get more idea about speeding up page loading time

Upvotes: 0

Ram kumar
Ram kumar

Reputation: 3162

We can resize image propertionally from css but can't reduce load time from css

Upvotes: 0

Justinas
Justinas

Reputation: 43557

No, because image will be same size (as downloaded from server). Also, since width/height of class is same as image, image will not be resized. And I don't think that resizing such images has any impact on page load times.

Upvotes: 0

Yves Lange
Yves Lange

Reputation: 3994

If you apply a class to your image with some fixed dimensions, then it will stuck to the defined dimensions.

Unless you define "max/min-width" and "max/min-height" instead of width and height.

The loading time is not about the dimension of the image but more about the size (octets) of the file (here an image). The performance are poorly influenced by the dimension of it.

Upvotes: 1

Related Questions