品質を落とさずに画像サイズを小さくする方法

画像素材はウェブ上では欠かせません。　ユーザーの関心を引きつけ、ホームページに限らずブログ投稿、バナー広告、Eメールまでもプロフェッショナルに見せることができます。　でもサイズが大きくて重い画像が、あなたのサイトに悪影響を与えてしまう場合もあります。　読み込みに時間がかかると、ユーザーはイライラし、検索エンジンのランキングにも悪影響を与えます。　

ファイルサイズの主な構成要素

一般的にファイルが大きいほど読み込みに時間がかかり、ファイルが小さいほど画質は低下します。

画像ファイルの読み込みに、時間がかかるのはなぜでしょうか？　主な理由は画像のファイルサイズです。　ファイルのサイズが大きいほど、Webページの処理量が多くなります。　次の3つの要素が、画像の全体的なファイルサイズに影響します。

· ピクセル寸法：高さと幅で画像を構成するピクセル数です。　画像サイズが大きいほど、画像はプロフェッショナルに見えますが、画像サイズは大きくなります。　写真のサイズが2000×1500ピクセルの場合、写真は美しくレンダリングされますが、貴重な領域を消費します。

· ファイルタイプ：ファイルタイプが異なると、ファイルの用途、ファイルに含まれる情報量、画像自体のレンダリング方法 (ビットマップまたはベクター形式) に基づいて、より多くの領域を使用します。　JPEG、PNG、SVG、GIFのいずれかを選択するには、Webに最適な画像形式に関する推奨事項をご覧ください。

· 画質：画像の元の画質を維持する場合、ファイルサイズは大きくなります。　画像を圧縮するには、画質を下げたり、画像の隠れた要素を削除したりしてファイルサイズを制限します。　Webの画像表示に影響を与える要因については、画像解像度に関する記事をご覧ください。

ページ速度とは？

ページ速度は、読み込み時間、またはブラウザーがページ上のすべてのコンテンツを、表示するのにかかる時間で測定します。

Webサイトのページに移動すると、ブラウザはそのページからバイト(例：KB、MB)と呼ばれる単位で、情報をダウンロードします。　画像やテキストからアニメーションやナビゲーションメニューまで、ページ上のすべてのものが、バイト単位で測定された一定量のディスク容量を消費します。　Webページを構成するために使用されるバイト数が多いほど、ページの読み込み時間が長くなるのは理にかなっています。

ページ速度を向上するには

画像サイズを変更すると、ページの最適化に役立ちます。

ページ速度を向上させる最も簡単で直接的な方法は、画像ファイルのサイズを小さくすることです。　この処理を画像圧縮と呼びます。　オンラインフォトエディタを使用して、誰でも画像ファイルのサイズを縮小できます。　デザインやHTMLコードに精通している必要はありません。

画像圧縮は画像ファイルのサイズを縮小して、使用する容量を少なくする処理です。　このプロセスは「画像サイズの変更」または「画像の最適化」と呼ばれることもあります。　画像サイズを変更すると、ページ速度に良い影響を与えるため特に重要です。

画像はウェブサイトにとって、最も重い構成要素である場合があります。　ウェブ用に画像サイズを最適化し、画像のバイト数を減らして読み込みを速くしましょう。

ページ速度の仕組みをより深く知りたいのであれば、リダイレクトの減少、ウェブフォントの使用、コメントや余分な容量のような不要なコードの最小化などをすることもできます。　でも画像圧縮のような効果は得られません。

ページ速度がSEOにとっても重要！

Webサイトのページ速度は、主に次の2つの理由から重要です。

1. 速いページ速度 = ユーザーエクスペリエンスの向上
読み込みに時間がかかるウェブサイトを、誰でも経験していると思います。　コンテンツが読み込まれる前に、ユーザーがサイトを離れてしまうのは避けたいですよね。　モバイルユーザーの53%は、3秒以内に読み込まれないとサイトを離れてしまいます。

逆に言えば、軽いサイトは素早く読み込まれるので、ユーザーは簡単にコンテンツを見ることができます。　ユーザーエクスペリエンスが高ければ高いほど、ユーザーはサイトにとどまり、より多くのコンテンツを読んだり、購入したりする可能性が高くなります。

2. 速いページ速度 = より良いGoogleランキング
Googleのアルゴリズムは、検索エンジンのページをランク付けする際にページ速度を考慮しています。　検索エンジンの検索結果で上位にランクされない場合、ページ速度も合わせて調べてみることをお勧めします。

ウェブ用に画像を最適化するには？

1. 正しいファイル形式を選ぶ

Web用に画像サイズを変更する前に、最適なファイル形式で画像を保存しているかを決定しましょう。　Webで広く利用されているファイル形式は3つあります。ウェブページに適したファイルタイプを選択し、サイズと品質のバランスをとりましょう。　

· JPEG – 写真、スクリーンショット、その他のほとんどの画像でJPEGを使用します。　JPEGは非可逆圧縮を使用しますので、これはファイルサイズを小さくするために、画像データを犠牲にすることを意味します。　ファイルサイズに対して最適な品質を得るために、品質設定をいろいろ試してみましょう。

· PNG – 曲線や線がJPEGよりもきれいにレンダリングされるため、シャープな幾何学的形状を含む画像には、PNGを使用しましょう。　PNGはロスレス圧縮を使用して、すべてのイメージデータを保持します。　ファイルサイズは他の形式よりも大きくなります。

· GIF – アニメーションにはGIFを使用しますが、静止画にはこの形式を使用しないようにしましょう。　GIF形式では、画像内でレンダリングされる色の数が制限されています。

詳しい画像サイズとファイル形式については、こちらの英文ブログ記事をご参照ください。　また、Shutterstockが提供する無料の画像リサイズツールもございます。

