WordPress

【ワードプレス高速化】画像をアップロードする前に必ずやること

もりのゆか

こんにちは@moriyuka317 もりのです^^

今日は、

  • ワードプレスを始めたばかり
  • サイトが重い(遅い)
  • 画像・写真をよく使う

こんな方に向けて↓↓

画像アップロード時に必ずやっておいた方がいいこと

をお伝えしていきます。

TinyPNGの使い方

作成した画像を圧縮する

私はワードプレスを始めたばかりの頃、そもそも画像に「重い」だの「軽い」だのあること自体知らなかったため、、

作った画像や、ダウンロードした写真をそのままワードプレスにアップロードしていました(汗)

「あ、自分そうかも」

という人はぜひ最後まで読んでみてくださいね!

実は画像には「○○バイト」という重さを表す単位があり、そのまま軽量化せずにアップロードしてしまうと

  • 読み込む速度が遅くなる
  • 容量がすぐにいっぱいになってしまう

というデメリットが生じてくるんです。

もりのゆか

サイトの速度は離脱率にも影響があります。

直帰率と離脱率
【Googleアナリティクス】直帰率と離脱率の違いとは?Googleアナリティクスでの直帰率と離脱率の違いって?について初心者にもわかりやすく解説!直帰率・離脱率の違いがわかるとブログの改善点が明確になります。...

つまり、

圧縮する前の横綱並みに重い画像をアップするより、

一旦スリムにしてあげた画像をアップロードした方がサイト的にもいいよね!

ってことです。

私は普段canvaという画像作成アプリを活用しているのですが、今日はそのサイトで作った画像をもとに、

実際どのような手順で圧縮、ダウンロードをしているのかをご紹介していきます。

画像圧縮サイト「TinyPNG」

まずは今日ご紹介する画像圧縮サイトが「Tiny PNG」です。

パンダが目印ですね^^
まずはこちらのサイトにアクセスしましょう!

もりのゆか

私はこのサイトを毎日のように使っているのでブックマークしています!

画像PNG・JPG)を圧縮する方法

続いて、「Tiny PNG」を活用して、画像を圧縮する方法をご紹介します。

やり方はとても簡単で、このサイトに
圧縮したい画像をドラッグ&ドロップするだけ!

試しに下記のアイキャッチ画像を圧縮してみます。

圧縮したい画像をドラッグ&ドロップ

まずは、圧縮したい画像(PNG・JPG)をドラッグ&ドロップしていきます。
(※スマホでのやり方も下記に記載しています)

そうすると自動で圧縮されます。

すると、元々92.7バイトあった画像が
30.6バイトまで圧縮されました!

圧縮率はこの画像でマイナス「67%」

かなり軽くなりましたね^^

圧縮された画像をダウンロード

続いて、圧縮された画像をダウンロードしていきます。

圧縮した画像は画面右の
「download」からダウンロードできます。

今回は1枚だけのダウンロードだったのですが、複数の画像を一気にダウンロードも可能です。

複数の画像をまとめてダウンロードするときは

複数の画像を一気にダウンロードする際は、画面下にある「Download all」をクリックします。

ZIPファイルでダウンロードされるので、

開封(Macならダブルクリック)すると軽量化された画像が入手できます。

もりのゆか

TinyPNGのサイトを使うと、ものすごく簡単に画像を圧縮できます!
ちょっと面倒くさく感じるかもですが、このひと手間が大切です♪

スマホで画像を圧縮する方法

スマホ版TinyPNGの使い方をお伝えします。

パソコンとほとんど同じですが、下記の画面が出てきたら画面をタップします。すると

  • フォトライブラリ
  • 写真またはビデオを撮る
  • ブラウズ

という表示が出てきますので、圧縮したい画像を選択すると、自動的に圧縮されます。

あとはパソコン版と同じで、ダウンロードしたら完了です^^

まとめ

ブログに圧縮せずに画像をアップロードしていた人は、今すぐ「Tiny PNG」で圧縮しアップロードすることで、かなりサイトが軽くなりますので、ぜひ試してみてください^^

リビジョンの使い方と機能
【ワードプレス】リビジョンの表示と記事の復元について記事の復元ができる!ワードプレスのリビジョンの使い方と機能について、ワードプレス初心者の方に向けてわかりやすく解説します!...
トラストコーチングスクール

“コミュニケーションが武器になる”

トラストコーチングスクールは、コーチングを受けながらコーチングの技術を学べる新しい形のスクールです。
全てのプログラムはベーシック講座からスタートし、ニーズにあったステップへ進むことができます。コーチングを体系的に学び「認定コーチ」の資格を取得し、コーチとして活動することもできます。

トラストコーチング講座を受講する