【HTML】表示サイズより大きめの画像を使うのがいいらしい

こんにちは、フリーランスエンジニアの太田雅昭です。

表示サイズと実際の画像サイズ

表示サイズは、imgタグで設定します。直接指定する場合やstyleでする場合があります。しかしこれで、表示サイズと実際の画像サイズを合わせると、画質が悪く見えてしまいます。実際に実験してみました。

やってみた

以下のコードで試してみました。Reactです。表示サイズからどれだけ大きい画像ファイルを使用するかを、scaleで指定しています。画像はサーバーでリサイズしています。

const URL = 'http://xxx.example.com/yyy';

export default function Test() {
    return <div style={{ display: "flex" }}>
        <TestMedia scale={1.0} />
        <TestMedia scale={1.5} />
        <TestMedia scale={2.0} />
    </div>
}


function TestMedia({ scale }: { scale: number }) {
    const [width, height] = [300, 200];
    const srcWidth = width * scale;
    const srcHeight = height * scale;

    const src = `${URL}?width=${srcWidth}&height=${srcHeight}`;

    return <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
        <img
            src={src}
            style={{ width, height, objectFit: "contain", background: "#ddd" }}
        />
        scale: {scale}
    </div>;
}

結果、以下のようになりました。

お分かりいただけるでしょうか。明らかに、scale:2、つまりwidth,heightそれぞれ2倍、解像度で言えば4倍の方が綺麗に見えます。

なぜ大きい画像を使う方が綺麗に見えるのか

これはディスプレイによるものです。HTMLで指定するピクセルは、実際のディスプレイのピクセルではありません。実際のディスプレイはもっと細かく表示がされているため、HTMLで指定するピクセルの間を補完しているのです。そのため、結果このようなことになります。

昔に聞いたような気がする話だったのですが、なぜ今の今まで忘れていたのかという、個人的な感想を抱きました。とにもかくにも、今回実験して改めて差があることに驚愕しました。