【CSS】画質を落とさずに高画質のまま画像を拡大・縮小して表示するための方法(imgタグで画像サイズ調整)

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、画質を落とさずに高画質のまま画像を拡大・縮小して表示するための方法(imgタグで画像サイズ調整)について解説します。

1 ブラウザでは、元画像の画質を崩さずに画像サイズを調整して表示できる
2 おすすめ書籍(HTML&CSS編)
3 プログラミング学習・エンジニア転職関連の情報
4 Twitterやってます！Follow Me！
5 最近の投稿

ブラウザでは、元画像の画質を崩さずに画像サイズを調整して表示できる

画像加工で、拡大・縮小をすると、画質が落ちる問題ありますね・・・

実務で、そんな問題に悩んでいた時に、とあることに気づきました。

それは「ブラウザでは、元画像の画質を崩さずに画像サイズを調整して表示できる」ということです。

このあたりまえのブラウザの機能に救われましたし、あらためてブラウザの機能に感心もしました。

元画像が高画質だったら、画像を加工せずとも、コードで画像サイズ(幅・高さ)を指定するだけで、画質が綺麗なまま表示できます。

width・height の適用の優先度

画像の表示サイズを設定する時に注意してもらいたいのは width・heightの適用の優先度です。

画像の表示サイズ(表示幅・高さ)を設定する方法には、次の3つがあります。

imgタグの width属性・height属性で、画像の表示幅・高さを調整する。
CSSの width-プロパティ, height-プロパティをclassなどで指定して、画像の表示幅・高さを調整する。
style属性で、width-プロパティ, height-プロパティで、画像の表示幅・高さを調整する。

上記3つの画像の表示サイズ(表示幅・高さ)を設定する方法の width・heightの適用の優先度を比較すると次のようになります。

「 style属性によるCSS > class による CSS > imgタグの width & height 属性 」

SampleCodeとHTML実行イメージ

SampleCodeとHTMLの実行イメージです。

ロボ玉たちの画像は、Web上に公開してあるロボ玉のグラビア写真から引っ張ってきています。

【Robotama】ロボ玉 (Robotama)とは？

<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Inline-Flex-Test🔥</title>
        <style>       
            .container {
                display: flex;
                justify-content: space-evenly;
            }

            .robotama {
                width: 300px;
                height: 250px;
            }
        </style>
    </head>
    <body>

        <h1 style="text-align: center;">ブラウザでは、元画像の画質を崩さずに画像サイズを調整して表示できる🔥</h1>
    
        <span class="container">
            <div>
                <h2>ロボ玉試作1号機🔥</h2>

                <!-- 1. width属性・height属性で、画像の表示幅・高さを調整する -->

                <img src="https://masanyon.com/wp-content/uploads/2022/11/purupuru-robotama-1024x768.jpg" alt="ロボ玉" width="200px" height="150px">
            </div>
    
            <div>
                <h2>ロボ玉試作2号機🔥</h2>

                <!-- 2. CSSの width-プロパティ, height-プロパティで、画像の表示幅・高さを調整する -->

                <!-- 適用の優先度: class による CSS > img の width & height 属性  -->
                <img class="robotama" src="https://masanyon.com/wp-content/uploads/2022/11/d86f450b53c3f637a992b2a5433348c7-1024x768.jpg" alt="はむはむロボ玉" width="200px" height="150px">
            </div>
            
            <div>
                <h2>ロボ玉試作3号機🔥</h2>

                <!-- 3. style属性で、width-プロパティ, height-プロパティで、画像の表示幅・高さを調整する -->

                <!-- 適用の優先度: style属性によるCSS > class による CSS > img の width & height 属性  -->
                <img class="robotama" src="https://masanyon.com/wp-content/uploads/2022/11/robotama-kawaii-1024x768.jpg" alt="ぷるぷるロボ玉" width="200px" height="150px" style="width: 500px; height: 450px">
            </div>
        </span>
    
    </body>
</html>

まとめ

高画質画像を CSSや imgタグの witdh属性や height属性でサイズ調整すれば、綺麗なまま拡大・縮小して表示できる。
width・heightの適用には、優先度がある。
- 「 style属性によるCSS > class による CSS > imgタグの width & height 属性 」