homepage Welcome to WebmasterWorld Guest from 54.237.98.229
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Scaling an image
How to restore quality?
getxb

5+ Year Member



 
Msg#: 3899312 posted 6:31 am on Apr 24, 2009 (gmt 0)

I am scaling 15 115 x 115 px image to 100 x 100 xp images and displaying in my home page. And since the images are scaled using HTML and displayed they are getting distorted by around 15% (clarity is missing, few small letters are not visible, etc.) How to fix this?

Kindly suggest if there is a way out.

 

tangor

WebmasterWorld Senior Member tangor us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3899312 posted 7:06 am on Apr 24, 2009 (gmt 0)

With such a small difference in size, why not physically resize to 100x100? Any number of graphics programs should do a much better job than the on-the-fly scale provided by browsers.

getxb

5+ Year Member



 
Msg#: 3899312 posted 9:37 am on Apr 24, 2009 (gmt 0)

The reason why I don't prefer to do is any image from a set of approx 10K can be shown anytime (content of HP changes every 15mins). Yes I may write a program that will create a copy of the 115 version and scale it/save it to /images/100/ directory so that this issue gets sorted out. But again it comes to the question of maintenance.

Cant we solve it from HTML/CSS code itself. 2-5% clarity loss is accepted.

mattur

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3899312 posted 10:55 am on Apr 24, 2009 (gmt 0)

You can either resize your images to the correct size, or scale them in browsers using HTML/CSS with sub-optimal results. Alternatively, redesign your homepage to use 115px images... ;) HTH.

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3899312 posted 2:19 pm on Apr 24, 2009 (gmt 0)

What is happening when the image is resized in the browser is that the pixels are interpolated by the browser. That is, these pixels

.................... (20)
are turned into, say, these
.......... (10)

So the browser must guess and "skip" pixels in-between. When you resize in a graphics program, actual interpolation algorithms are applied and provide a more accurate interpolation of the pixels. Even this will likely show a degradation in most bitmap formats, but at least it's better to a degree, and you can add a sharpening filter to bring back some quality (although this fails horribly with formats lacking in anti-aliasing, such as .gif or other bitmap formats.)

Since you're restricted to server-side output, you might consider automating a process using imageMagick or the GD library to dynamically resize and output the images. ImageMagick has sharpening capabilities. Both are available to most server-side languages (perl, PHP . . . )

getxb

5+ Year Member



 
Msg#: 3899312 posted 5:02 am on Apr 25, 2009 (gmt 0)

Does anyone use:


<style type=text/css>
img {-ms-interpolation-mode:bicubic;}
</style>

thecoalman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3899312 posted 12:31 pm on Apr 25, 2009 (gmt 0)

If you have 10k of images use something like irfanview to batch resize them.

If you want to do it automagically server side look into using GD .

[us.php.net...]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved