Help us understand the problem. What is going on with this article?

GmailでHTMLメールの画像が荒れる現象

More than 1 year has passed since last update.

WS000000.png

HTMLメールなどで画像サイズの値をピクセルで指定しており、かつ、スタイルシートでサイズ指定された値のほうが大きい場合に画像が荒れる。
(小さい画像を大きくしたかのような乱れかたをする。上の左側の画像)

上の左側の画像
<img src="TENMUSU_LEFT.png" style="width: 400px;" alt="ABC" width="100"> 

タグの値がスタイルシートより大きいか、%指定なら問題なく表示される。

上の右側の画像
<img src="TENMUSU_RIGHT.png" style="width: 400px;" alt="ABC" width="100%"> 

Gmailでのみ確認できた不具合だったのですが、Gmailで軽快な動作をさせるためにの仕様で、はじめにHTMLタグの指定サイズで画像を圧縮して書出して表示し、その後スタイルシートを適用しているのではないかと思われます。

googflog
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away