HTML・CSS

画像を使わずテクスチャー表現！サイト高速化のすすめ【CSS・HTML・SVG】

2021/10/27

まずは下の2つの「大理石のテクスチャー画像」を比べてみてください

①

②

実は、①の画像はフリー画像であり、②はHTMLなどのコードで書かれたものです。

どちらも汎用的に使えそうなテクスチャー素材ですが、注目すべき点は上の画像は1.1MBのデータサイズなのに対して、コードで書かれた方はわずか4KBの容量という点です。

背景や装飾に使っているテクスチャー用の画像素材が重たくなってしまい、動きが重くなっているサイトをしばしば見かけます。

そのような場合、これらのテクスチャーをコードで代替することで、大きな軽量化が図れるのではないかと考えました。

もちろん、画像の方が細かい表現ができる場合も多いので、一概に軽量化すれば良いというわけではありません。

しかし、サイトの動きに影響が出るほど重たければユーザビリティを損ないますし、GoogleのSEO評価基準にもマイナスの影響がありそうです。

そこで、今回は「画像を使わずにコードだけでテクスチャの表現をしてみる」という企画です。

サイト運営やコンテンツの最適化に対して、選択肢を増やすことができたら幸いです。

大理石

まずは冒頭で紹介した大理石テクスチャーです。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

上のコードを見てみると、 HTMLの中に<svg>というタグを使っているのがわかります。

通常、〇〇.svgのような画像拡張子の形式で見かけることの多いSVGですが、実はSVGはHTMLのようなコードの記述で表現されているデータです。

そのため、HTMLデータの中にこのSVGタグを入れることで、CSSだけで表現するよりもテクスチャ表現が豊かになります。

IllustratorやPhotoshopといった画像編集ソフト以外でSVGを扱うことは少ないと思うので、簡単にSVGタグについて説明します。

–SVGタグについて–

最初のviewBox=”0 0 300 300″という部分は、座標と範囲の指定です。

[x軸座標、y軸座標、width、height]の順番です。

例の場合だと座標はデフォルトの中央値となり、サイズは300px×300pxということになります。

次のfilterというタグが、エフェクトの宣言をするようなタグです。

続くfeTurbulenceが実際のエフェクト内容をコントロールするタグになっていて、2つはセットで機能するようになっています。

基本的には、feTurbulenceの中にあるbaseFrequencyプロパティの値を操作していくことで、ノイズ粒子の細かさを決めて質感を表現していきます。

粒子の細かさを設定したら、白黒にするためにCSSでfilter: grayscale(100%)を指定します。

このあたりでかなり大理石に近づいてきます。

最後にbackground-colorの指定をカラーコードではなくrgbaの指定にして、灰色感の調整をすれば完成です。