サイトのヘッダー／背景画像を小さくリサイズするアプリと高く圧縮するWebサービスで最大限に軽量化して作成する

サイトの表示速度を考えると画像が最も容量が大きくて支障を来し兼ねない。一枚で他の全てを平気で上回ったりもする。影響が非常に大きいので、載せるならば予め軽量化しておくには越さない。大きさを小さくリサイズしたり、データを高く圧縮したりする方法があってそうしたアプリやWebサービスを使うと良いと思う。ただし難しいのは画質だ。写真でも何でも画像は小さくリサイズしたり、高く圧縮したりすればするほどに画質を落とし易くてサイトのデザインが崩れて来てしまう。嘆かざるを得なくなるんだ。

画像を最大限に軽量化するためにリサイズと圧縮の二つの方法を組み合わせる
一回目の編集：アプリのPhotoshop Expressでリサイズする
二回目の編集：WebサービスのTinyJPGで圧縮する

ホームページやブログで画像を載せる際には画質と容量の鬩ぎ合いが避けられなくて絶えず、最高のバランスを模索するように画像を望み通りに作成しなくてはならないと考える。コンテンツの中心の画像は画質を優先して幾らか重くしても喜ばしいのではないか。いつも横幅1600～2048pxで作成してCSSで画面幅に合わせて表示している。パソコンならば二倍、スマホならば四倍くらいの大きさなので、それだけ容量は膨らんでいるし、リサイズして削る余地は十分に残されているけど、しかし画質を優先して載せたいわけなんだ。一般的には横幅1024pxくらいが良いかも知れない。ソーシャルメディアなどで多く見かける画像のサイズだ。画質と容量のバランスが適度に取れているように感じる。容量を優先すれば横幅480pxくらいまで小さくすると画質の低下は目立ち始めるにしても相当に速くてサイトを閲覧するのは快適そのものだ。メインの画像は画質を優先するけれども気がかりなのはヘッダー／背景画像をどうするべきか。訪問者が必ずしも注目するわけではないから反対に容量を減らして表示速度を上げておくのが適切だろう。ただし色々と試した結果としてコンテンツの中心の高画質の画像から余りかけ離れた劣化を認めるわけには行かなかった。サイト全体のバランスが崩れてしまうのは頂けないので、小さくリサイズするにしても結局は普段の画質優先の下限の横幅1600pxは欲しくなってしまった。画像を最大限に軽量化するためにリサイズと圧縮の二つの方法を組み合わせる画像の容量を減らすためには小さくリサイズするのと高く圧縮するという二つの方法があるけれども画質優先の大きめのサイズで最大限に軽くしようと考えて相応しいと見付け出して使ったのがアプリのPhotoshop ExpressとWebサービスのTinyJPGだった。前者で画質を下げながら小さくリサイズして後者で容量を高く圧縮するのが非常に効果的だった。どちらか一つだけでも画像を大きく軽量化できるけれども組み合わせるとさらに良いと分かった。写真などのjpegファイルの画像は保存を繰り返すとそれだけでも劣化してしまうので、二回、編集する（カメラがjpegファイルを書き出した分を合わせれば三回になってしまう）のは気が引けるにせよ、見て耐えられる水準は保たれているから大丈夫だと思う。些細な日常の背景画像のカーテン

些細な日常の背景画像を横幅1620px（×1440px）で容量208KBで作成した。できれば容量100KB前後まで落としたかったけれども画質優先で横幅1600px以上の写真では難しそうだ。もうちょっと小さくすると逆に圧縮しても容量が下がり難くなるから100KB前後まで落とすにはリサイズを1000pxくらいの横幅にしなくてはならなくて望み通りの画質から遠ざかり過ぎて無理だと手を引いた。一回目の編集：アプリのPhotoshop Expressでリサイズする Photoshop Expressのトリミング

トリミング｜Photoshop Express｜Adobe

画像はリサイズで小さくするだけでも軽量化できるけれどもツールによっては画質調節も可能なんだ。Photoshop Expressならば環境設定で最低の85%まで画質を下げるとさらに大きく画像の容量を削減できる。編集画面のトリミングからでオリジナルよりも小さくリサイズして書き出すと完成する。様々な画面比と「カスタム」では数値入力で正確な切り出りも可能だから利便性は高い。二回目の編集：WebサービスのTinyJPGで圧縮する TinyJPGのトップページ

トップページ｜TinyJPG

デバイスの画像ファイルをjpeg（jpg）かpngでも大丈夫だけれども「Drop your .png or .jpg files here!」（ここにpngかjpgファイルを落とす）からアップロードすると自動的に圧縮されて暫く待つと「Finished」（完了）が表示されて「download」（ダウンロード）から取り込める。画質が安定していて圧縮率も非常に高いので、TinyJPGが抜きん出て良いと思う。画像の圧縮ツールは上手く行かなくてサイズが狂ったり、色味が乱れたりする場合も全くないわけではないから画質が安定していると非常に助かる。TinyJPGは日本語に対応してないけれどもサイト全体が画像の圧縮ツールにシンプルに特化しているから使い易さも申し分ない。

コメント