ガジェットとアイディアで、一人暮らし男子の日常をワンランクアップさせるブログ

iPhone Xをもっと便利に使う >

「Web用に保存」だけじゃまだ足りない!さらに画像を軽量化する簡単な方法

 
img-compression
この記事を書いている人 - WRITER -
チャンダイ
大阪府出身、東京在住のグラフィックデザイナー兼、WEBディレクターです。 新しいモノを見つけること、また古いモノを大事に使うことが大好きです。 思いついたらすぐに試してみたくなる性分です笑 日常の様々なモノゴトを、ガジェット(便利な道具)とアイディアを使ってより良くすることが得意です。 一人暮らし男子の日常をワンランクアップさせる情報をご紹介していきます。
詳しいプロフィールはこちら

Photoshopの「Web用に保存」から、さらに半分以下に圧縮できるで!

チャンダイ

こんにちは、チャンダイです。

ブログに掲載する画像、圧縮していますか?

僕は画像編集に「Photoshop」を使っているので、画像を保存する際は「Web用に保存」を選択し、画像サイズを軽量化して保存しています。

でも、ちょっと待ってください。

実は画像サイズの軽量化、「Web用に保存」だけじゃまだまだ足りないんです。

今回はPhotoshopで「Web用に保存」した画像をさらに半分以下のサイズにできる簡単な方法をご紹介します。

まずは結論!

Photoshopで「Web用に保存」した後、無料の画像圧縮サービスを利用することで、画像を100KB以下に軽量化することができます。

それでは、くわしくご紹介しますね。

1ページあたりの目安サイズは?

一般的にスムーズなページ表示を実現するための目安サイズは1ページあたり3MB未満と言われています。

WEBページにおいて、もっとも容量を使うのが「画像」です。

最近のPCやスマホは高性能なので、3MBを超えてもそこまで表示が遅くなることはないかもしれませんが、表示速度の遅いページはユーザーの離脱の大きな原因になってしまうので、できるだけ軽量化しておきたいものです。

「Web用に保存」ではあまり圧縮されない?!

Photoshopの「Web用に保存」はExif情報を自動で削除してくれたり、カラーをRGB形式に変換してくれるなど、画像をネットに公開するための最適な状態で保存してくれますが、画像圧縮という点ではイマイチです。。

そこでぜひ活用していただきたいのが、無料で使えるオンライン画像圧縮サービスです。

オンライン画像圧縮サービスとは?

面倒な会員登録やアプリのダウンロードをせず、サイト上に圧縮したい画像をドラッグ&ドロップするだけで自動的に画像を圧縮してくれるサービスです。

最近のサービスは本当に高性能で、画質を保ったまま容量を半分以下に軽量化してくれます。

「jpg 圧縮」といったキーワードでネット検索すると、さまざまな圧縮サイトや比較紹介してくれているブログなどがヒットします。

今回は僕がこのブログに掲載する画像でも使っているOptimizillaをご紹介します。

「Optimizilla」その実力やいかに!

img-compression01

非常にシンプルなサイトです笑

でも、だからこそ「このサイトでなにができるのか」がとてもわかりやすいです。

利用方法は超簡単!

「ファイルをここにドラッグ&ドロップして下さい。」の部分に圧縮したい画像をドラッグ&ドロップするだけです。

実際に試してみた

img-compression02

6000px
4000px
解像度300dpi
画像容量8.6MB

※上の画像は掲載用にサイズダウンしています。

僕がこの前撮影した富士山の写真です。

すごく良い写真ですねー笑

デジタル一眼レフで撮りました。

これをまずはPhotoshopの「Web用に保存」を利用してブログ用のサイズに書き出します。

img-compression03

700px
500px
解像度72dpi
画像容量229KB

この時点でもかなり圧縮できていますね。

でも、まだまだこんなもんじゃありませんよ!

この写真をさらに「Optimizilla」で圧縮します。

img-compression04

ここに画像をドラッグ&ドロップします。

自動で圧縮されました。

圧縮率は脅威の「-79%」!?

圧縮後の容量はなんと49KBです。

img-compression05

700px
500px
解像度72dpi
画像容量49KB

※上の画像には文字を載せているので実際は55KBあります。
文字がない状態で圧縮すると49KBになりました。

もちろん、画質もぱっと見ほとんど変わりません。

たったひと手間加えるだけで、Photoshopの「Web用に保存」からさらに1/4以下にサイズダウンできました。

img-compression06

「Optimizilla」はさらに圧縮率を手動で変更することもできます。

「クオリティ」欄の数値を変更することで、圧縮後の画質を確認しながらさらに容量を軽くすることもできます。

ただ、自動圧縮で十分軽くなるので、それ以上手動で変更する必要はないんじゃないかなと僕は思います。1枚1枚手動で変更するのは面倒くさいしね!

「Optimizilla」のおすすめポイント
  • 他のサービスと比べても圧縮率が高い
  • ドラッグ&ドロップの簡単操作
  • 会員登録やアプリダウンロードといった面倒くさいこと必要なし
  • jpgpngファイルが両方同一ページで圧縮可能
  • 画像に合わせて画質が劣化しない最適な圧縮率を見分けてくれる
  • 圧縮後の画質をオンライン上で確認できる
  • 1度に20枚まで同時圧縮可能
  • さらに圧縮率を手動で変更可能

まとめ

今回は画像を圧縮する簡単な方法をご紹介しました。

Webサイトは容量が軽ければ軽いほど、表示速度が高速化されます。

表示速度そのものがSEO対策としても効果的で、検索上位へのヒットに大きく貢献してくれるので、画像の圧縮は必ずするようにしましょう。

ほんのひと手間加えるだけで、画質を変えずに驚くほどサイズダウンしてくれるので、使わない手はないですね!

この記事を書いている人 - WRITER -
チャンダイ
大阪府出身、東京在住のグラフィックデザイナー兼、WEBディレクターです。 新しいモノを見つけること、また古いモノを大事に使うことが大好きです。 思いついたらすぐに試してみたくなる性分です笑 日常の様々なモノゴトを、ガジェット(便利な道具)とアイディアを使ってより良くすることが得意です。 一人暮らし男子の日常をワンランクアップさせる情報をご紹介していきます。
詳しいプロフィールはこちら

コメントを残す

Copyright© コシって大事。 , 2017 All Rights Reserved.