サムネイル画像を劣化させない方法

方法はあるんですけれども、それは諸刃の剣と言うか、表示スピードやファイル容量と言ったものを犠牲にすることになりますがそれでもサムネイル画像の美しさを取るか、サムネイルの美しさはひとまず保留して、表示スピードやファイル容量をセーブするかはpicoさん次第です。

またiPhoneなどで、レティナ画面なので、たまたま自動で汚く見えているだけかも知れません。
その場合は、プラグインを入れるのが手っ取り早いです。

お返事ありがとうございます！
http://naturaldietjapan.com/　
このトップページのサムネイル画像を自動的に劣化しないようにしたいです。

サムネイルの種類をどれだけ作っているかもありますけれども、現在、

http://naturaldietjapan.com/wp-content/uploads/2016/05/IMG_6702a-320x180.jpg

このように画像が指定されています。320×180と言うのは16:9なので、ひとまずこれを覚えておいて、極論を書くと、

http://naturaldietjapan.com/wp-content/uploads/2016/05/IMG_6702a.jpg

こうすれば綺麗な画像が表示されるはずです。つまりオリジナルの画像です。サムネイルをいくつか作っていて、640×360の画像があればそれを使えばより綺麗になりますし、オリジナルのものは単に縮小化するだけなのでより綺麗です。

問題点はもうひとつ。.entryの枠が329pxで作られているということです。これは画像が拡大されるサイズです。なので.entryの横幅を320pxにすればよいわけです。

サンプル: 無理くり320px、あるいはそれ以下になるようにしたサンプル | codepen

しかし最も良いのは、元の画像のアスペクト比が変わらず、短い方の辺に合わせて拡大縮小(あるいはクロップ(切り抜き))できる背景画像表示です。

サンプル: サムネイルをオリジナル画像にして背景に設定 | codepen

しかしここでも問題が起こります。オリジナル画像は、680×453あたりのサイズで作られているために、縦サイズが66.617647059%となって56.25%が16:9と考えるとやや縦が長いということになります。
自動で、サイズをあわせるために良い感じにクロップできた場合はボケることが無くなりますが、中途半端な箇所になると、ややボケます。
※ css側で全てを16:9で表示するようにしてあります。オリジナルのサイズが初めから16:9ならこの設定は必要無くなります。逆にこれがボケる元です。

これらはレスポンシブにするための方法ですが、レスポンシブになっているから問題が起こるわけで、レスポンシブにしなければ問題は起こりません。

ここからは設計の話になりますが、PCの時は、320×180で2列、タブレットの時も同じで縦向きでは問題ないかと思います。問題は、タブレット横向きの時に、サイドバーを出す場合は問題なし、サイドバーがない時は
3列も考える必要がある感じかと思います。320pxが3つで960px、iPadなら1024pxあたりかと思うので、64pxのスペースが作れます。

スマホの時は、320pxだとiPhone5ピッタリですが、iPhone6になると少し横に隙間ができます。iPhone6で横に向けた場合は320px 2列でギリ隙間が開かないかも知れません。が、並べられなくもないと思います。

見た目にマージンを取るほうが好ましいのか、画像が綺麗な方が良いのかで方法が変わると思います。場合によっては、少し小さめの画像を用意して画面幅によって読み替えるということもできなくはありません。

これらを総合して考えると、まずオリジナルの画像を16:9で作るのが良いかと思います。現在の設定で320×180でサムネイルが作られるなら、何も変更するところはなく、画像だけ変更すれば良いと思います。
次に、最初のサンプルでも後のサンプルでもどちらでも良いですが、まぁ最初の方が手が加わるのが少ないので最初ので言うと、

#main .masonry-brick {
  height: auto;
}

これはリストのスタイル 2列を選んでいるのでmasonryが動作しています。それを一部解除するためのスタイルです。jQueryでもmasonryを解除するスクリプトを入れましたが、見た目にデフォルトのリスト表示にするためです。

masonryに少し手を入れても良いのですが、デフォルトのリスト表示にして、サンプルのscssで上記以外(不要部分以下はいりません)をview compliedボタンで変換されたcssから探して、子テーマstyle.cssにコピペだけで、おそらく2列表示になるかと思います。

css側で320px以上にならないようにしてあるので、縮小しかされません。開いたスペースは自動的にflexが補完してくれるかと思います。

現状、320×180の表示領域に320×180のサムネイルが表示されているわけですが、軽くするためにかなり圧縮されているのではなかろうかと思ったりもします。
320×180の時は綺麗に見えますが、それが変わった時にjpgはアラが出始めますので、画像サイズは320×180でもやや高解像度のものを用意されるのが良いかも知れません。

wordpressがサムネイルを作る時に指定サイズに切り取ったりします。jpgのものを再生成する際にも劣化が出ると思いますので、これを見越した解像度が必要になると思います。

元の画像が16:9で作られていれば、切り取り自体は発生しませんが、再度作られる過程で少し劣化します。そもそもサムネイルとは元の画像を軽く、なんとなしに見せるようなものなので、場合によってはファイルサイズは大きくなりますがpngが良いかも知れません。

またどうしても拡大縮小をしても画像の劣化を避けたいという場合はsvgが最適です。そのためにはSimplicity側をちょっと改造しなくてはなりませんが、これだったら間違いなく綺麗なままです。

