画像縮小での劣化を最小限にするやり方とは?【Web用編】

Pocket

Web用画像の場合、印刷用画像の扱いとはかなり違ってきます

なので基本的にはそれぞれ分けて準備することが必要。。。

そしてWeb用の場合、どうしても『縮小』『圧縮』が常につきまとうかと思う。

『印刷用画像の縮小』については前回書きましたので、

今回は、

『Web用画像の縮小』で、『劣化を最小限』にするやり方は?

についてです…..

Web用 画像縮小

〜〜項目〜〜〜〜〜〜〜〜〜〜

❤︎0、やり方の大雑把なまとめ

❤︎1、元画像をチェックする

1-1、解像度・サイズ・容量・カラーモードのチェック

1-2、画像の特性チェック(ファイル形式の特性)

❤︎2、画像の目的を明確にする

2-1、リンク画像

2-2、引き立て役画像

2-3、画像のための画像

❤︎3、縮小サイズ・表示左右幅の確認をする

❤︎4、拡大して見られることを想定する

❤︎5、解像度より縦横ピクセル数を意識する

❤︎6、縮小と圧縮は違う

❤︎7、特性に合わせて『補正&縮小&圧縮』する

7-1、補正

7-2、縮小

7-3、圧縮

❤︎8、各媒体で表示確認する

❤︎9、よくないようなら『表示サイズで調整』する

番外編
❤︎10、指定されたサイズに縮小しなければならない場合

❤︎11、最後に

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

❤︎0、やり方の大雑把なまとめ

==========================

  1. 元画像をチェックする(サイズ・解像度・ファイル形式・特性・カラー形式など)
  2. 画像の目的を明確にする
  3. どのくらいの縮小サイズにするのかを確認する
  4. 拡大して見られることを想定する
  5. 1・2・3・4の特性に合わせて『補正&縮小&圧縮』し、適正な『ファイル形式』にして『適正な圧縮』をする
  6. 各媒体で表示確認する
  7. よくないようなら『縮小サイズ』『表示サイズ調整』などを見直す

======================

で、『なるべく綺麗な画像で表示させたい』に対するキモは、

==================

  • 『縮小率』をなるべく最小にできるようにする
  • 『圧縮での劣化』を最小にできるもので圧縮する
  • 解像度より画像サイズ『ピクセル数』の横幅を意識する

=================

という感じです。。。。

あとはそのシュチュエーションに合わせてアレンジしてくのはその人の感性や画像の役割によっても変動するでしょうし、、、

具体的なやり方はその人によって違ってはくると思う、、、

その辺りを含め、以下は単に1つの例として読み進めていただければと思います。

ということで、以下に詳細です↓

❤︎1、元画像をチェックする

1-1、解像度・サイズ・容量・カラーモードのチェック

まずは元画像の情報をチェックして現状把握。。。

元画像の『解像度』『サイズ』『重さ』『カラーモード』のチェックをしてどう修正していけばいいかを想定する

その確認は、Macでも一発で確認できます

まず画像をクリックしてプレビューで表示させる

そして、ツール>インスペクタを表示>一般情報を開く↓

Mac インスペクタで画像情報確認

そうすると上図のように、

  • 書類のタイプ:画像ファイル形式
  • ファイルサイズ:ファイルの重さ/容量
  • イメージサイズ:画像の縦横のピクセル数
  • イメージのDPI:画像解像度
  • カラーモデル:画像のベースカラー形式

など、必要な情報を一気にまとめて確認できる

これはもちろん『Photoshop』でもできる

フォトショで画像を開く

開いただけで画像のカラーモードはタブの最後に表示されていて
他の情報は、

イメージ>画像解像度(ショートカット『option+command+I』)で全てわかる↓

フォトショで画像情報確認
  • 画像表示枠の上部タブの最後にカラーモードRGB/CMYKのどちらかが表示されている
  • 画像サイズ:画像の重さ/容量
  • 寸法:画像の縦横ピクセル数
  • 幅と高さ:ここをmm表示などにしておけば画像が何ミリ(センチ)四方かわかる
  • 解像度:画像の解像度

ファイル形式に関しては、PCで拡張子を表示させる設定にしておけば確認するまでもないと思うし、拡張子は他の作業をするにあたっても表示させておく方がわかりやすいので、表示設定していない方は、表示されるよう設定しておくことをお勧めしたいです。

表示設定の仕方は下記のページを参照ください↓

他、解像度やピクセル数などを確認するなどは色々な確認の仕方があるけれど、

