Resolved Resizing User Uploaded Images Without Losing Quality

[Sammy12]

The image's original size was 150px by 150px, JPG.

.avatar {
  width: 48px;
  height: 48px;
}
.avatar img {
  height: 48px;
}

Chrome/Safari IE(6-9) FF/Opera:

Facebook seems to resize their images before hand (with some kind of program) so that there are 2 images on their servers. How did they resize this without losing image quality?

resizing images without losing quality
resizing images in css without losing quality
resizing avatar images without losing quality
resizing user uploaded images without losing quality

[tracknut]

It's always best to resize down from the largest possible original, to the actual size you need for the web site *in a graphics program* like Photoshop. Resizing within a browser, as you've seen, produces questionable results. So I'd put your 150px originals in Photoshop and size them to 48px and you should get a better result.

Dave

[felgall]

Use a graphics program to resize the image. HTML and CSS are not designed for resizing images - they are designed to display images at their true size and will almost always distort the image if you try to display them at a different size.

[Sammy12]

Avatars are dynamically created... I can't personally resize everyone's avatar

Example:
User uploaded at 220px by 220px.

Small Image (different image on server), somehow resized to 50px by 50px
Larger Image (scaled with CSS), somehow resized to 100px by 100px



Nevermind, I found it:
http://joedesigns.com/resizing/

I'm going to try to make this searchable so that people with this question in the future can see this thread.