ガジェマガ

ガジェットと生活改善のブログマガジン【3月はお休み】

ブログを書くコツ

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

2018年5月23日

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

トーマスです。ツイッターYoutubeもやってます。お問い合わせはこちら




この記事の目次(クリックでジャンプ)

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

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%にして、サーバー上の元データから再度リサイズしてやればいい。

Force Regenerate Thumbnailsを使う

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

スマホ レビュー

2020/11/15

【iPhone12レビュー】ライバルは2万円安いiPhone11

毎年秋の風物詩となりつつある最新型のiPhone12が今年も発売された。今回のiPhone12シリーズは4モデルもあってどれを購入するか迷うんだけど、とりあえず俺は最もベーシックで売れるであろうiPhone12を購入したからレビューしたい。 この他にもうすぐ発売となるiPhone12 Pro Maxの購入を迷っているところではあるんだけど、iPhone12とほとんど一緒だからモチベは低め。凄そうなら買う。多分買わない。 iPhone12の特徴 iPhone12の特徴は下記。 最強CPU A14チップ搭載 ...

ReadMore

ライフハック 買ってよかったもの

2021/2/17

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

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

ReadMore

ライフハック 買ってよかったもの

2020/7/28

【そもそも鞄いる?】ガジェマガの中の人のポケットとカバンの中身

多くの有名ブロガーがカバンの中身を記事にしているのにガジェマガではまだ一度も鞄の中身について書いたことがなかった。ブロガーになりたいのであれば、他のブロガーが書いている記事はしっかりと抑えておきたいということで、今回はガジェマガなりのカバンの中身と、ポケットの中身を紹介したい。 鞄はオカマの象徴 in USA 俺は中学生高校生の頃はリュックサックを使っていたし、社会人になってからはボディバッグを休日の荷物入れとして使っていた。社会人になり立ての頃にアメリカに留学していた妹と再会する機会があって、アメリカの ...

ReadMore

ライフハック 体験談

2020/12/13

【狭い家のメリットデメリット】6畳1Kに8年住んだ感想【一人暮らし

田舎の人が都会に引っ越す際に危惧するのは部屋の狭さなんだけどそれは間違ってない。都会は家賃が高いから広い部屋に住めない。 でもそれは悪いことばかりではない。寧ろ狭い部屋は快適だな。と渋谷区6畳1Kの家に8年住んで思う。ということで今回は俺が感じた狭い部屋に住むメリットデメリットを解説する。 狭い部屋の家賃だけじゃないメリット 狭い部屋は家賃が安い。これが最大のメリットなのは間違いない。 東京都の平均家賃相場は22万円 実際俺が住む東京都渋谷区は日本でもトップクラスに家賃が高いエリアで、2LDKとかを選んだ ...

ReadMore

ライフハック

2021/2/19

タワマンに住みたいからメリットデメリットを考える【一人暮らし】

久しぶりに興味があることが見つかって最近テンションが上がってる。タワマンに住みたい。今の8万円の家の立地は最強だし、設備の割に家賃が安くて気に入ってはいるんだけど、さすがに9年住んで色々と限界を感じているのが正直なところ。 そろそろ引っ越したいと思うことが増えてきていたんだけど、どうせなら振れ幅重視でタワマンに住んだら面白いかも。と思ったのがきっかけ。ただ、タワマンなんて人生初だし怖すぎ。ということで俺がタワマンを検討している理由と、タワマンに住むメリットデメリットを検討する。 今の家の不満点 まずはタワ ...

ReadMore

スマホ レビュー

2020/11/10

【Galaxy Note20 Ultraレビュー】浪漫の塊。コスパは最悪。

2年間カメラのために愛用しつづけたMate 20 Proを遂に乗り換える。その候補がOnePlus 8 ProとGalaxy Note20 Ultraなんだ。OnePlus 8 Proは既にレビューをしていて8万円で買える最強スマホと言える仕上がりなんだけど、スマホは乗り換えたら多分1年は使うことになるから、メインスマホ選びは慎重にならざるを得ない。 ということで15万円もする超最強スマホGalaxy Note20 Ultraを入手したからレビューする。 Galaxy Note20 Ultraの特長 Ga ...

ReadMore

AFFINGER5導入

2020/6/4

【ブログで稼ぐ】AFFINGER5導入から1年5か月のPVと収益

ブログで稼ぐならワードプレスを使った方が良い、ワードプレスで稼ぐなら有料テーマを使った方が良いという話は聞いたことがある人も多いと思う。 俺もその話を鵜呑みにしてワードプレスの有料テーマAFFINGER5を購入した口なんだけど、AFFINGER5を導入したことでどれくらい効果があったのかをガジェマガの事例で紹介したい。 ガジェマガ運営の経緯 まずはガジェマガ運営の経緯を紹介する。 2015年10月にFC2でブログ運営開始 2016年5月頃にオススメスマホランキング記事が検索上位に表示される 2016年5月 ...

ReadMore

メンズ美容・健康 ライフハック 体験談

2021/1/6

【体験談】ICLカウンセリングでレーシックに申し込んだ話【視力矯正】

最近レーシックとかICLと言った視力矯正手術を耳にする機会が増えていて、俺もせっかくだから視力を良くしようとICLに申し込んだ結果、レーシックの予約をして家に帰った。何を言っているのかわからないと思うけど俺にもわかっていない。 ということでカウンセリングでなにが起きたのか、なぜICLではなくレーシックを選んだのかを解説する。 視力の悪さは機会損失 俺の視力はギリ裸眼で生活できるレベルで、両目0.7なこともあって車の運転するときもコンタクトとかメガネは使わない。かといって十分な視力というわけではなく、遠くの ...

ReadMore

-ブログを書くコツ

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