ツール

【初心者のサイト改善】画像サイズや容量を圧縮するtinypngの使い方を解説

過去の自分
過去の自分
なんだか最近サイト(ブログ)の読み込みが遅い気がする

そんな風に感じたことはありませんか?

いろんな原因はありますが、初心者でもカンタンに無料でページ表示を速く改善する方法があります。

それは「画像のサイズ・容量を圧縮する(減らす)」ことです。

専門知識など必要ありません。やることは「ドラッグ&ドロップ」だけ!

そこでこの記事では、サイト(ブログ)の読み込みやページの表示速度を改善するために使える、画像サイズ圧縮サービス「tinypng」の使い方を解説します。

画像サイズを圧縮する「tinypng」の使い方

パンダが目印の「tinypng」へアクセスします。

画像圧縮サービス「tinypng」へアクセスする

容量やサイズを圧縮したい画像ファイルを選んで、ドラッグ&ドロップ!

画像圧縮サービス「tinypng」へドラッグANDドロップする

自動で画像の圧縮が始まります。完了すると、「download」ボタンが表示されます。

画像圧縮サービス「tinypng」でサイズ容量が大幅に減る

「download」ボタンをクリックして、圧縮・容量を削減した画像をダウンロードします。

画像圧縮サービス「tinypng」からダウンロードする

以上です。この作業だけで画像のサイズ・容量を大幅に減らせます。

ちなみに今回の画像は「534.8KB」から、「187.4KB」へサイズダウン!

約65%の画像容量を削減できました。

圧縮したい画像枚数が多いときは一括アップロード&ダウンロードでスピーディーに!

過去の自分
過去の自分
圧縮したい画像がたくさんあるから、できたら一括でダウンロードしたいな〜

そんな時でも大丈夫。「tinypng」なら一括でアップロード&ダウンロードができます。

tinypng」へアクセスします。

画像圧縮サービス「tinypng」へアクセスする

「shiftキー」を押したまま、圧縮したい画像を選択して、ドラッグ&ドロップで放り込むだけ!

tinypngへの一括アップロードのやり方

それぞれの画像の圧縮が終わったら、「Download all」のボタンを押します。

tinypngから一括ダウンロードのやり方

すると「tinified.zip」というファイルがダウンロードされます。このzipファイルを解凍します。

tinufied.zip

解凍したファイルの中に、先ほど一括でアップロードしたデータが入っています。
tinypngで圧縮してダウンロードしたzipファイルの中身

この手順でやれば、一括で画像の容量を削減できます。

tinypngで画像を圧縮すると、ガビガビにならないのか?

画像サイズを圧縮したり、容量を減らすとなると、気になるのは「画像の劣化」ですよね。

サイズを圧縮しても、画像がガビガビになり見栄えが悪くなってしまっては本末転倒です。

ですが、tinypngならパッと見てほぼ画像の劣化がわかりません。

画像のBefore/Afterを比較

今回のアップロードで使った画像のBefore(圧縮前)とAfter(圧縮後)を、ぜひ見比べて見てください。

before_after_全体 before_after_部分

全く劣化しないわけじゃありません。

多少劣化はしますけど、よっぽどドアップにして、じっくり見ない限りわかりません。

3種類の拡張子に対応!「JPG・JPEG・PNG」

tinypngで圧縮できる画像にはルールがあります。

それは「ファイル名.●●●」の「●」部分(拡張子)が、以下の3つのどれかであること。

対応している拡張子
  • JPEG(jpeg)
  • JPG(jpg)
  • PNG(png)

そのため、GIF(gif)は画像サイズを圧縮できません。

1枚最大5MBまで!一気に20枚の画像サイズを圧縮!

tinypngは1枚当たり最大5MBの容量までなら、一気に20枚までアップロードできます。

条件を満たしているのに、なぜかたまにアップロードに失敗することがあります。

失敗した場合は、再度アップロードし直す、もしくはページを再読み込みして、もう一度アップロードしてみてください。

訪問者へ思いやりを!初心者は画像サイズを圧縮するクセをつけよう

初心者でやりがちなのは高解像度・高容量の画像を、そのままアップしてしまうことです。

昔、美容師さんのワードプレスを管理していて、ブログのページ表示にすごく時間がかかるという問題がありました。

原因はなんと「画像のサイズ」。

3〜5MBの容量が大きい画像を、そのままアップロードしていたからでした。

最近の

  • 一眼レフ
  • デジカメ
  • スマホ

などで撮影した画像はとても綺麗ですがサイズも大きいため、そのままアップロードするのはオススメできません。

なぜなら画像サイズが大きすぎると、ページの読み込み速度が遅くなってしまう可能性が高くなります。

画像の容量・サイズが大きいと、読者の方の通信量への負担にもなってしまいます。

商品画像を大量に扱うECサイトなんかは注意が必要ですね。

サイトを訪問してくれた読者さんが快適に過ごせるよう、気くばり・心くばりの一環として、必ず「画像容量・サイズの圧縮」をやるクセをつけましょう!

まとめ

今回ご紹介した「tinypng」なら、初心者の方でも簡単に画像の容量やサイズを圧縮できます。

画像サイズ・容量を圧縮すると、ページの表示にかかる時間を速くできて、訪問者へのストレスも軽減できます。

デメリットはありません。

  • ブログのページ読み込み速度を速くしたい
  • 記事内で使っている画像やアイキャッチの容量を減らしたい
  • サイト内の画像表示を速くしたい

そんな風に思ったときは、ぜひご活用ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です