Infoma!!
情報系大学生が最強のオサレプログラマを目指す
ブログ

【超使える】画像圧縮でサイトを爆速にするオススメサービス4選!!【無料】

【超使える】画像圧縮でサイトを爆速にするオススメサービス4選!!【無料】

こんにちは、mochi(@osaremochi)です!

本日もオサレプログラマを目指して精進しております(´ー`)

突然ですが、皆さんはブログに使う画像ってどうしてますか?ブログをわかりやすく、親しみやすくするためには、綺麗な画像って欠かせません

どんな画像を使えばいいのってかたはこちらの記事をどうぞ!!

【初心者向け】超カッコいいアイキャッチ画像を無料で作る!【超簡単】
【初心者向け】超カッコいいアイキャッチ画像を無料で作る!【超簡単】こんにちは、mochi(@osaremochi)です! みなさんはアイキャッチ画像を選ぶときどうしていますか?アイキャッチ画像はブ...

やっぱり、文字だけのサイトよりも「画像を適度に使っているサイト」のほうが文字が目立って読みやすく、創造力を補助することで理解を深めてくれるものです。

実際SEO的にも、離脱率に非常に影響してきます。ブログを閲覧してくれている人は、案外軽い要因(インターフェースが悪い、表示速度が遅い、デザインがみにくい)などで離れてしまうものですからね。自分に置き換えて考えてみましょう(´ー`)

例示画像

ただ、画像を使う上で非常に大きな問題があります。それは画像のファイルサイズです。読み込む画像の量が多かったり、ファイルサイズが大きすぎたりすると、サイト全体の読み込みを遅延させてしまう原因になってしまいます!!

ちなみに、1つ上の画像のファイルサイズは740KBです。画質良すぎィ!

上の画像は例として入れたのですが、さすがにスーツの「目」までわかるくらいの画質はやりすぎですね…

しかし、サイトの雰囲気を向上させ、よりリッチに仕上げるためには、どうしても高画質の画像が必要になって来ます。

特にポートレートサイトや、グラフィックが重要視されるような記事を書くときには、上記のようなファイルサイズの画像を複数枚使うことになりますからね。そうなると、1記事が動画5分くらいのサイズになってしまったり…

そういったときに使えるのが画像圧縮や画像最適化のサービスです!!

では早速行ってみましょう!(´ー`)

TinyPNG

めちゃくちゃ有名なオンライン画像圧縮サービスです!アプリをダウンロードしなくても使えるのが非常に便利ですね(´ー`)

キモカワパンダのニヒルな笑みが素敵です卍卍

PNGと書いてありますがJPEG形式にも対応しているのでご安心ください。

このサイトではPNGおよびJEPGのファイルを、元の画像の色数から256色に減らすことでデータの圧縮を行います。

えっ…減色…??色味が減ってしまうのは不安…という方!
とりあえずクオリティを見てみてください(´ー`)例示画像4MB(元画像のファイルサイズ) ↑

例示画像1.4MB ↑

どうでしょう…違いはおわかりでしょうか?

人間の目にはかなり分かりづらい違いなので、サイト運営に支障はないと思います!!私にもわかりません!!

ちなみにこちら、圧縮をかけただけで画像サイズを65%ほど減らせました(‘ω’)ノ

元の画像が巨大なのもあると思いますが、人間にわからない範囲でこれだけ削減できるのは素晴らしいです。

wordpressやブログサービスに画像を投稿する前に、このサイトでまとめて圧縮をかけるだけなので、すごく簡単です!さらに透過画像はそのまま透過画像として圧縮できるのも素晴らしいですね(‘Д’)

5MB以下のファイルであれば20個まで一気に突っ込むことができるので、ちまちましてなくて最高です(´ー`)

逆に20個より多くは一気にできないので、何回かに分けて画像を投げてみてください。また、5MBより大きい画像はほかのサービスで圧縮をかけてから、TinyPNGに投げてみてくださいね。

手軽・簡単・最高!!

Optimizilla

こちらのサイトも画像の圧縮をまとめて簡単に行えるサイトです!