ひとまずsvgはおいておいて、最適化は必要かと思いますが、pngあたりで16:9の画像を作ると言う所からやってみて下さい。画像さえきちんと作られていれば、特別サンプルのようにcssに手を出さずとも上手くいく可能性はあります。
拡大縮小を考えた場合、現在のオリジナル画像のサイズ680×453を720×405で作ったり、あるいは672×378とか、680×382.5など、あまり端数があるのは良くないと思うので、720×405とかがよいでしょうか。

オリジナルの画像が186.4KBで、pngで画像を合わせて作ると524.4KBになりましたが最適化すると、129.7KBになりました。変換したものがこれ

元々jpgのものをpngに直したので若干モヤみたいのが見えてますが、オリジナルのものが綺麗なら、これも減少するかと思います。一度テストでこの16:9で作ったものを仮に投稿してどうなるかを見るのも方法かと思います。

jpgでも解像度が高ければそれなりに劣化は少なくなると思います。

ありがとうございます。ですが、何をどうすればいいか。。。

シンプルに改善する方法はありますでしょうか。

ひとまずは画像を16:9にすることからですかね。
それだけで直る場合もありますし、直らないかも知れません。

拡大縮小させたら画像がボケるのは当然なので、させない方向で行くか、アスペクト比を固定した画像で高解像度ならボケる度合いが低くなるかも知れないという感じです。

wordpressのサムネイル作成時の動作も操作できたりもしますが、画像いじくる方が速いのと、サイズを固定すればボケないのでそこらからかと。

hidekichiさん、ありがとうございます！試してみます。

わいひらさん、ありがとうございます。
https://goo.gl/FU5PRv　
表示端末　windows pc
ブラウザ情報 chrome

こちらになります。
よろしくお願いいたします。

ちなみに、サンプルの表示はボケてますか？

サンプルのアドレスの中にあるpenの部分をfullに変えるとエディタ部分のない表示になります。

hidekichiさん、画像がクリアになっています！

現在のオリジナル画像のサイズ680×453を720×405で作ると、オリジナルよりだいぶ横長の画像になってしまうので、オリジナルを720×480にして、サムネイルの縦横比率を変えることはできないでしょうか。

縦横比率を変えたら画像自体がまたおかしなことになったりします。
今、picoさんのサイトでトップページのサムネイルで表示されているのは16:9になっているんですよ。なので16:9をオススメしましたが、逆に他の画像が全部同じ比率なら、比率を100(%) : 66.617647059(%) にすればひとまずはっきりくっきりするかも知れません。

この場合は画像を触る必要はないです。

masonryの設定で16:9になってるんですよ。おそらく。

320 : 180 ということは、180 / 320 * 100% = 56.25% これは横が100%に広がった時320pxなら縦は56.25%ですと言うことです。つまり、16:9なんです。

で、ここからは画像を直すかcssを直すかどちらかです。
cssを直せば比率は変えられますから画像は変えなくても良いです。画像を変える場合はcssはそのままでも良いだろうと思われるのでcssも設定も変える必要はありません。
記事がどれぐらいあるかはわかりませんが画像がたくさんあると修正が大変だという場合はcssを直したほうが良いですし、記事が100件以下なら場合によっては画像を直すほうが早いかも知れません。

僕が提示したサンプルのcssを見ても56.25%が.entry-thumbあたりに入っているかと思いますが、これを66.617647059%にすれば、元の画像の比率です。

ここからは余談ですが、jpegは最高設定にしても圧縮されています。これはそういうものなのです。なぜ圧縮するかは、圧縮されていないtiffやbmpの画像を見比べたらわかりますが、非圧縮のファイルはべらぼうにファイルサイズを食うんです。

ここで更に問題があって、100%表示しているjpgは見た目に非圧縮の画像と遜色なく見えます。が、一旦拡大縮小をすると急に荒くなるのです。ブロックノイズというのがjpegには入ってまして、本来はこれらがあるおかげで滑らかに画像が見えていますが、拡大縮小するとそのブロックが変な具合に働くという寸法です。
拡大するとギザギザが目立つと言うようなことも出てきます。

で、なるべく拡大縮小をしてもアラが見えないようにするためには、元の画質をあげるのと比率を保つということです。100%の表示の時が正しい表示なわけで、その並びが絶対なのです。縦横を変えると並びがかわります。拡大縮小するとアラが見えてきます。

なので、画質を上げて高解像度にし、比率を変わらないようにするためにオリジナルの画像に手を加えるというのはある程度有効かと思います。

pngをオススメしたのは、jpegとはまた違う圧縮をしてまして、ファイルサイズはそこそこありますが、縮小した時でもまぁ元が同じようなものならpngのがマシかなぁと言う点ぐらいの話で、ベクター画像以外は拡大縮小すると必ず劣化しますので、どこで妥協できるかがポイントです。

元の画像をサムネイルにする時に劣化するというようなことを書きました。オリジナルの画像の画質が高ければこれもいく分かは軽減されるはずです。

後はcssを直すにしても、画像を直すにしても根気とやる気だけです。

hidekichiさん、ありがとうございました！

私にはかなり高度ですがやってみます。またよろしくお願いします。