Skip navigation
Currently Being Moderated

avoiding pixelation with image resizing

Apr 21, 2012 8:36 PM

i just redesigned my site (with a ton of help from many people on this forum--thank you nancy riki osgood

Sudarshan!!)

 

i have my thumbnails resizing (using max width: 100%) in a gallery but on a large browser window like my 32" monitor they get pixelated when they scale up, particularly the text..

is there  a way to start with a higher resolution image and display them at a smaller display size so when they scale up they stay crisp?

 

http://toddheymandirector.com/

 

go to REEL, MORE and NEWS

 

thanks..

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 22, 2012 12:26 AM   in reply to reelhero

    Hello mate, Welcome back!

     

    Ideally, I wouldn't do a 100% width for your images on the site for enlarging them. No matter what plug-in you use, you'll definitely end up pixelating the image at least to some extent.

     

    However, if you're definitely looking at achieving this, try this: http://archive.plugins.jquery.com/project/aeImageResize

     

    And, start with a higher resolution of the image. The plug-in will scale it down proportionately depending on the screen dimension you're displaying it on, rather the DIV dimension that holds the image inside.

     

    Also, it is to be noted that usage of multiple jQuery will lead to a performance issue on your site. You should keep this in mind.

     

    One last thing: having said that you should start with a higher image resolution, your load time for the site will considerably increase as the plug-in only scales down the image visually, it doesn't load differently sized images!

     

    If I were you, I'll keep the thumbnail images to zoom in to one optimal size and then provide a link inside my fancybox/ lightbox to a much fuller, bigger size image - if someone is interested in seeing them/ downloading the big size image.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points