ウェブサイトを作る(32):Squooshした写真をアイキャッチ画像にしてみる

前回から、下記のウェブサイトにお世話になっています:

WordPressで使う画像サイズの目安と最適化の方法!おすすめプラグインやツールも紹介
WordPressでブログ記事やホームページに利用する画像サイズの目安を解説してます。また、適切なサイズで利用することの重要性や、画像サイズを最適化するためのツールやプラグインも紹介します。

画像サイズの目安が分かったところで、アイキャッチ写真の埋め込みを試してみることに。

生花の写真(iPhoneXで撮影した2MBの画像:IMG…jpgファイル)をSquoosh(スクワッシュ)にドラッグドロップし、Resize(サイズ変更)をオンにして、横幅をアイキャッチの目安である1200 pxに変更してみました。これで大幅に圧縮できます(ファイルサイズの目安である200 KBを難なく達成)。実際に、Compress(圧縮)フォーマットをWebP形式にすると71KBとなり、この超圧縮画像をワードプレスにアップロードして、アイキャッチ画像として設定してみたのがこちら:

写真が配置されるだけで非常にアイキャッチな記事の一覧になりそうです。ただし、超圧縮により画質はかなり落ちているため、花の輪郭などはハッキリしていません。この花はなんだろう?と少し拡大してもらう場合には効果が低いような気がしますね。このあたりを含めて、今後、画像ファイルのブラッシュアップも考えていきたいと思います。

タイトルとURLをコピーしました