ガジェマガ

おすすめガジェットと生活改善のブログマガジン

ブログPV・アクセス

WordPressの画像圧縮率を変更してサムネイルを高画質にする方法

更新日:

ブログって文章と画像で構成されているから、他のブログと差を付ける方法はそれほど多くない。だから画像が重要になる。

本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。




他ブログと差をつける画質

1つ目にコンテンツの充実は当然必要なんだけど、文章を読んでもらうのと同じくらい重要なのが画像の美しさだ。綺麗な画像には目を奪われるし、そのブログに興味を持ってもらいやすくなる。だから綺麗な写真を撮ることと、綺麗な状態のまま画像をアップロードすることが重要だ。

ワードプレスの標準画質設定は90%

ところが、ワードプレスは標準の設定でアップロードした写真の画質を90%に落としてしまう。これによってサムネイルの画像が滲んだり、記事内の画質が劣化したりする。画質を90%に落とすのは少しでもデータを軽くしてページの表示速度を改善するための施策だとは思うけど、それはもう昔の話で、通信が高速になった2018年5月現在で数百kbのデータを惜しむ意味はない。

それよりも少しでも綺麗な画質で訪問者にガジェマガを印象づけることを優先したい。今回はそんな画質の劣化設定を無効化する方法を解説する。

 

functions.phpにコードを追記

とはいえやり方は簡単で、functions.phpにコードを一行追加するだけでいい。追加するコードはこれだ。

最後の100のところが画質を左右する数値で、100だと無圧縮の無劣化になる。

 

実際に検証してみた。

とはいえ90%と100%は微妙な違いだ。パッと見でわかる違いなのか見てみたい。ガジェマガではメディアをアップロードすることでワードプレスが自動作成するのは横幅430pxのサムネイル画像のみだ。デフォルトでは中サイズ、大サイズも作成されるけど、基本的にフルサイズ(元データ)しか使わないので、中サイズ、大サイズには0pxを指定することで画像の作成を抑制している。

実際に90%と100%で画質に変化が出るのか見ていきたい。

これが100%の劣化なし画質。

これが90%。細かい描写が滲む。

違いがわかりにくい人のために10%に設定したものがこれだ

たしかにこのコードによってアップロードした画像の画質が変化していた。

ちなみに、スマホで見るとわかりやすいんだけど、ここで紹介した100%の画像でも画質が悪いのは、最初に元の画像を430pxまで縮小しているからだ。画像サイズによる劣化具合も確認したい。

640×441の元画像がこれ。スマホ画面の横幅は400pxほどなので違いは無いかと思いきや明瞭さが全く違う。

それをフリーソフトである縮小専用で横幅430pxまでリサイズしたのがこれ

最後に、ワードプレスが640×441を画質100%設定で横幅430pxまでリサイズしたのがこれだ。

スマホで確認すると画面に表示されてるサイズは同じはずなのに640pxと430pxの明瞭感が全く違う。これはワードプレスの設定とは関係なくて、画像の大幅なリサイズによって単純に画質が劣化してしまってるからだと思う。

つまりサムネイルで表示されるサイズが400pxだからといって、画像を400pxまでリサイズしてしまうと結局劣化して滲んだ画像になる。400pxで表示されるのであればそこに使うデータは500px以上のほうが良い。実際にガジェマガでも340pxの記事一覧スペースに600pxの画像を使うことで明瞭な画質にしている。

対して430px同士の争いでは、若干ワードプレスが作り出した430pxの方が荒い気がするけど、ほぼ違いはない。

 

画質が劣化するのはワードプレスが作り直すサイズのみ

ところで気になっていたんだけど、サーバー上のフルサイズ(元データ)の画質の劣化はなかった。ワードプレスに画像をアップロードすると、元画像であるフルサイズの他に、大サイズ、中サイズ、サムネイルサイズの三種類を自動的に作り出す。今回調整した画質の変化はワードプレスがリサイズする画像のみに反映される。フルサイズはしっかり元データとしてサーバーに残っていた。

既にアップロードした画像の画質に拘りたいのであれば、画質設定を100%にして、サーバー上の元データから再度リサイズしてやればいい。

Sponcerd


Force Regenerate Thumbnailsを使う

