CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

【CSS】Transform＆Scale適用時も画質を維持する方法｜image-renderingプロパティの使い方

CSSのimage-renderingプロパティとは？

Webページ上で画像を拡大・縮小すると、拡大時には画像がぼやけたり、縮小時には輪郭がギザギザ（ジャギー）になったりすることがあります。CSSのimage-renderingプロパティを使えば、ブラウザが画像をスケーリングする際に採用するアルゴリズムを指定でき、transformやscaleを適用する場合でも、意図した画質を維持できます。

構文

image-renderingプロパティの基本的な構文は以下のとおりです。

Selector {
    image-rendering: /*値*/
}

指定できる主な値

  • smooth … スムージング（平滑化）アルゴリズムで拡大・縮小を行い、なめらかで自然な見た目になります。
  • pixelated … 最近傍補間でスケーリングされ、ピクセルがくっきりと残ります。ドット絵やレトロゲーム風の画像に最適です。
  • crisp-edges … エッジ（輪郭）のコントラストを維持しながらスケーリングし、ぼやけを最小限に抑えます。

サンプル1：3つの値の表示比較

次の例では、同一の画像に「smooth」「pixelated」「crisp-edges」をそれぞれ適用し、描画結果の違いを比較しています。

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                height: 200px;
                width: 200px;
            }
            #one {
                image-rendering: smooth
            }
            #two {
                image-rendering: pixelated
            }
            #three {
                image-rendering: crisp-edges
            }
        </style>
    </head>
    <body>
        <img id="one" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
        <img id="two" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
        <img id="three" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
    </body>
</html>

このコードの出力結果は以下のとおりです。

【CSS】Transform＆Scale適用時も画質を維持する方法｜image-renderingプロパティの使い方

サンプル2：角丸デザインの画像への適用

続いて、角丸（border-radius）と余白（padding）を設定した画像に、各値を適用した例を紹介します。

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                padding: 5%;
                border-radius: 40%;
                height: 20%;
                width: 20%;
            }
            #one {
                image-rendering: pixelated
            }
            #two {
                image-rendering: smooth
            }
            #three {
                image-rendering: crisp-edges
            }
        </style>
    </head>
    <body>
        <img id="one" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
        <img id="two" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
        <img id="three" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
        <br/>
        pixelated, smooth, crisp
    </body>
</html>

出力結果：

【CSS】Transform＆Scale適用時も画質を維持する方法｜image-renderingプロパティの使い方

まとめ

image-renderingプロパティを活用すれば、CSSのTransform＆Scaleで画像サイズを変更しても、用途に応じた画質を保つことができます。写真など自然な画像には「smooth」、ドット絵には「pixelated」、輪郭をはっきりさせたい場合には「crisp-edges」を使い分けるのがおすすめです。

  1. CSSの2D変換関数（transform）とは？rotate・translate・scale・skewの使い方

    CSSの2D変換関数は、要素に対して回転・移動・拡大縮小・傾斜といった2次元の変換効果を適用するために使用されます。これらの関数を活用することで、JavaScriptなどに頼らずCSSだけで動きのあるデザインやアニメーション表現を手軽に実装できます。 主な2D変換関数の一覧 translate() － 要素をX軸・Y軸方向に移動させます。 scale() － 要素をX軸・Y軸方向に拡大または縮小します。 rotate() － 要素を指定した角度だけ回転させます。 skew() － 要素をX軸・Y軸方向に傾斜させます。 各関数の基本構文 translate(x, y)：指定した距離（px

  2. Word・Excel・PowerPointで保存しても画質が劣化しない設定方法

    ドキュメントを作成する際、高品質な画像を使用することは非常に重要です。読み手に内容を明確に伝えられるだけでなく、文書全体の印象も大きく向上します。しかし、画像を挿入するたびに画質が低下し、画像がぼやけたり、画像内の文字がにじんで見えたりした経験はありませんか?これはOfficeアプリケーションが自動的に画像を圧縮していることが原因です。この記事では、Word・Excel・PowerPointで保存した際の画像の劣化を防ぐ方法をご紹介します。 Word・Excel・PowerPointで保存時に画像品質を維持する方法 ドキュメントにメディアを追加すればするほどファイルサイズは大きくなります。そ