CODEWITHSUNDEEP
htmlcssimage
Adam
Adam

Reputation: 20882

Does resizing images down with HTML/CSS produce better results than Fireworks etc.?

I generally take an image in Fireworks, change it to the right size for the website and then export it for the web as JPG/PNG. This is fine.

I've been noticing that if I use a larger image in my <img> tag and then resize it with the CSS width property, it will be crisper and clearer than if I resized it in an Adobe product.

Do others get the same experience? E.g.: take an image that’s 100x100, resize to 50x50 in Fireworks, and 50x50 with CSS, and the image looks better with the CSS resize.

I understand the smaller the image the better for site load times etc.

Upvotes: 2

Views: 610

Answers (4)

Kae Verens
Kae Verens

Reputation: 4079

This depends on the browser and the image manipulation program.

When you resize using CSS or HTML, you are asking the browser to do the resizing, instead of supplying a pre-resized image.

Whether the resulting resized image is "clearer" depends on the image, the browser, and the resizing algorithm used (bicubic, bilinear, Lanczos, etc).

For best results, you should resize it yourself. You can try a number of different resize algorithms in your image manipulation program. With a browser, you are depending on that browser to supply the right resize algorithm, and you can't guarantee that every visitor will use the same browser...

http://en.wikipedia.org/wiki/Image_scaling

Also, as @PeeHaa already noted, giving the browser the larger image means more loading time. It also means more RAM usage in the browser.

Upvotes: 2

Polynomial
Polynomial

Reputation: 28316

When using CSS it's entirely based on the browser. Firefox seems to be very good at downsizing the images, but Internet Explorer (at least IE6/7) is horrendous at it.

You may want to try changing your resize method in Photoshop or another graphics editing tool. Fireworks probably uses a fixed algorithm. I find that bicubic resize works best for most cases, though it may be a different case for you if you have sharp edges or crisp lines.

You should also test your images on different screens. I've had cases where a rather "liney" image looked horrible on one screen, but perfect on another.

Upvotes: 0

Michał G&#243;rny
Michał G&#243;rny

Reputation: 19233

My guess would be that the particular browser you're using uses better/more suited for the particular image resizing algorithm that the program you used.

You can take a random image editor like gimp and take a look at resizing option where you can choose one of the interpolation methods available.

Unless your browser is doing some additional image scaling as well.

Upvotes: 0

PeeHaa
PeeHaa

Reputation: 72652

I've been noticing if I use a larger image in take and then resize it will CSS width it will be more crisp and clearer. Looks better then resizing in an Adobe Product.

That would be a first.

Generally on the web you should just provide images with the correct dimensions for the best results.

Also as you already said larger image == more loading time (for a relative small image).

EDIT

I just checked out out what Fireworks is :) something to create images for the web might not be the best tool for resizing images (I think it does compression too). Have you tried PhotoShop / Illustrator?

Upvotes: 0

Related Questions