Macの方、フォトショある方などは上記のいずれかでやると、今回必要な情報が全て一発でわかるのでこれが一番早いと思う。

また、Windowsの場合も、画像にカーソルを当てるだけでピクセル数やファイルサイズなどはすぐに表示され、わかる。

詳細は画像右クリック>プロパティあたりで確認できると思う。

確認できたら、

  • カラーモードそのままで良いか
  • 画像解像度は大きすぎないか
  • 画像サイズは大きすぎないか
  • 画像ファイルとして重すぎないか

などがわかるので、以降の作業に進みやすくなるかと思う

1-2、画像の特性チェック(ファイル形式の特性)

画像のファイル形式って色々ありますが、

その画像や、画像を使う目的によって、適正なファイル形式は違ってきます

なので、その元画像がどのファイル形式だったにせよ、特性はどう?というのを画像を見て判断する→必要があればファイル形式を変えた方が良い場合もある

  • グラデーション的表現か
  • ベタ塗り系表現か
  • 写真か
  • ロゴ系・図形系か

などなど。。。

ファイル形式の適正などについては下記のページを参照ください↓

ファイル形式の正しい選択も侮れません。。。

スポンサーリンク

❤︎2、画像の目的を明確にする

2-1、リンク画像

画像にもその目的・役割がありますよね。。。

例えばそれが、別ページへジャンプするための誘導画像である場合、

『リンク画像(バナー)』だったりする場合もあると思う。

その場合、

  • 目立つ必要がある
  • クリックしやすい大きさ、色調がいい
  • 高画質でありまくる必要はないけど劣化しすぎてるとマズイ

などなどがあり、それに沿った調整を考える必要がありますよね。。。

2-2、引き立て役画像

画像が何か他のコンテンツの引き立て役の場合、

  • 大きくする必要はない
  • 目立つ必要はない
  • 高画質である必要もあまりない

などかと思う。

そういった場合、必死で綺麗に縮小するには?って試行錯誤する必要もあまりないってことで、感覚で緩めに構えられるし、

また、ファイル容量もがっつり圧縮したいとこだと思う。

2-3、画像のための画像

画像が主役の場合、

  • なるべく大きめに表示
  • なるべく画質維持
  • 存在感が必要

などで、元画像からの縮小・圧縮にも気を使う必要がありますよね。。。

❤︎3、縮小サイズ・表示左右幅の確認をする

縮小の劣化を最小にするのは、縮小率を最小にできることが重要ですよね。。。

そのためには、実際に表示させるスペースはどのくらいなのか

を知る必要ありますよね…

  • 例えば自分のサイトのヘッダー画像だとすると、そのサイトのテンプレ・テーマのヘッダー画像の推奨サイズは?を確認する必要があったり、
  • サイト個別ページのアイキャッチ画像ならサイトコンテンツの幅はどのくらいか?を知る必要があったり、
  • サイドカラムに使うバナーならその幅

などなどを確認しておく必要がある

基本的にはその画像を使うサイトのテンプレ・テーマの構造というか、サイズなどを知っておいてからの方がうまくいきやすい。

細かく明確に確認するには、テーマファイルのstyle.cssなどで記述されている数値をチェックして認識しておくのが一番いい。

それが面倒だったり、よくわからない場合は、標準としてはどのくらいか程度でもいいかもしれない。。。

基準としては、サイトの左右幅は1000px前後かまたはそれより大きめが多いと思う

ヘッダー画像なら最近のワードプレステーマだとすると、テーマ上部の『カスタマイズ』から、ヘッダー画像の設定当たりに推奨サイズが書かれてると思うので、そのサイズを目処にできるのでわかりやすいかと思う↓

テーマカスタマイズ

で、ヘッダー画像推奨が例えば上記のように1000pxだった場合、サイトの左右幅も1000pxな場合が多いと思うので、見た目で記事コンテンツの左右幅・サイドカラムの左右幅なども何%くらか予測してpx数を出せないこともないと思う。

あくまでアバウトですが。。。

私が使ってる中で言えば、

  • サイト左右幅は1000px以上
  • サイドカラムは250〜300pxくらい
  • 記事コンテンツ幅は750〜850pxくらい

などが多い

私はカスタマイズでサイト自体の左右幅をMAX 1300px にしていたりのサイトもあるので、同じようにカスタマイズしている方はそこも考慮ですね…

明確な数値でわかる方がいいけれど、例えば自サイトで自分の勝手でいいなら、きっちりした数値にこだわりまくる必要もないかと思う。

なぜなら、

