サムネイルをRetinaディスプレイ対応に変更してみた

小ネタ
この記事は約3分で読めます。

現在私はCocoonというWordPressのテーマを利用させていただいております。
ブログ運営をしていくなかで、非常に効率的に使用できて助かっております。

ブログを運営していると、ときどき細かな設定を変更したくなることがあります。私も最近、サムネイル画像に関する設定を変更しました。それまでは軽量化を優先してRetinaディスプレイ対応はしていませんでした。しかし、画質が荒くなってしまい、せっかくの記事なのにサムネイルがぼけて見えるのは残念でした。

そこで、テーマのCocoonの設定を変更することにしました。私はCocoonというWordPressテーマを利用しており、非常に使いやすくて助かっています。cocoon-blocksの機能も素晴らしく、ブログカードを手軽く埋め込めるので重宝しています。

設定方法(切り替え)

さて、サムネイルのRetinaディスプレイ対応を変更するには、Cocoon設定の画像設定にある「サムネイルをRetinaディスプレイ対応にする」というチェックボックスをオンにするだけだと思っていました。しかし、それだけではサムネイルの画質は変わりませんでした。


そこで、Cocoonの作者であるわいひらさんのブログを読み直してみると、画像の再生成が必要とのことが分かりました。確かに、設定を変更しただけではサムネイル画像自体は変わらないはずです。

画像を再生成すると、きれいなサムネイルが表示されるようになりました。WebP形式に変換されているので、画質が上がっても重くなることはありませんでした。一安心です。

ただ、気になる点がもう一つありました。それは、サムネイルの端が切れてしまうことです。サムネイルのアスペクト比を約5:8の黄金比に設定していたのですが、サイズは1200×630ピクセルに統一していました。そのため、写真によってはサムネイルの端が切れて表示されてしまうのです。

そこで、アスペクト比を9:16の地デジ・YouTubeの比率に変更し、再度画像を生成し直したところ、端が切れることはなくなりました。やっと満足のいくサムネイルが表示できるようになりました。

Pagespeedinsght のスコアが少し低い

ただ、Pagespeed Insightsのスコアが若干低めでした。デスクトップ版ならそれほど問題ないのですが、スマートフォン版は61とちょっと低めです。これは外部リソースが原因かもしれません。プラグインなども見直す必要がありそうです。

のように、ブログを運営していると細かな設定を調整することが多々あります。軽量化と画質のバランスを取るのは一苦労です。でも、こうしてブログを改善することで、ユーザーにとってもよりよいコンテンツを提供できるはずです。これからも、ブログの改善に努めていきたいと思います。