そんな時に役立つのがForce Regenerate Thumbnailsプラグインだ。このプラグインを使えば過去にワードプレスが自動作成した画像データを一旦全て削除して、元データから改めてサムネイルを作成してくれる。もし大サイズ、中サイズを使う機会がない人はこの機会にサイズを0pxに指定して、Force Regenerate Thumbnailsで再生成すれば、ブログ全体の画像品質が向上するし、作成する画像が減ってサーバー容量を節約することも出来る。使い方は別の記事で解説しているので参考にして欲しい(→Force Regenerate Thumbnailsでサムネイルを再生成してデータを圧縮する

まとめ ライフハック

2018/12/16

【2018年版】生活が変わるガジェマガ式買ってよかったもの16選

いよいよ一人暮らしも5年目に突入しようとしていて、欲しいモノは一通り買ってしまった。これからも物欲は尽きることないだろうし、ガジェットに限らず様々な物を購入することになると思うけど、今後は足りないものを補うというより、今あるものをグレードアップする買い物が主流になると思う。 そんな満たされた生活の中でも、俺基準俺調べの買ってよかった商品を、生活に与えたインパクト順にランキング形式でを紹介したい。正直もっと早く買っておけば良かったと思うものばかりなので、まだ持っていないものがあれば急いで購入してほしい。 本 ...

ReadMore

スマホ・タブレット ライフハック

2018/12/11

家電量販店販売員と交渉してスマホを安く購入する方法【応用可】

どうせ同じスマホを購入するなら1円でも安く買いたい。そんな人におすすめなのが家電量販店でのスマホ販売員との交渉だ。 家電量販店の販売員はショップの店員さんと違って表には出さない下げ幅を持っていることが多く、うまく交渉することで相手が持つ下げ幅を最大限引き出すことができる。 今回は一時期電話番号を23回線保有しながら月の支払いが2,000円程度だった元携帯乞食でありながら、家電量販店と携帯ショップでのスマホ販売経験もある俺が値下げを引き出すコツを教える。 本日もガジェマガ(@Gadgetkaeru)をご覧い ...

ReadMore

パソコン・周辺機器

2018/11/27

【Matebook X Proレビュー】Macの外観サーフェスのスペック

2018年の6月に発売されたばかりのMatebook X Proを購入したので、ライバル機であるMacbookやSurfaceと比較しながらレビューする。 Matebook X Proの最大の魅力は3:2比率で画面占有率91%の3Kディスプレイだから、そこを中心にボディの質感からスペックまで網羅した。 今薄型ノートパソコンウルトラブックの購入、買い替えを検討している人は参考にしてほしい。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 Huawei Matebook X ...

ReadMore

お得情報 スマホ・タブレット

2018/11/18

【ZenFone5Zが5万円】GEARBESTでスマホを安く買う

GEAR BESTって知ってるだろうか。簡単に言うと中国のAMAZONなんだけど、日本への進出も着々と進めていて、最近では日本倉庫まで作ってしまった通販会社だ。AMAZONも楽天もあるなかで更に通販会社の選択を増やす必要があるのだろうかという疑問を抱く気持ちはよく分かるんだろうけど、GEAR BESTには独自の魅力がある。今日はGEAR BESTが同魅力的なのか、具体的に製品を列挙しながら解説したい。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 GEAR BESTの魅 ...

ReadMore

【iPhoneとAndroidの違いと比較】選ぶポイントまとめ

スマホ・タブレット

2018/11/9

【iPhoneとAndroidの違いと比較】選ぶポイントまとめ

これからスマホを買う人、次のスマホへの買い替えを検討している人向けに、AndroidとiPhoneの違いとそれぞれの優れている点を比較解説する。 また、なぜ俺がiPhoneからAndroidに買い替えたのかを解説したい。 迷っている人はとりあえずこの記事を読めば違いがすべて把握できる。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 iPhoneもAndroidもできることはほぼ一緒 当たり前だけど主に出来ることはほとんど一緒だから、iPhoneとAndroidの違いはト ...

ReadMore

スマホ・タブレット まとめ 格安SIM

2018/12/16

【ほぼ同じ】格安SIM11社の料金と特徴比較+おすすめスマホ15

既に格安SIMを取り扱うMVNOの提供会社は100社を超えていて、過当競争が進みすぎて値段も品質もほとんど違いがない。 そんな中でも比較的有名な格安SIM提供会社11社の比較と、それぞれが取り扱うスマホのおすすめランキングを紹介する。前半でMVNOの格安SIMをまとめて、後半でスマホをまとめている。 格安SIMの違いはどうでもいいからスマホのおすすめが知りたい人は後半からどうぞ(⇒後半までスキップ) 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 格安SIMはどこも一緒で ...

ReadMore

-ブログPV・アクセス

Copyright© ガジェマガ , 2018 All Rights Reserved Powered by AFFINGER5.