Member Avatar for FBG

I need several square pictures for my website and display them in 100 x 100 px using CSS. When I use bigger pictures (for example 300 x 300, 455 x 455 or any square size), the result in Internet Explorer 7.0, 8.0 and Google Chrome looks really good. The image quality is much higher than the quality of a manually resized picture.

In other browsers however, like Firefox 3.5+ and the older IE browsers, the downscaled image is really ugly.

Is their a way to make downscaled images just as good in Firefox as in IE and Chrome? Or should I always manually resize all images to 100 x 100? (I've read somewhere that most designers never use scaled images on their websites?)

Thank you in advance!

  • 1 Contributor
  • 2 Replies
  • 182 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by FBG

Dani AI

Generated

Good call, — the visual difference you saw comes from browsers using different resampling algorithms when images are scaled in CSS. That explains why Chrome/IE and Firefox looked different. You can’t reliably make CSS downscaling produce identical, high photographic quality across every browser, so for production the best practice is to serve images already sized (and compressed) for the exact display size you need.

Practical workflow:

  • Pre-generate square thumbnails at the display size (100×100) and also create a 2× version for high‑DPI screens. Use srcset so browsers pick the right file. For cropping while preserving semantics, use object-fit: cover; for older browser fallbacks you can use background-size: cover.

Example HTML/CSS:

<img src="photo-100.jpg"
     srcset="photo-100.jpg 1x, photo-200.jpg 2x"
     width="100" height="100" class="thumb" alt="...">

.thumb {
  width:100px;
  height:100px;
  object-fit:cover;
  display:block;
}

Fast command to create good-quality thumbnails with ImageMagick (Lanczos resampling, center-crop, strip metadata):

# ImageMagick 7+
magick input.jpg -filter Lanczos -resize 100x100^ -gravity center -extent 100x100 -strip -quality 85 output.jpg

Final tips: use JPEG for photos (PNG for transparency), consider modern formats (WebP/AVIF) where supported, and keep file size small for performance. CSS scaling is fine for prototypes, but for consistent quality and bandwidth savings generate thumbnails at build time or on the server/ CDN — your decision to pre-scale was the right one.

Member Avatar for FBG

Excuse me, I might have made a mistake. The images look very different in Firefox, but I can't really determine if it's better or worse. So this is no specific Firefox problem :) (I should change the thread title, but I don't know how)

One question remains: should I downscale images with CSS or manually downscale them all before I put them on my website?

Edited by FBG because: n/a
Member Avatar for FBG

No, I am pretty sure Firefox does a very bad job scaling down images. The images are a lot smoother in other browsers. I've decided to scale them down my self before I put them on. To bad nobody could give an opinion on this.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.