ここあです。
Webサイトにしろ、ブログにしろ
デザインをする際に意識しておかないといけないのは、
サイトの「表示速度」です。
実際、無料の画像素材などを使う場合は特に
適正な画像サイズにしておかなければ、
画像1枚のファイルサイズが無駄に重たくなることで、
サイトの表示速度が遅くなってしまい、
ネットユーザーやGoogleからの評価を
下げることになってしまいます。
ということで、今回は、
無料の画像素材などを使う時に気を付けたいポイントと
画像を適正サイズにしたり、加工するのに
役立つサイトをご紹介させていただきます。
ブログやWebサイトに画像を使う時の注意点
さて、ブログやWebサイトのデザインをする際に
クオリティの高いおしゃれな画像やイラスト素材を使いたい場合は、
こちらの記事を参考にして欲しいのですが、
今回、あなたにお伝えするのは、画像を選んだ後の話です。
特に、海外の写真素材サイトは画像のサイズが大きく、
ファイル容量も大きいため、そのままブログやWebサイトに
使ってしまうとかなり危険です。
というのも、ファイル容量が大きいと
データを読み込む時間がかかるため、
サイトの表示速度が遅くなってしまうからです。
あなたは以下のデータをご存知ですか？
このデータは何かと言うと、
サイトの表示速度とユーザーの直帰率との関係です。
このデータが何を表しているかと言うと、ページ表示速度が1秒から
- 3秒になると直帰率が32%増加
- 5秒になると90%増加
- 6秒になると106%増加
- 10秒まで遅くなると123%増加
つまり、読み込み速度というのはそれだけネットユーザーに
大きな影響があるということです。
なので、サイトの表示速度はそれだけ重要なものですし、
表示速度が遅いためにサイトにアクセスされる機会が減ると、
当然、集客数や売り上げにも影響してきます。
だからこそ、ファイルサイズというのは重要で、
画像を使う際には必ず「適切な画像サイズ」に調整して
できるだけサイトの表示速度を落とさないように気を付けましょう。
例えば、僕が今使っているこのテーマ「THE THOR（ザ・トール）」の場合、
アイキャッチ画像の適正サイズは「768×432px」。
僕は適正サイズを調べた上で、画像を制作する際には、
高画素のRetina（レティーナ）ディスプレイのことまで考え
その倍の「1536×864px」で画像を作り、
画像に圧縮をかけて記事に反映しています。
つまり画像を作り、ブログやWebサイトに反映する際のポイントとしては
各WordPress（ワードプレス）テーマで設定されてる
画像の適正サイズをきちんと知り、そのサイズに合わせた画像を作るということ。
いずれにしても画像データ（ファイルサイズ）は
とにかく軽い方が画像の読み込みスピードが上がり、
サイトの表示速度が速くなりますので、
データの重さは常に意識するようにしてください。
ネットで調べるとサイトの表示速度を上げるための
「画像読み込み遅延のプラグイン」なども紹介されたりはしていますが、
そもそもそうしたプラグインを導入する以前に
適正な画像サイズやファイル容量にしておくことが大事です。
その上で、画像の「読み込み遅延のプラグイン」を使う方が、
より効果的ですし、サイトの表示速度は速くなります。
ということで、前置きが少し長くなりましたが、
データを適切なサイズに加工し、軽くするまでの一連の流れとツール。
その他、画像の加工に便利なツールも併せてご紹介致しますので、
ぜひ活用してください。
画像がリサイズできる便利なツールとその方法
それでは画像がリサイズできる便利なツールをご紹介致しますが、
僕があなたに伝えたいのは、あくまでも画像をリサイズする方法ではなく
適正な画像サイズでできるだけ画像データは
軽くしておく方が良いですよということです。
なので、画像をリサイズする目的だけ忘れないようにしてくださいね。
PEKO・STEP
画像をリサイズしたり、トリミングできるツールは他にもあるのですが、
最も使いやすい「PEKO・STEP」だけご紹介致しますので、
Photoshop（フォトショップ）などの有料ソフトを使うことなく、
無料で画像の加工をしたいあなたはぜひ活用してみてください。
このツールの良いところは
きちんと「数値コントロールできる」という点です。
ちなみに画像をリサイズしたい場合は、
「ここに画像をドロップしてください」という部分に
リサイズしたい画像をドロップして
あとは画像の高さや幅を数値入力するだけでOK！
画像の比率を維持するかしないかも、チェック項目がありますので、
基本的には「比率を維持する」で問題ありませんが、
あえて比率を変えることも可能です。
「サイズを変更する」をクリックすると、このように
画像のサイズが指定サイズに変わりますので、
リサイズ後の画像を保存する場合は
- ファイルをクリック
- 保存をクリック
あとは、あなたが管理しやすい任意の場所に保存してください。
さらにリサイズした画像をトリミングしたい場合は、以下の手順で
- 画面左上のツールを「ハサミ」のマークに切り替える
- 写真の上からマウスをドラッグして選択範囲を作る
- トリミングの範囲を数値で調整する
こうしてトリミング位置や範囲を数値入力で調整することで、
自分があらかじめ決めたファイルの大きさで
画像をきちんと作ることが可能です。
トリミング位置やサイズが確定したら
「選択範囲を切り抜く」のボタンをクリックしてください。
これで自分の思い通りのファイルサイズ、
トリミングした画像が完成しました。
ただこちらの「PEKO・STEP」の弱点は画像ファイルが
「PNG形式」のみの書き出しになってしまうため、
残念ながら画像をリサイズしたり、トリミングしても
それなりにデータが重くなってしまうということです。
PNG形式からJPG形式に変える方法
僕はPhotoshop（フォトショップ）を使っているので、
画像のリサイズもファイル形式も、トリミングも簡単にできるのですが、
もしもご自身で画像の保存形式を
PNG形式からJPG形式に変換できる方法をご存知でしたら
あなたのやり方で変換してください。
その方が必ず画像データは軽くなります。
逆にもしも画像のファイル形式を変える術をご存知ない場合は
以下のツール「画像サイズ変更ツール」を使うことで、
ファイル形式を変えることが可能です。
画像サイズ変更ツール
こちらのツールも使い方は簡単です。
「枠線内に画像ファイルをドロップ」と書かれた部分に
リサイズしたい画像をドラッグ&ドロップするだけ。
先のサンプルファイルはPNG形式だと重さが「3.2MB 」もあります。
これをJPGにチェックを入れて画像サイズ変更ツールで変換すると
ファイル容量が1/6ほど少ない「463KB」になりました。
あとは画面をスクロールさせると、
ファイル名の変更もできる保存ボタンがありますので、
ファイル名を変更する場合は、入力して
画像データを保存しましょう。
画像のファイルサイズを圧縮する方法
PNG形式からJPG形式に変換し、ファイル容量はだいぶ軽くなりました。
ですが、463KBでは正直、まだ重すぎます。
なので、さらに画像のファイルサイズを今度は
「圧縮」するツールを使ってファイル容量を減らします。
実際、いろんなブログの記事を見ていると、
画像をアップロードする前に圧縮をせず、
ワードプレスにアップロードした後に画像を
一気に圧縮するプラグインを紹介されたりもしていますが、
僕はあまりおすすめ致しません。
例えば、有名なプラグインとして多くの人が紹介している
「EWWW Image Optimizer」というプラグインがあるのですが、
そもそも画像を圧縮するためだけにプラグインを入れるのは
はっきり言って無意味です。
なぜなら、
- 画像の圧縮は、先にしてからアップロードが可能
- そもそもプラグインがサイトの表示速度を遅くする
- 頻繁に圧縮するとどんどん画像が劣化していく
こうした理由があるからです。
もちろん、使い方にもよりますが、
サイトの表示速度を早めるために画像を圧縮するのに、
そのためのプラグインを入れて表示速度に負担をかけるのは
僕は「本末転倒」だと思っています。
だから、僕は画像を圧縮ためのプラグインは入れてませんし、
その代わり画像を圧縮する際に必ず「あるツール」を使って、
画像を圧縮してからデータをアップロードしています。
それがこちら「TinyPNG」です。
TinyPNG
僕は画像をワードプレスにアップロードする際
必ずこの「TinyPNG」を使って画像のファイル容量を圧縮しています。
使い方は超簡単で、圧縮したい画像をただ
このサイトにドラッグ&ドロップするだけ。
実際、先のサンプル画像をこの「TinyPNG」で圧縮すると
このように23%のデータ圧縮に成功しました。
※圧縮率は画像によって変わります。
個人的には1つの画像ファイルはできるだけ
300KBは切りたいところですが、いずれにしても
こうした様々なツールを使うことで
画像を適正サイズにしたり、ファイル容量を軽くすることで、
サイトの表示速度を上げることができますので、
画像を加工するためのツールを持ってない方はぜひ活用してみてください。
画像の加工に便利なルール
ここまでは画像サイズを調整し、ファイル容量を減らすのに便利な
Web上のツールについてご紹介しましたが、
ここからは「画像の加工」に便利なツールをご紹介致します。
いずれにしても知っておくとすごく便利ですので、
ぜひブックマークしておいてくださいね。
removebg
まずはこちら「removebg」。
こちらのツールは画像をアップロードするだけで
簡単に背景が切り抜けてしまう優れもの。
例えば、こちらのサンプル画像。
この画像を「removebg」にドラッグすると、ものの数秒で
このようにAIがきれいに画像を切り抜いてくれます。
ただし、無料で使う場合は「612×408px」のサイズでしか
ダウンロードできませんので、その点だけあらかじめご了承ください。
「300×250px」などのちょっとしたWebバナーに使う場合は、
十分活躍してくれると思いますので、必要に応じてご活用ください。
DataChef
白黒の写真をカラーに変えたいと思ったことはないですか？
これまでならカラー写真を白黒写真に変えることは簡単にできましたが、
今や白黒写真をカラー写真に変えることもできる時代です。
そういう意味では、切り抜きにしても、色変換にしても最近では
AIの進化を感じざるを得ない画期的なツールがどんどん登場してきています。
このサイトも使い方は超簡単で、ただカラーにしたい写真を選んで
サイトにアップロードして、変換後のデータをダウンロードするだけ。
試しに変換したデータがこちら
ものの見事にカラー変換されました。
なので、画像ファイルを探していて、
「この写真の構図は良けどカラーだったらなぁ」という
白黒写真と出合った場合は、
こうしたツールでカラー変換できるということを
ぜひ覚えておいてくださいね。
僕はこうしたツールも比較的よく使っています。
実際、フリー素材にしても、わざわざモノクロの写真を
カラーに変換してまで使おうという人は少なかったりしますので、
似たような写真でもカラーにすれば差別化ができます（笑）
ちょっとした裏技ですね。
このサイトは白黒写真のカラー化以外にも
様々なフィルターをかけてくれる機能もあるみたいですので、
気になる機能があれば、ぜひ色々試してみてください。
画像の加工におすすめのツール一式まとめ
今回は画像の加工におすすめのツール一式をご紹介致しました。
いずれにしても、この記事であなたに伝えたかったのはただ1つ。
決して使わないでください。
ということです。
その理由は画像のファイルサイズが重いことで、
サイトの表示速度が遅くなり、ネットユーザーも
Googleからの評価も落としてしまうことになるから。
つまり、画像のファイルサイズを軽くし、
サイトの表示速度を上げることで、それが
「SEO対策の一環」にもなるんですね。
今回はphotoshopのように有料のツール1つだけで
画像を加工する方法ではなく、
誰もが簡単に無料でできるツールをお伝えさせていただきました。
なので、少し手間ではあるのですが、
いずれにしても何かしらの方法で画像を適正サイズにして、
ファイル容量を減らすというのが大事です。
あなたはブログに画像をアップする際、
画像の適正サイズやファイル容量をきちんと意識していますか？
もしもそうしたことを知らないまま
オリジナル画像をアップしてしまっていた場合は
手間でもぜひ調整するようにしてみてください。
それだけでもSEOに必ず良い影響がありますので。
ということで、また便利なツールがあれば、
このブログで紹介します！
以上、最後までお読みいただきありがとうございました。
