WEB制作さて私のcssの本気を見せるかby梶村

さて。。と。

これからとんでもないcssを書こうと思っています。
Reezote代表取締役梶村です。

みなさん、
私の画像見えますか？

見えますね。

もう私の書いているcssが見えてると思います。

なぜなら、皆さんが見てる私の画像

よく見ると

画像ではありません。base64でエンコードしたCSSです。

CSS内で Base64エンコードして直接埋め込んでいるものです。

1. Base64エンコードとは？

Base64エンコードは、バイナリデータ（この場合は画像ファイルのデータ）を、ASCII文字列に変換するエンコーディング方式です。このエンコードによって、画像データを文字列として直接HTMLやCSS内に埋め込むことができます。

2. CSSに埋め込む理由

画像ファイルを直接参照する代わりに、Base64エンコードされた画像データをCSS内に埋め込むことには、いくつかの利点と欠点があります。

利点:

• 外部リクエストを削減: 画像ファイルを別にホスティングする必要がなくなり、HTTPリクエストの数が減るため、特定のシナリオではパフォーマンスが向上する場合があります。
• 簡易なデプロイ: 外部ファイルを使わないため、HTMLやCSSと一緒に自己完結したコンテンツになります。

欠点:

• ファイルサイズの増加: Base64エンコードされた画像は元の画像よりも約33%大きくなるため、CSSファイル全体が大きくなり、ページの読み込みに影響を与える可能性があります。
• キャッシュの効率低下: 外部画像ファイルを使う場合はブラウザが個別にキャッシュできますが、Base64エンコードされた画像はCSSと一体化しているため、CSSが更新されるとキャッシュがリセットされます。

3. Base64エンコードの使用例

例えば、画像をBase64でエンコードしてCSSに埋め込むと、以下のようになります。

.your-class {
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAA2ADYAAD...");
}

このコードで画像はbackground-imageプロパティを通して表示されますが、
画像ファイルをサーバーに置かずに直接CSS内に埋め込んでいる状態です。
画像ファイルをサーバーに置かずに直接CSS内に埋め込んでいる状態です。
画像ファイルをサーバーに置かずに直接CSS内に埋め込んでいる状態です。
画像ファイルをサーバーに置かずに直接CSS内に埋め込んでいる状態です。

強いですよね。

したがって、この形式はCSS自体をエンコードしているのではなく、画像データをBase64でエンコードして、CSSのbackground-imageプロパティに直接埋め込んでいるのです。

このような技術もあるんです。何の役にも立ちません。