0

I have a 100x100 image and I use <img src='...' width='20' height='20' /> to size it down in the HTML body that will be sent in an email. But the width and height attributes do not seem to work on some email clients in Android and the image will just be displayed in its original size.

The fix I came up with is to resize the original image to be 20x20 using photoshop and use the 20x20 image as the image source so that I do not need to rely on the width and height attributes. But when I resized the image to be 20x20 using photoshop, the image became very fuzzy. I did some research online, people were saying that the image will always lose some quality when it's sized down.

The thing I do not understand is that the image looks fine in the browser without any quality loss when I use <img src='...' width='20' height='20' /> to resize it. Is there anything special the browser/HTML does when resizing images? (The image is a black and white logo if that makes any difference).

wtesfsd123
  • 87
  • 9

1 Answers1

0

Please clarify what image format you are using since this can have an effect, especially for (very) small images.

While JPG and HEIC file formats are excellent for large photographs, they are not suitable for tiny logos. I would suggest to convert your original 100x100 image to PNG format, and then scale it down to 20x20, and repeat your test. For PNG images, the difference should be minimal.

There can be one other factor at play: the pixel density (DPI) of your screen or display. Nowadays, most phones have quite high resolution displays, and so do the more expensive laptops and desktop monitors (mac and windows). On such a high density display, what the browser or email-client thinks of as a 20 by 20 pixel image, is actually rendered on the double or triple amount of hardware pixels. So, although you specify width=20 in the HTML (or CSS), your image may be rendered on 40 hardware pixels or more. When your image was resized in photoshop, that will not make much difference as there is only information for 20x20 pixels left in that file. However, when you use your original 100x100 pixel image in the HTML, then the rendering pipeline of your email client will resize the original 100x100 pixels to 40x40 (and not 20x20). There will be more detail visible. Curved and skew lines will look sharper.

mcoomans
  • 116
  • 4