読者です 読者をやめる 読者になる 読者になる

vol.2 表示速度が激変 webサイトの高速化・最適化

f:id:BOEL:20160527163010j:plain

画像の高速化・最適化は早く美しく見せるだけではありません。

GoogleやYahooでも表示速度を重視しているように、検索エンジンからのトラフィックを増やすことにも繋がる大切な作業です。

近年のGoogleの検索アルゴリズムにWebページの読み込み(表示)速度が追加され、サイト高速化への注目は日々高まっています。

様々な表示最適化方法がありますが、今回は画像部分にフォーカスして説明します。

 

特性から画像の形式を選ぶ

f:id:BOEL:20150123222605j:plain

画像ファイル4つの形式

ファイル形式は、JPG・GIFPNG-8・PNG-24の4つです。

<JPG>

写真によく使われる形式で、圧縮したものを元の画質に戻すことはできませんが、

圧縮率が高くファイルサイズを抑えることができます。

GIF

広いベタ塗り部分と鮮明なディテール部分を含むイラストレーション、テキストなどに適した形式です。

また、アニメーション画像を書き出す場合は、GIFを使用する必要があります。

PNG-8>

あまり知られていませんがGIFと同等の形式で、GIFと同じ用途で使用します(アニメーションを除く)。

PNG-8の方がGIFに比べ圧縮率が高くサイズが10%から30%ほど小さくなります。

ただし単純なパターンと少ないカラーで構成された画像と比べると、GIFの方が小さい場合があります。

PNG-24>

JPGと同様に写真に適した形式です。

JPGより圧縮率が低く、JPGよりもサイズは大きくなります。

画像に透明部分が含まれている場合はPNG-24にします。

 

ファイル名に注意!

f:id:BOEL:20150123222708j:plain

画像の意味を説明する名前にしよう!

よく写真に「image1.jpg」のような、簡単な名前にしていることがあります。

しかし、ホームページに画像をアップロードして使用する場合、これらのファイル名は最適とは言えません。

説明的なファイル名を付けることは、写真を整理しやすくなるだけではありません。

検索エンジンは最適化を目的としてファイルを読み込むため、文字数が多くなりすぎない正確な名前をつける必要があります。

 

画像の最適化。ロスレス圧縮?

f:id:BOEL:20150123222717j:plain

画像の圧縮とその方法

画像を圧縮するWEBサービスを使用します。

画像の圧縮に「可逆圧縮」と「不可逆圧縮」という二つの方法があります。

可逆圧縮

ロスレス圧縮とも呼ばれ、圧縮前のデータと、圧縮・展開の処理を経たデータが完全に等しくなるデータ圧縮方法です。

対象:PNG,GIF,TIFF,PSD,TGA

非可逆圧縮

圧縮前のデータと、圧縮・展開を経たデータとが完全には一致しないデータ圧縮方法です。

 対象:JPG>

圧縮にはTinyPNGがオススメです。

PNGとJPG、2種類のファイルを最大1/4まで圧縮することができます。

またWindowsMacを選ばず使えることも魅力ですね。

そのほか、Compressor.ioもオススメです。 

どちらもドラッグ&ドロップするだけでOKです。

 

高速化できたか調べてみよう

f:id:BOEL:20150123222728j:plain

簡単に表示速度を計測できる

画像ファイルを右クリック。「情報を見る」でファイルサイズを確認しましょう。

格段にファイルサイズが小さくなっています。

案外WEBサイトは画像を読み込み速度を遅くしています。

ひとつひとつの画像最適化の積み重ねが、WEBサイトの高速化につながります。

ぜひためしてみてください。