Webサイトの制作には、「良いデザインにする」という見た目以外にも考えなければならないことが沢山あります。
その中の1つが「ページの表示速度を速くする」ということです。
ページの表示速度が遅ければサイトの離脱率が高くなるので、せっかくデザインが良いサイトでも見られなければ制作した意味がありませんよね。
表示速度を速くする大きな要因にページで使用している画像のデータサイズが関係しています。
画像のデータサイズが小さければ小さいほど表示速度が速くなるので可能な限り小さくする方が良いのです。
そんな時に「Shrink Me」という画像圧縮Webサービスが便利なのでご紹介したいと思います。
画像圧縮Webサービス「Shrink Me」とは？
画像の縦横サイズとクオリティーはそのままでデータサイズだけ圧縮してくれるWebサービス。
ソフトではなくブラウザで動くのでMacとWindows両方で使えますし料金も無料なのが特徴です。
ちなみに4つの画像ファイルに対応しています。
- JPG
- PNG
- WEBP
- SVG
Photoshopで画像圧縮するのは駄目なの？
Web制作をする人はPhotoshopを購入している人が多いと思います。
Photoshopでも画像圧縮は可能ですが、Photoshopで画像圧縮するには下記のどちらからを選択しなければなりません。
- 画像の縦横サイズが小さくなる
- 画像のクオリティー（画質）が下がる
その点「Shrink Me」を使えば「縦横サイズ」と「クオリティー」はそのままでデータサイズだけ小さく出来ますし、いちいちソフトを立ち上げなくて済むのでスムーズに画像圧縮が可能です。
「Shrink Me」で画像圧縮の方法
「Shrink Me」で画像を圧縮する方法を説明します。
まずはコチラから「Shrink Me」のサイトを開きます。
「Select」をクリックして画像を選択するか、点線の枠内に画像をドラッグ&ドロップで放り込んで下さい。
ほぼ一瞬で画像が圧縮されます。
元画像は2.3MBでしたが-81%（530KB）まで圧縮されました。
圧縮後の画像は「SAVE」をクリックでダウンロード可能です。
このようにデータサイズだけ圧縮されて縦横のサイズは同じです。
また、元画像と圧縮後の画質を比較しても画質の違いは全く分かりません。
試しにPhotoshopで縦横サイズ6016px✕4016px・2.3MBの元画像を530KBまでデータサイズ小さくてみましょう。
※画像の数値が小さく見にくくてすいません。
縦横サイズはそのままの場合、画質を34%まで落とすことでやっと534.4KBになりました。
画質はそのままの場合、縦横サイズ1700px✕4016pxまで落とすことでやっと522.9KBになりました。
このように縦横サイズと画質はそのままでデータサイズだけ小さく出来るのが「Shrink Me」をオススメしたい理由なんです。
「Shrink Me」で圧縮した画像と元画像の比較
続いてテイストの違う複数の画像で圧縮した画像と元画像を比較してみましょう。
どの画像を見てもクオリティーが下がったとは感じないと思います。
「Shrink Me」で圧縮した画像を再度圧縮するとどうなるか？
試しに圧縮した画像を再度圧縮してみました。
すると、、、サイズは変わりませんでした。笑
まとめ
画像の圧縮にとても便利な「Shrink Me」のご紹介でした。
Web制作を行っている人は是非使ってみて下さいね。
ちなみに動画データを圧縮してくれる「VideoSmaller」というWebサービスもあります。
参考までに。
MP4・AVI・MPEG・MOVなどの動画データをブラウザでサイズ圧縮してくれるオンラインサービス「VideoSmaller」
関連記事：
・コーディングが苦手なwebデザイナーに朗報！？コーディングなしでwebサイト制作が可能な次世代web制作ツール「STUDIO」
・【脱初級webデザイナー】基本的なコーディングが出来るようになった次に習得したいweb制作スキルについて
LINE@で質問や相談、お仕事の依頼などを受け付けております。
- お仕事の依頼をしたい。
- 記事の内容をもっと詳しく知りたい。
- デザイナーやフリーランスの働き方について聞きたい。
コメントを残す