Webサービス

画像はWordPressにアップする前に圧縮して軽量化する!「TinyPNG」の使い方

PNG・JPEG画像圧縮 Win/Mac対応

こんにちは!ホームページ運営コンサルタントの吉田です。

本日は、ホームページ運営には欠かせない画像の圧縮についてご紹介します。
PNG画像とJPEG/JPG画像、両方を圧縮することが可能です。
もちろん、Windows/Mac両方で利用ができます。

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

PNG画像・JPEG/JPG画像を圧縮するには、「TInyPNG」というサイトを利用します。
サイト名には、PNGと入っていますがもちろんJPGE/JPG画像も圧縮可能です。

TinyPNGのサイトへアクセスしよう

TInyPNG」サイトへは、以下のリンクからアクセスしてみましょう。

PNG・JPEG/JPG画像圧縮サイト TinyPNG

アクセスすると、笹を笹を頬張るかわい…かわいいかな?!
と微妙なラインをいくパンダが待っています。

そして、そのパンダの隣に「Drop your .png or .jpg files here! Up to 20 images, max 5 MB each.」と書いてあります。

大体書いてあることは、伝わりますがGoogle翻訳の出番です!
「ここにあなたの.pngや.jpgファイルをドロップ!最大20枚、最大5メガバイトごとに。」

  • 圧縮できるファイル形式:png、jpg
  • 最大ファイル数:20枚まで(1回につき)
  • 最大ファイル容量:5MB(1枚につき)

もし、5MB以上のファイルをドラッグ&ドロップすると以下の様なエラーが表示されます。

5MB以上のファイルをドラッグ&ドロップすると以下の様なエラー

PNG画像を圧縮する方法

PNG画像・JPEG/JPG画像を圧縮するには、2つの方法があります。
点線で囲んである真ん中部分に

  1. 画像をドラッグ&ドロップする
  2. クリックして、画像ファイルを選択する
PNG・JPEG/JPG画像の圧縮方法は、ドロップ&ドラッグ

画像の圧縮率は???

今回は、実際に作成したLPの確認用画像で試してみました。

  • 画像の大きさ:ヨコ1600px × タテ11040px
  • サイズ容量:2.6MB

さて、どのぐらい圧縮されるんでしょうか?!…

PNG画像の圧縮率は?

なんと、2.6MB → 749.3KB まで圧縮できました!!!
圧縮率「72%」

パンダすげーーー!!!(笑)

けど、人の画像を圧縮させる前に、自分が痩せた方がいいんじゃない?少しメタボだよね?と心の中で突っ込みつつ…

自分の体重で考えると、
78kg(記事公開時) → 29.64kg
までダイエットしたことになります!!!

いや、これはありえないですが…^^;
体重だと凄さがわかるかと思います!病的にガリガリになります(笑)

圧縮画像の保存方法

圧縮画像の保存方法は、3種類あります。

TinyPNGでの圧縮画像の保存方法
  1. ファイル名ヨコの《Download》:通常の保存(一枚ずつ)
  2. 《Save to Dropbox》:Dropboxへの保存(保存するファイルを選択する場合は、Dropbox画面が開いたらファイル名のヨコ「✕」で削除します)
  3. 《Download all》:zip形式で一括保存できます

まとめ

閲覧者が快適にアクセスできるように、ホームページの表示速度を上げるために、画像ファイルは最大限圧縮しファイルサイズを小さくしたいですね。

冒頭でもお伝えしましたが「TinyPNG」は、Mac/WIndows関係なくブラウザ上で利用ができるので、ぜひ活用してみてください。

この記事が役に立ったら
▼いいね!しよう▼

Twitter で
ABOUT ME
吉田ユタカ
長崎県長崎市在住。「子育て」と「仕事」を両立させるために、オンラインで《Webコンサル》と《Web講座》たまに《Web制作》までしています。2006年8月から一人で仕事をしています。主に引きこもっての作業ばかりです。 Mac、効率化、ゲームが大好きです。今(180806up)は、Switchの「スプラトゥーン2」PS4版「フォートナイト」を楽しんでいます。残念ながら息子の方が上手いという腕前です。ゲーム配信もしようと思っています! ⇒ 詳しいプロフィールはコチラより
【無料講座】WordPressでブログ型ホームページの立ち上げ講座
講座は「専用の会員サイト」で学習

講座専用の会員サイト

無料講座受講までの流れ

  1. 以下のフォームを入力して《確認》ボタンをクリックしてください。
  2. 登録内容の確認画面が表示されたら《登録》の青いボタンをクリックしてください。
  3. すぐに自動返信メールが届き、メール内に「講座会員専用サイトへのログインURL・ID・パスワード」が記載されています。
  4. 会員専用サイトへログインして受講開始です。

特典については、5日目のメールにてダウンロード情報をお知らせさせて頂きます。

なお、本講座を受講いただいた方には別途不定期で、有料オンライン講座について等の情報を掲載したメールマガジンが配信されます。予めご了承ください。(登録解除はいつでも可能です。)

WordPressの立ち上げには、別途ドメイン代、レンタルサーバー代、テーマについて「無料」「有料」自由に選択されてください。

無料講座への登録フォーム

 

COMMENT

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

CAPTCHA