CODEWITHSUNDEEP
htmlcss
user1788175
user1788175

Reputation: 1518

Shrink img without losing quality?

See this:

http://real-sense.com/index.php?option=com_content&view=article&id=106

The set of vertical images on the right are being resized using CSS

.thumbnail-product-resize
{
width:144px;
height : auto;
}

Does anyone know how to do this in a cleaner way so I don't lose quality on the image?

I mean that if I had resized the image using photoshop, the text won't appear as blurry as it does here.

Tested in FF

Thanks

Upvotes: 3

Views: 23092

Answers (4)

Chris Herbert
Chris Herbert

Reputation: 6285

Once upon a time browser image resizing gave truly heinous results due to the unsophisticated nearest neighbor technique they used to scale images. Now they usually perform filtering when scaling and there isn't that much difference between in-browser resizing and resizing in Photoshop.

The real advantage to scaling an image before serving it to the client is that you aren't forcing the download of large images when they aren't necessary. Depending on the size of your images, this can significantly reduce your page load times.

One final thing to consider is that more and more people have devices with "retina" displays. For those users scaling the image before serving it will result in much less crisp images.

Here's an in-depth comparison of the image scaling methods used by various browsers: http://entropymine.com/resamplescope/notes/browsers/

Upvotes: 4

Daniel Figueroa
Daniel Figueroa

Reputation: 10666

It is impossible to shrink an image without loosing quality unless it is an vector-image. That would mean that you'd have to use SVG. And considering the images displayed I don't think you wan't to do that.

Also you mentioned the cleaner way to do it, use photoshop or something similar.

Upvotes: 1

Tom
Tom

Reputation: 16198

The quality of your images will depend on the original size of the image you use. If have a large image with good quality, say of size 400x500, and it is then resized in the HTML to 80x100, it will still be a 400x500 image. However you can only fit a certain number of pixels on a smaller image of 80x100, so this bigger image has to be sampled. This means that an average is taken of pixels and then made to represent a 80x100 size image. If you want a more definite result you can change to original size of the image to 80x100. This will probably give you better results.

Upvotes: 11

Billy Moat
Billy Moat

Reputation: 21050

Even if you had done this in photoshop those images you have would still appear pretty much the way do just now.

FYI you don't need to include height:auto in your CSS above.

Best bet would be to create a seperate set of thumbnails (using photoshop) which maybe just show a portion of the image.

Loading the thumbnails and resizing them with css the way you are doing is bad practice as you are still having the user download the large images first.

Upvotes: 3

Related Questions