Question

I am using the responsive image technique, which is to set max-width to 100% to resize my images according to the screen resolution/size. However, when I put the image inside a div that has a percentage width, the images do not appear crisp (since I surmise, it has been resized via browser). The text on the image is quite blurred. Is there a way to make it look crisp? Or at least to make it look crisp on the most common screen size?

CSS:

img {
  max-width: 100%;
  height: auto;
}

.img-container {
  width: 57%;
}

HTML:

<div class="img-container">
  <img src="[img source]" width="700" height="500" />
</div>

Answer 1

If you’ve got a large image that’s being scaled down, resize it in a vector graphics program first, then save it as the preferred size, and serve that to the client.

If you’ve got a small image that’s being scaled up, you’re going to lose resolution, no option.

This isn’t really a CSS/HTML problem, just FYI, it’s a scaling problem. Various browsers will use various scaling algorithms, so the results will not be consistent. You’ve got to grab the controls and force the browsers to show the image you want, without scaling. One of the practical drawbacks to the theoretical beauty of “responsive design”.