JIN:Rのサムネイルの画質が悪いのでオリジナルサイズを使用してみた

WordPress有料テーマ「JIN:R」を使って4記事登録してみた頃、記事リストのサムネイルの画質が悪いことに気づいた。記事リストや記事一覧の画質が悪いので、iPhoneで見たときに質が悪く見えるのが気になってしまった。各記事のトップにあるアイキャッチ画像はオリジナル画像を使用しているようで画質に問題はない。

サムネイルの画質が悪い原因

JIN:Rは640×360pxのサムネイルを自動生成する

記事ページと比較すると、記事リストのサムネイルとして表示される方は特に白いテキストが読みづらくぼやけている。が、おそらくサイズと画質を落とすことで軽量化し、表示速度を速めることができているようだ。

記事リストと記事本体との比較

調べてみたところ、JIN:Rでは下記のような仕様になっていることが判明した。

記事リストサムネイルの仕様
  • アイキャッチ画像は640×360pxのサムネイル画像を自動生成する
    (このサイズはWordPressの設定>メディアには表示されないので注意)
  • 記事リストや記事一覧のサムネイルには自動生成された640×360pxのサムネイル画像が使用される
  • SWELLのようにサムネイル比率を選ぶことはできない(16:9のみ)
  • 別の比率やサイズにしたい場合は、カスタマイズ>その他設定>アイキャッチ画像をオリジナルサイズで利用するをオンにする
  • オリジナルサイズをオンにした場合、画像を自分である程度軽量化してからアップロードしないとサイトが激重になる

記事のアイキャッチ画像を、正方形や縦長など、オリジナルにしたい

アイキャッチ画像を正方形・縦長などのオリジナル比率に対応させることも可能です。「カスタマイズ」>「その他設定」に進んで、「アイキャッチ画像をオリジナルサイズで利用する」をONにしてください。
そうすると、アップロードした画像比率をそのまま表示できるようになります(記事リスト・アーカイブ・関連記事・記事内のアイキャッチに関してのみ)
なお、この方法を取ると、どうしても表示速度に関しては重くなってしまいます。その点だけあらかじめご了承の上お使いいただけると幸いです。

https://jinr.jp/manual/q-and-a/
残念ですが、ひと手間かけましょう

JIN:Rでサムネイルの画質を良くするには

自分でひと手間かける必要があるとわかってしまった。めんどい!
でもそれをやることが美と速度につながるならやるしかない
くそっ。SEO系Webデザイナーの美学。譲れん。

  • 今後アイキャッチ画像を固定のサイズで作るようにする。
  • アイキャッチ画像のサイズはPCで表示した時の記事の一番上のサイズより大きくなければならない。
  • もともとのJIN:Rの見た目を保ちたいなら16:9で作るほうが良い
    Canvaで「YouTubeサムネイル(1280×720)」のテンプレートを選択して作るのが手っ取り早い
  • Canvaなどで出力するときPNGで出力する(JPGなら圧縮せず画質100)
  • 1280×720の画像がサムネイルにも使われるため、TinyPNGで軽量化してからWordPressにアップロードする。
    →軽量化しないと700KBくらいいく。圧縮すれば色数が多くても220KBくらいで済むはず…
  • 640×360サムネイルのときよりは表示速度が遅くなると思うが、画質をきれいにしたいならもうそこは妥協するしかない

私が真面目じゃなかったのかよくわからないが、SWELLのときは気になったことがなかった。なんでだろ…

というわけでJIN:Rのサムネイル画質問題でした。

※補足

テーマ内で640×360のサムネイル生成しているコードを特定して、その画質を100にすればいいんかな?って思ったんだけど、そもそもサイズを小さくするから一度そこで劣化するってことに気付いた。WordPressさんが縮小をきれいにやってくれるとはとても信じていないので、手間をかけることにした。グッバイ速度ファースト。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次