表示サイズは後で調整できるから。。。

なので大体の目安で緩めに(やや大きめ)縮小しておいて後で調整でもいいと思う。

それと、Web上の場合、『左右幅』を基準に考えた方がやりやすい。

なぜなら、

サイトの構造上・表示デバイスの構造上、縦幅は成り行きでも縮められることがほとんどないから。。。。

逆に左右幅はそうもいかない

サイトの幅・表示デバイスの幅は近年広くなってはきたけれど、それでも縦幅よりはどうしても限度が出てくる。。。

なので横幅を基準にした方がやりやすい。

表示させる場所の大まかな幅は何px(ピクセル)を把握して、画像をそれに近ずけて縮小すれば、よほどの誤差があって表示設定で大きく縮小しなければならない場合以外は、

画像自体を縮小しすぎて逆に拡大表示させるより、劣化の元にはなりにくいかと思う。

❤︎4、拡大して見られることを想定する

で、ここが『印刷物用の画像』と大きく違う点の1つで、

Web上の画像は、そのサイズより拡大して見ることができてしまう

印刷物用の場合、実寸が全てで、そこから拡大はできない。

せいぜい近付いて見るくらいしかできない。。。

でも、Web上の場合、それぞれのデバイスで引き延ばして見ることができてしまう。。

更に、各見る人の環境によって大きさも解像度も色合いも変わってしまう。。。

  • ディスプレイ解像度
  • 大きさ

など、環境によって変動してしまう

更に更に、大きさで言えば、クリックするとサイト幅ではなく画面いっぱいに表示されるようにもできる。

クリックして別窓で表示されるような設定をしているのにも関わらず、

大きく表示されないサイトや、逆に小さく表示されるサイトなんかも見かけたりしますが、その場合ズッコケたりしません?笑(いや面白くもあるけれど笑)

大きく見てみたくてクリックしてるのに大きくならない/逆に小さく表示される笑などはもったいないと思う。。。

そしてクリックしても別窓で表示させない設定もあるけれど、上記のようにそこからビヨ〜んって引き延ばして見ることができる。。。

それらも含めて、

  • 表示サイズよりやや大きめに縮小しておく
  • または実際のサイズより表示サイズは小さくしておく

なども必要に感じます。

つまりそれを想定して画像縮小サイズを考えるってこと。。。

なので、Web上で表示させている以上、実寸があってないようなものに近い。。。。

❤︎5、解像度より縦横ピクセル数を意識する

これも、印刷用の画像の扱いとは大きく違う点の1つかと思う。

上記のこととかぶりますが、印刷物ではPPI(画像解像度『画像の密度』)と、DPI(印刷解像度)が重要ですが、Web上の場合、解像度なんてなし崩しに近い感じ笑

見る側の環境、『ディスプレイ解像度』によって変わってしまう

ディスプレイ解像度は印刷用解像度である『密度』の意味ではなく、

単純に縦横ピクセル数のことで、それはそのデバイス(機器・モニター)の画面の大きさになどによって変動してしまうみたい….

同じ『ディスプレイ解像度』でも、画面が大きければ1ピクセルも大きくなってしまう

なので『画像自体の密度解像度』を高くしても低いものと違いはわからないということになってしまうようです。。。

その辺り、私には深い意味は理解できませんでした笑

ただ、『画像密度解像度』(ppi)が違っても、画面で表示させる分には違いが出ないということはやってみて実感しました…..

1000X1361px(300ppi)の画像↓

Rainbow Children 1000X1361px(300ppi)

1000x1361px(72ppi)の画像↓

Rainbow Children 1000x1361px(72ppi)

同じ縦横ピクセル数で、ppi(画像解像度)が違うのですが、Web上で表示させるとやはり違いがわかりません。。。。

そうすると、無意味に重い画像になるだけになってしまう、、

(※印刷用にA4サイズへ配置すると、300ppiと72ppiの画像解像度の違いは大きく出ます。)

そして、サイトでも、表示サイズの設定では、解像度でもなく、cm/mmでもなく、『px(ピクセル)での設定』になる

しかも、Web上では必須な画像圧縮後にはほとんどの場合『解像度は72』になってしまいます

なのでどちらにせよ、画像解像度を高く設定してもあまり意味がありません。

ということで、『縦横ピクセル数』を基準に縮小リサイズする。

スポンサーリンク

❤︎6、縮小と圧縮は違う

そして、Web用の場合、常につきまとうのが『ファイルの重さ』であり、『ファイルサイズの軽減』ですよね、、、、、