TinyPNGと違う点は、自分で画質の圧縮具合を変更できる点です(´ー`)

かなりサイズの大きい画像の時は、こちらのサイトで微調整をして画像を投稿するといいと思います。

例示画像400KB ↑

こちらの画像は、元の画像サイズから90%ほど削減した画像です!まだまだ違いは分かりにくいですね(´ー`)

中心少し左の湖の反射の色合いが少し変わってしまっているので、その点が気になりやすいかもしれません。ここまで変化させたくない場合は、画質をもう少し高めに設定して圧縮をかけてくださいね。

例示画像250KB ↑

この画像は、上のTinyPNGOptimizillaの両方で圧縮をかけた画像になります。これで画像圧縮率96%です!!かなり軽量になりましたね(´ー`)

しかし、湖や女性の座る岩石に赤や紫といった色味が入ってしまっています。軽量化の代償ですので、いったん圧縮してご自分で確認することをオススメします。

超優秀だけど圧縮のし過ぎには注意!!

JPEGmini

こちらのサイトでも同様にファイルの圧縮を行うことができます!

また、アプリケーションとしてダウンロードすることでローカル環境で画像の圧縮を行うことができます(‘Д’)(無料枠は200枚限定のトライアル版になります。それ以上は有料です。)

例示画像3MB ↑

色味の変化は気になりますでしょうか?

個人的には、圧縮率の自由度や、手軽さという面で上記2つのTinyPNGやOptimizillaよりは使いづらい感じがします…(‘Д’)

また、このサイトではJPEG形式しか扱えないので使用するときはご注意ください!

使い分けを適切に!

ImageResize.org

前回の記事から引き続き登場です!

アイキャッチ画像を作れるサービスを紹介してるのでこちらもどうぞ(´ー`)

【初心者向け】超カッコいいアイキャッチ画像を無料で作る!【超簡単】
【初心者向け】超カッコいいアイキャッチ画像を無料で作る!【超簡単】こんにちは、mochi(@osaremochi)です! みなさんはアイキャッチ画像を選ぶときどうしていますか?アイキャッチ画像はブ...

こちらのサイト、画像のリサイズだけでなくて、じつは圧縮も行うことができます(´◉◞౪◟◉)

スクリーンショット

上記の画像の、「Image Size」の数字を大きくしていくことで、画像自体のサイズ(縦横のピクセル数)を変更することができます!

 

スクリーンショット

また、「Optimize Your Image」の項目の下に行くほど、画質を抑えてファイルサイズを小さくすることができます。

例示画像142KB

こちらは「Image Size」「75% smaller」に、「Optimize Your Image」「Average Image Quality」にした画像です

元の画像からすると97%ほど削減することに成功しました!その分 1単位面積あたりのピクセル数が減ってしまっているので、画像のディティールが分かりづらく、ノイジーになっています。

どの程度の圧縮具合を選ぶかは、そのサイトや記事がどういったことを狙っているのかによりますね(´ー`)

サイトにとって最適な圧縮をしよう!!

 

まとめ

いかがでしたでしょうか!

今回は特に自分がおすすめのサービスしか紹介していません!笑

もしアイキャッチ画像やサイトデザインなどで大きな画像やたくさんの画像を使う必要があるときは、ぜひ上記のサービスで自分好みの画質にしてみてくださいね(´ー`)

効果的に画像を使用して、わかりやすくて楽しい爆速なサイトを目指していきましょう!!

【初心者が20万越え!?】大学生でもBlog Hacksで稼げる!【必見】
【初心者が20万越え!?】大学生でもBlog Hacksで稼げる!【必見】こんにちは、mochi(@osaremochi)です! 突然ですが皆さん お金は足りていますか? 私は学費と交通費を自...
Blog Hacks

現在”ガチで稼ぎたい人しか受けてはいけないブログ講座 Blog Hacks”を受講中です!ブログの作り方や戦略だけでなく、Webマーケティングライティング心理学まで幅広い知識と、細かな記事添削、アドバイスが受けられます(´ー`)

私がたったの1記事で約5万円の収益をあげためちゃくちゃ凄い講座です!!興味のある方はレビュー記事を書いてますので、こちらの体験記事か、公式ページをどうぞ!!

【初心者が20万越え!?】大学生でもBlog Hacksで稼げる!【必見】

Blog Hacks公式ページ