2. ピクセル数を減らす

画像サイズが目的の表示サイズになるように変更しましょう。

画像のピクセル数が少ないほど、ファイルサイズは小さくなりますが、すべての画像を、100 x 100ピクセルにリサイズすれば良いと言う訳ではありません。（画像が引き伸ばされ、画質が大幅に低下してしまいます。）

画像をウェブサイトにアップする場合は、画像がどのサイズで表示されるのかを確認し、その表示サイズになるように、画像のサイズを調整しましょう。　

ウェブ用画像・写真プリントの縦横比とサイズについては、こちらのブログ記事をご参照ください。

3. 画質を調整する

画像処理アプリケーションを使用して画像を保存する場合、多くの場合、画質を制御するスライダーが含まれています。　画質調整スライダーは、通常は1から100のスケール（100はオリジナルの最高品質）で表示され、画像の非可逆圧縮を制御します。

でも100%の画質で保存された画像と、60%の画質で保存された画像、30%程度の低画質で保存された画像でさえ、見た目の違いがわからない場合がほとんど。

一番違いが目立つ白の背景でも、解像度の低下を確認するのはかなり難しいことが多い反面、低解像度の画像ではバンディングが目立つ場合もあります。　ウェブで使う画像には高品質でファイルサイズが比較的小さい、中程度の画質が適しています。

ランディングページやホームページのように、画像を鮮明でクリアにしたいか、ブログ記事のように品質を犠牲にしてもよいかを判断し、画質を決めてください。

ウェブに最適な画像サイズ

ウェブ用の画像にはいくつかのガイドラインがあります。

画像サイズを変更するときに、目標とするファイルサイズはありますか？　マジックナンバーはありますか？　画像の最適なサイズは用途によって異なります。

· フル画像 – スクリーン全体をカバーする場合、ピクセル寸法は、2400 x 1600ピクセル程度を目安としてください。

· コンテンツ内画像 – スライドショーやギャラリー、アクションボタン、またはブログ内に配置する画像で、横長の場合、最大幅は1500ピクセル程度、縦長の場合は、1000ピクセル程度にリサイズしましょう。

ピクセル寸法はファイルサイズと正比例はしませんが、できるだけ１枚あたり500KB以下にしてください。ブログに複数の写真が含まれている場合は、それぞれがページサイズ全体に影響します。

それではページサイズは、どのくらいが妥当でしょうか？　2020年ページの平均的なサイズは2MBで、一部のブログなどそれ以上の場合もあります。　Googleでは、各ページを500KB以下に抑えることを推奨しています。

画像の圧縮ツール

画像サイズを変更する場合にはツールが必要です。　Adobe Photoshopのようにプロフェショナル向けのツールもありますが、Photoshopには高度なデザイナー向けのツールがたくさん入っていて、ウェブ用に画像の切り取り、サイズ変更、書き出しをするだけならオーバースペックかもしれません。　代わりに、ご紹介をする使いやすい画像圧縮ツールを試してみましょう。

オンラインツール

1. Kraken.io

一度に圧縮したい画像がたくさんあるなら、Kraken.ioがおすすめのツールです。　複数の画像を一度に最適化してzip形式でダウンロードしたり、1枚ずつ処理したりすることができます。

2. Shutterstock Editor

Shutterstock Editorは、様々なウェブサイトやソーシャルメディアの記事などを制作できる無料のデザインツールです。

Shutterstock Editorは、マーケティング資料やプレゼンテーションなどの、デザインを作成できる多くの機能に加えて、画像サイズを変更したりトリミングして、ファイルサイズを小さくすることができます。　画像をアップロードするか、Shutterstockコレクションからダウンロードしてください。　キャンバスのサイズを変更し、画像をダウンロードする準備ができたら、DPIと共にファイルサイズを選択しましょう。

3. TinyPNG

PNGを圧縮する必要がありますか？　TinyPNGを使えば、これ一つでPNGとJPEGの両方のファイルサイズを小さくして圧縮できます。　PNGは他の拡張子よりもファイルサイズが大きいので慎重に選択しましょう。　ロゴなどのシャープな幾何学的特徴を持つ画像用にも活用できます。

デスクトップアプリ

4. JPEGmini

JPEGminiを使うと、JPEGファイルのサイズをすばやく縮小できます。　画質スライダとプレビュー機能があり、圧縮する画像の見た目を事前に確認できます。

5. PNGGauntlet

PNGGauntletは、OptiPNG、PNGOUT、およびDeflOpt技術を使用して、品質を低下させることなくPNGファイルを最小化できます。

モバイルアプリ

6. Bulk Image Compressor

スマホでAndroidユーザーの方は、使いやすさの点でBulk Image Compressor以上のアプリはありません。　Bulk Image Compressorは大量の画像を一度に圧縮できます。

7. Photo Compress – Shrink Pics

iPhoneやiPadのユーザーは、Photo Compress–Shrink Picsを使って、画像のファイルサイズを簡単に減らすことができます。　追加ファイルのためのスペースを確保し、品質を犠牲にすることなく、Facebook、Instagram、Twitterなどで画像を共有するためにファイルサイズを最適化できます。

XWIN.JP十周年祝い

http://www.xwin.jp/
XWIN.JP十周年祝い、千万円のソフトウェアを全部無料大サービス？！ＣＤＫも貰える！
毎月上位50名の客にわ、1つのソフトを0円で獲得できます（自分で選ぶ可）
xwin.jpとは？
xwin.jpは主にソフトウェアの売買をしているサイトです、Windows、office、Adobe、Autodesk等
xwinでしか体験出来ないサービス、サイトをクリックすると色々分かると思います。