画像ファイルサイズが重ければサイト表示速度低下に直結し、せっかく頑張って美しい画像にしても、即離脱されて見てもらえない可能性を高めてしまう。。。

それでは意味がないので、

画像ファイルの重さを軽減、『圧縮』が必ずと言っていいほど必要になってきますよね。。。

Web上で扱う画像は常にこの『圧縮』を意識しなくてならない。。。

画像サイズが大きいものを縮小して小さくすればそれだけでもややファイルサイズは軽減できるけれど、それでは全然足りないのが現状かと思う。。。

縮小すれば圧縮になるかというとそれは全く違う

画像の大きさを変えずにファイルサイズを軽くする
切り捨ててもそんなに問題ない情報をカットして軽くするのが圧縮

そして、圧縮した画像を更に補正したりの手を加えると、せっかく圧縮したのにまた重くなってしまいます

つまり縮小して画像が完成してから更に圧縮して軽くする

というように、分けて考える必要があるかと思う。

画質劣化を最小限にして縮小するにも欠かせないのが『圧縮』

理想は、『劣化を最小』にして『がっつりファイルサイズを落とせる』圧縮

圧縮ツールは無数にありますよね、、、

みなさんお気に入りの圧縮ツールがあるかもしれません

私も色々試してきています

  • ワードプレスプラグインの『EWWW Image Optimizer 』
  • アプリの『JPEGmini』
  • アプリの『ImageOptim』
  • オンラインツール『Smart PNG and JPEG compression』
  • オンラインツール『Optimizilla』

などなどそのほか無数にプラグイン・ツールで試してきていますが、

最終的に、

  • 無料
  • 使いやすく制限もない
  • 画像が綺麗
  • 圧縮率が高い(軽くなる)

などの理由で一番かなと感じるのが、

オンラインツールの『Optimizilla』です

アプリの『ImageOptim』(appleストアにない方の)もかなり良く、私も併用して使っていますが、、画像が綺麗でかつより軽くなるのは『Optimizilla』!

その辺り使い方などについては下記のページ参照ください↓

とにかく、Web用画像は『圧縮』は必須で、そのやり方というか、どのツールを使うかによって綺麗に表示させられるかどうかが変わってきたりするので、これも重要だと思うです。。。

❤︎7、特性に合わせて『補正&縮小&圧縮』する

7-1、補正

まず、最初に確認した『カラーモード』もしも『CMYK』だったとすると、それは印刷用のカラーモードなので、『RGB』系に変換する必要がある。

別に『CMYK』のままでも表示はできるけど、CMYKのをWeb上に表示させると、なんだか違和感のある色になります。笑

特にCMYK表示用に補正済みのをそのままWeb上にアップすると、蛍光色気味な気持ち悪い違和感のある色で表示されてしまう

更に、もしその画像の特性が、PNG形式の方が合っていて、PNG形式にするなら、CMYKはサポートされていないので、RGBに変換しないとPNG形式にもできなくなります。。。

なので、あまりない事かと思うけれど、もしもCMYKならRGBに変換しておく方が良いでしょうう。

で、Web上の画像の場合、印刷物用とは違い、『濃度オーバー』を気にしなくて良いという利点があります。

思う存分その画像の適正に合わせて補正・調整ができます。

ただもちろんモニターによって発色は全然変わってしまうので、自分のモニターでは発色がバッチりでも、他の媒体からならなんだかおかしく見えるということも多いにあり得ます。

それらを想定して行き過ぎないよう基本バランス(元のバランス)は崩さないようやる必要はある。

フォトショの場合、カラー設定をやや標準に近づけた状態で画像を見ることができるので、PCの単なるビュアーで見て調整するよりは良いと思う。

フォトショカラー設定に関しては下記の内容を参照ください↓

で、ある程度ちゃんとやりたいのであれば、モニター自体良いものにして『キャリブレーション』という専門の機器を使って設定するのがベストかと思う。。。

私も社員時代使わせていただき、設定の仕方を習い、設定してみたことがありますが、かなり面倒でした。。。。

でも、

カラー調整がメイン作業で必須の方なら必要かと思う。。。。

  • カラーモードの確認(CMYKなら RGBに変換)
  • 画像の補正(汚れなどの除去・色補正・レベル補正・ピント補正・レタッチ等)

などを済ませた地点で、『適正のファイル形式』に画質は高品質のままで一度保存してバックアップもとっておくといいと思います。

7-2、縮小

ここでやっと縮小です 笑

