ブログ記事アップの際の画像の形式で気を付けること

記事

デザイン・イラスト

ブログに記事を投稿する際、画像も合わせてアップすることがあると思います。

ただ、スマホなどフルサイズで撮影した画像をそのままアップすると、ファイルサイズが大きすぎてページ表示に影響が出たり、サーバ容量を無駄に消費したりします。

掲載するページの幅や使用するレイアウトに合ったサイズに縮小したり、画像の内容に合ったファイル形式に変換し、またさらには軽量化のための圧縮をすることが大切です。

1. 画像形式の選択

JPEGは写真やカラフルな画像に適しています。

圧縮率を調整できるため、高品質な画像を比較的小さなファイルサイズで保存できます。

ただし、圧縮の過程で一部の情報が失われることがあり、透明な背景を持つ画像には向いていません。

PNGは透明な背景を持つ画像や図形、テキストなどのロゴに適しています。高品質を維持しながら圧縮が可能で、透明度の情報を保持します。ただし、JPEGに比べてファイルサイズが大きくなることがあります。

WebPはGoogleが開発した新しい形式で、JPEGとPNGの長所を組み合わせたものです。

高い圧縮率と高品質を持ち、透明度もサポートしています。ただし、一部の古いブラウザでは対応していないことがあります。

画像軽量化は、ページの読み込み速度を向上させるために重要です。

以下は無料で利用できる画像軽量化ツールの一部です。ここではリンクが張れませんので検索してみてください。

TinyPNGはPNGおよびJPEG画像を効果的に圧縮するツールです。高品質なままファイルサイズを削減し、ウェブサイトの読み込み速度を向上させます。

b. Compressor.io

Compressor.ioはJPEG、PNG、GIF、SVG形式の画像を最適なサイズに圧縮します。直感的なインターフェースで簡単に使用できます。

SquooshはGoogleが提供するツールで、さまざまな画像形式をオプティマイズできます。

リアルタイムで画像を比較しながら効果的な圧縮を行えます。

まとめ

ウェブサイトのパフォーマンスを向上させるために、適切な画像形式の選択と軽量化は欠かせません。

JPEG、PNG、WebPの違いを理解し、画像の種類に応じて最適な形式を選択しましょう。

また、無料の軽量化ツールを活用して、高品質なままファイルサイズを最小限に抑えることで、ユーザーエクスペリエンスを向上させることができます。

私がホームぺージを制作するときは画像の種類に応じてjpg、pngなどで書き出した後、更にwebpに変換して圧縮します。

画質をきれいに保ったままかなりファイルサイズを小さく圧縮できるのでお勧めです。