こんにちは、プロクラスの芦田です。
近年、ウェブサイトの閲覧数はPCからタブレットやスマホにボリュームゾーンが増えてきています。また、表示される画面サイズも大型化が進んでおり、5.5インチディスプレイで2560×1440pxもある機種もでています。
サイトの画像作りも上記のサイズを考慮して制作するのですが、実際にはスマホサイトの画像は原寸より大きな画像でないときれいに見えない場合もあり、PCサイトより大きな画像を用意することもよくあります。
画像サイズが大きい＝データが大きい（重い）
画像サイズを大きくすると必然的にデータサイズも大きくなってしまいますね。しかし、どんどん美しく重いデータをアップしてもネットワークがよくない環境のユーザーにはちゃんと見ていただけないかもしれません。そこで画像や動画のサイズを軽くしてくれるツールをご紹介します。
画像を軽くするツール
こちらのサイトはメインイメージに元画像と変更後のサンプル画像がマウスのスライドで左右比較表示されており、とてもわかりやすいです。
使い方は、アプリケーションを立ち上げるとこのようなインターフェースが立ち上がり圧縮したい画像をドラッグアンドドロップするだけです。圧縮率が真ん中の数字に表示されていますのでどれくらい軽くなるのか一目瞭然ですね。
肝心の圧縮サイズは画像によって差はありますが、手持ちの画像で試したところ1/4くらいになりました。元画像との比較でも遜色ない画質を保っていましたので品質はよさそうですね。
この画像は元サイズ６MBが1.48MBに圧縮できました。 ピクセルは5000px X 3400pxです。
動画を軽くするクラウドサービス
http://www.clipconverter.cc/jp/
ここのサイトは、mp4からwebMなどほとんどのフォーマットに対応しているクラウドサービスです。GIF動画にも変換できるのでスマホにも対応できそうです。ファイルをアップするサイズは100MBまでの制限がついていますが、背景用動画などできるだけ軽くしたいのでしたらかなり重宝します。
ちなみに90MBのMOVデータをmp4に変換した場合、3MB位にできました。詳細の設定で圧縮率も調整できますので何回か試して最適なサイズの動画を作れます。また、この様なクラウドサービスを利用した時に感じるネットワークのスピードが重くてつかいものにならないということも今のところ感じませんでした。
いかがでしたでしょうか。データを少しでも軽くして快適なサイト作りにお役立てください。また、プロクラスではWebデザイナーのためのWordPress講座を開催しています。ご興味がありましたらぜひご参加ください。
詳細はこちら。