縮小は実際に表示させるサイズより少し大きめに設定しておく方が良いかと思う。

理由は上記の、

❤︎4、拡大して見られることを想定する

に書いてある通りです。。。

縮小自体は、フォトショの『再サンプル』を使っって画像の特性にあった項目を選択して、

mm/cm/解像度などではなく、『縦横ピクセル数』を指定してやる。

再サンプルでの縮小の仕方は下記のページを参照ください↓

画像縮小での劣化を最小限にするやりかたとは?【印刷用編】
>❤︎
5、『フォトショ 再サンプル』の種類とは?(使い分ける)

基本的に縮小の場合は『自動』『バイキュービック法-シャープ(縮小)』で良いかと思いますが、色々試してみてもいいかもしれません。。。

上記にも書きましたが、解像度は圧縮すると72になるので、とりあえず置いといて縦横ピクセル数を設定して縮小です。

また、Web用画像の場合、基準になるのはmm/cmでもなく『ピクセル数』ということも頭に入れておきたい。

7-3、圧縮

上記の

❤︎6、縮小と圧縮は違う にすでに書きましたが、

圧縮ツールを使って最大限圧縮して最大限劣化を最小にします

❤︎8、各媒体で表示確認する

画像縮小ができたら、実際にWeb上にアップして表示サイズを設定して確認します。

その場合、自分で確認できる媒体全てで確認した方が良いです。

例えば、

  • MacBook15インチのPC、Chrome・safariでの表示
  • MacBook13インチのPC、Chrome・safariでの表示
  • iphone8、Chrome・safariでの表示
  • タブレット、Chrome・safariでの表示
  • Windows デスクトップ、Chrome・edgeでの表示
  • 他のスマホでの表示

などなど、できるだけ多くの媒体で表示確認してそれぞれどう映るのか見ていけるとどれだけ違うのかもわかるし、それで良いかの判断もしやすくなる。。。

❤︎9、よくないようなら『表示サイズで調整』する

で、結果、満足できないようならやはり見直して改善していく。

その際、表示サイズの調整でいくらか見やすく綺麗になる場合もあるのでそれで済むならそれで良いでしょうし、

『縮小率を最小』にして『表示サイズで調整』してみる

それでもダメなら最初から見直していくしかないですよね….

番外編
❤︎10、指定されたサイズに縮小しなければならない場合

もし、その指定されたサイズがかなり小さく、しかも使う素材も決まっていて、その素材からの縮小率がすごく大きければ、バックり劣化しますよね 笑

これは避けられないかなと….

なので、そのことを説明し、素材自体それ用に準備し直した方が良い旨を伝えるべきと思う。

それが無理というのであれば、劣化してもしょうがないということだということも伝えるべき。。。

で、基本的には指定されたサイズの画像を作る場合、それ用にそのサイズで表示するのに適正な大きさのものを一から作る方が圧倒的に綺麗にできますよね。。

なので元素材がある程度あってもそこから作り直すくらいの感覚で望んだ方が良いかなと…

少しの縮小で済むのなら、上記のやり方で良いかと思うですが、、、

❤︎11、最後に

上記に書いた内容は、踏まえた上でやるのと全く知らないでやるのとでは結構違うと思うので、1つのやり方の例として捉えていただければと思う。

ただ、

やはりその環境や適正・その人によってやり方は大きく変わってくるかとも思う。

縮小作業での着地速度アップと、画像画質が最悪なことにならないためには、どちらにしても、

  • 色々試してみる
  • その上で基本的な部分は一定にする
  • 順序良く習慣ずける
  • 例外もある
  • 特性に合わせての調整は変化する
  • やり方は時代と共に当然進化して行くべき

などなど、ま、少し大げさですが笑…頭の片隅に入れておく必要があるかなと思う。

長くなってしまいましたが、

=======================

  • 『縮小率』をなるべく最小にできるようにする
  • 『圧縮での劣化』を最小にできるもので圧縮する
  • 解像度より画像サイズ『ピクセル数』の横幅を意識する

=======================

やっぱりこれがキモだと思います・・・

以上現場からお伝えしました。。。

ってことで楽しいクリエイトあれ!

しゃらんるあぁあああああああああ❤︎

(-v-)b

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤色々やり散らかしております、宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

Twitter-REACH_rh Facebook-REACH_rh G+ -REACH_rh Insta-REACH_rh note-REACH_rh

YouTube-REACH_rh SoundCloud-REACH_rh PIXIV-REACH_rh CREATORS BANK_REACH_rh

関連コンテンツ

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

7 + fourteen =