画像の圧縮について

Date: 2015.11.25
All Web

まだまだ修正すべきところはたくさんあるのですが、とりあえず開始したこのブログ。
先日友人に見てもらったところ「スマホで見てたら落ちる」と言われてしまいました。

ぐぬぬ。

というのも写真が主なコンテンツになると思ってなるべく高解像度の状態でサーバにアップロードしていたのだ。
というわけで今後、エントリーで扱う写真をどう処理するか考えてみたいと思います。

落ちる理由

• ページ全体のファイルサイズが許容値を超えている
• 画像1枚当たりのファイルサイズが許容値を超えている
• 画像の解像度が表示できる容量を超えている

とまぁ真っ先に考えられるのはこのあたりでしょう。

つまり画像の画素数とJPEGの圧縮率を下げればいいだけの話・・・なのかな。だよね。

普段の撮影はJPEGのファインまたはエクストラファインで撮ることが多くて、エクストラファインだと撮って出しの状態で8メガくらいになることが多いです。
ちなみに画素数はα99で6000px×4000pxです。

あんまりやりたくないのだけれど今後は実験的にCamera Rawで短辺1200pxで書き出して、そのあとJPEGを圧縮するフローにしてみようと思います。
ちなみに短辺1200pxにした理由はこのサイトのmax幅が1060pxで作ってるから。今後モニタの解像度事情が変わることも考慮しなければならないし、縦画像でも使えるようにということを考えて1200pxにしてみました。

当記事で全7点ほど写真を掲載しますが、撮って出しの時は19メガだったのが短辺1200pxにすることで2メガになってました。
おお、もはやいい感じ。

このあとJPEG圧縮するわけですが

を使うことにします。

Optimizillaを選んだ理由としては
まとめてアップロードできて、まとめてダウンロードできること。
1ファイル当たりのアップロード制限がなさそうなこと。
という理由です。

さて、早速7点の画像をOptimizillaで圧縮したところ、なんと総容量が1メガになりました。
一般的に考えればまだまだ重いのはもちろんそうなのだけれど、まぁ許容範囲でしょ。と思いました。
というわけでしばらく運用してみて、何か問題があったらまた別の方法を考えるとします。

作例

さあスマホでどう見えるかな

追記

1200が思いのほか快適だったので、やはり短辺1420px程度まで上げることにします。

• Newer Post
• Older Post

Comment

Recommended

Warning: count(): Parameter must be an array or an object that implements Countable in /home/kokomoe/www/photolog/wp-includes/media.php on line 1176

秋葉原の刀削麺 唐家

パクチー好きならおすすめの刀削麺 唐家さん。

Warning: count(): Parameter must be an array or an object that implements Countable in /home/kokomoe/www/photolog/wp-includes/media.php on line 1176

木場のカレー料理 カマルプール

孤独のグルメSeason4 第6話で紹介された木場のカレー屋さんに行ってみました。

Warning: count(): Parameter must be an array or an object that implements Countable in /home/kokomoe/www/photolog/wp-includes/media.php on line 1176

憧れのレンズを買った日

2015年3月8日念願のCarl Zeissデビューを果たした。
ずっとずっと憧れていたレンズだった。

Warning: count(): Parameter must be an array or an object that implements Countable in /home/kokomoe/www/photolog/wp-includes/media.php on line 1176

秋の小石川後楽園

小石川後楽園に行ってきました。
この庭園、自転車置き場もあるんですね。