ブログやWEBサイトを分かりやすく装飾するため画像の活用は必須ですが、
基本的に画像は容量が大きく、正しく使用しないとWebサイトが重くなる原因になります。
画像を軽くするために以下の手順を試してみてください。
JPG変換・リサイズにおすすめツール | iLoveIMG
おすすめの無料ツールをおすすめします。
このツールは完全無料で、JPG変換・サイズ変更・切り抜きなど
様々なことができてしまう超便利ツールです！
私はよく「画像サイズ変更」と「JPGに変換」の２つをよく使います。
操作もシンプルなので直感的にできるのも◎
PNGをJPGに変換
PNGとJPGの使い分けは以下のようにしています。
・それ以外はJPG
と決めています。
普通の写真であればJPGの方が軽くなりますので、PNGの重いデータはもれなくJPGに変換がおすすめです。
画像のサイズ変更
ホームページトップのスライダーなどに使うメイン画像を除けば
ほとんどの画像は小さく使われていることがほとんどです。
デジカメやiphoneで撮影した画像はそのままだと基本的に2000〜3000pxの横幅であることが多いですが、
そのサイズで表示されることはほとんどありませんので
サイト上で使う画像サイズの横幅はせいぜい700pxもあれば十分です。
※縦横比を変えて指定のサイズに切り抜きたい場合は「画像の切り抜き」を使用してください。
一括圧縮におすすめ | TinyPNG
先ほどのiLoveIMGでも圧縮はできるのですが、個人的におすすめなのがTinyPNGです。
20枚まで一気に圧縮が可能なので時短につながり、
しかも速いのにほとんど画像の綺麗さも保ちながら容量を60%以上カットしてくれるので
超優秀圧縮ツールです！
実際にやってみた
では今回は実際にカメラで撮影した画像でどれくらい軽くなるのか検証します。
今回は下記の画像を使います。
スペックは驚異の8.2MBです。画像サイズ4032(横)×3021(縦)。めちゃくちゃ大きいです。
それでは早速iLoveIMGを開いて画像のサイズ変更からやっていきましょう。
まずリサイズしたい画像を選択します。
右側のサイズ変更オプションで横幅を700pxに設定します。
高さは勝手に計算してくれるのでこのまま変更ボタンを押してリサイズされた画像をダウンロード。
次に圧縮をしていきます。TinyPNGを開きましょう。
パンダが待ち構えているので先ほどのダウンロードしてきた画像を放り込みます。
数秒で圧縮完了！「すべてダウンロード」ボタンを押して画像をダウンロードしましょう。
Before Afterがこちらです！
すごいですね！
元々8.2MBが250KBまで下がりました！およそ32分の1に圧縮成功です！
画像も荒れることなく綺麗な写真に仕上がっています。
まとめ
②メインの大きい画像でない限りは横幅700pxくらいを目安にリサイズする
③TinyPNGを使用し圧縮
