Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts

    Resizing User Uploaded Images Without Losing Quality

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

    Code:
    .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
    Last edited by Sammy12; 11-19-2011 at 06:46 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,267
    Thanks
    10
    Thanked 277 Times in 276 Posts
    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

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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.
    Last edited by Sammy12; 11-19-2011 at 06:44 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •