画像

WEB制作

大企業のWebサイトは画像が1枚2MBとか頭おかしいくらいに重たい理由

Webサイト制作業界的な裏話になるけれど、名だたるグルーバル大企業とかグローバル(2回目)な大組織とかのwebサイトは、大体の場合において、しょうもないストックフォトのイメージ画像なのに、画像が1枚あたり1MBとか2MBとか、俺の感覚からすると理解不能なほどに重たいという事象についてである。

結論から言うと、俺には理解しがたいがグルーバル大企業とかのWebサイトには、エコ感覚や庶民の感覚、SEO対策などが重要視されていないからである。

レギュレーションやガイドラインで全ての画像がPNG

Webデザインの入門書とか学校的なところでは、写真やイラストは容量的にエコなjpegで、ここぞという図表とかロゴはPNGでみたいに習うと思う。

最近だとロゴとかはSVGも普通に使われているけれど、一時期はPhotoshopが対応していたけれど、結局使う人が少ないし不具合があるからという真っ当な理由で、2025年の現時点の最新バージョンのPhotoshopでは、レガシー機能扱いになっているのが笑えるというのは余談。

話を戻すと、庶民感覚がないグローバル大企業とかでは、月あたり3GGとか5GBしか通信できない格安SIMを使っている人とかは眼中にないため、画質劣化を一切させないために、しょうもないイメージ画像ですら全てPNGで書き出すように決まっているのである。

グローバル大企業では、やむを得ずjpegで書き出す時は最高画質設定にしないとならないという大企業ルールが存在しているのである。

SEO対策や庶民感覚を考えると画像サイズは当然小さい方が良い

いくら常時接続の光回線が一般的になっているとは言え、それは自宅やオフィス内での話。

1円でも通信料金を抑えたいという自分みたいに格安SIMユーザーや、通信状態の悪い環境も多々存在していることを考えると、しょうもない画像が1枚2MBとかあり得ないが、グローバル大企業には関係がない。

サイトの読み込み速度はSEOに関わるが、画像が重いために読み込み速度が遅くなったとしても、会社名や組織名で検索してくるユーザーが多いから、画像を最適化することはあまりというか、全く考えないのであろう。

その証左はしょうもないイメージ画像も含めて、全ての画像をPNGにしろと全世界で統一されたルールになっているからである。

中小ベンチャーとかでも時々重たい画像の会社もある

ブラック中小ベンチャーとかで、内製でWebサイトを作っている場合、人の出入りが激しかったり、まともなレギュレーションがないために、個人の判断、もしくは判断能力がないために、しょうもない画像なのに無駄に重たい画像になっている場合も多々ある。

プラグラムもできる理系っぽい若手エンジニアが、勿体ないことに2か月も勉強すれば誰でも書けるレベルのHTMLをコーディングしてたりするのは、ブラック中小ベンチャーあるあるだ。

エンジニアに偏見を持っているわけではないが、PHPやJSがパリバリ書けたり、コマンドラインでGitが使えるけれど、Photoshopで画像リサイズや適切な画像書き出しは出来ないという人に仕事で結構関わったことがある。

実際問題、中小企業は大企業みたいにSEOを考えなくてよいわけではないから、少しでも画像を軽くするなどして読み込み速度を早めないとならないけれど、エンジニア中心にWebサイトを作っていると画像の最適化まで頭が回らないのだなと、某ブラック中小(グループとしては有名大手)でWebの仕事をしていた時には思ったものである。

まぁ、あらゆる部分がブラックで滅亡して欲しかったから知恵は貸してやらなかったけれど(笑)。ブラック企業ほど簡単に滅亡しないのが世の中の困った部分だったりするけどね。

余談 零細ブラック企業では100KBでも画像が重たいと怒られた

正確に何KBだったかわからないが、すぐ辞めたけど、あるギフト系の商材を扱っている内製の仕事でWebデザインをやっていた時の話。

先輩だか何だかのクソが、画像が重たいなぁとかケチ付けられたのをほ覚えている。

社員7人くらいの零細で、社長が2時間説教するような会社。社長室がオフィスフロアの3分の1を占めているのが笑えるけれど、グローバル大企業では画像1枚2MBが標準な一方、零細ブラックでは数十KBだったりと、Web制作業界も様々なのだ。

俺は絶対に働きたくないけれど、零細から大企業まで色々なクライアントを持っているブラック制作会社で働いている人は、よくご存じな現象なのかもしれないけれど、意外と教科書には載っている業界裏話な気がする。

PC & モバイル

【object-fit】画像の縦横比をCSSだけで固定する手軽な方法

レスポンシブ時代の昨今、ワンソースでPCやタブレット、スマホなど画面サイズが異なる様々なデバイスに対応させることに翻弄されている人も少なくないだろう。

WordPressなどのCMSを使っていると、一見、完璧そうに思えるテーマでもデバイスによっては画像が「びょ~~ん」と伸び縮みしてしまうことがある。この手の解決手法は根が深い場合は本当に苦労するし、当たり前のことが当たり前にできていないのを当たり前にするだけ、という心身が疲れ果てる作業なのである。

そんな場合に一発解決できるかも知れないCSSを紹介する。なお、サイトの構造によっては、もっと色々やらないと解決できない場合もあるからご承知おきを。

古典的(?)手法

該当の歪んでしまったCSSに下記のコードを当てる。大抵はこれでうまく行くか、入り組んでいる場合は無理なこともある。

width: 100%;
height: auto;

最近(?)の手法

古めのブラウザやIEなどでは対応しない場合もあるが、便利なコードなので知っておくと良い。

object-fit

詳しくはリンク先で確認して欲しいが(なげやり)、親要素にはめ込むために存在しているプロパティ。アスペクト比(縦横比)を維持したままフィットさせるとかができる。

古典的手法で駄目な場合でも、これで一発解決できる場合もあるから、心身疲れ果てる前にお試しあれ。

WEB制作

【画像容量削減】jpegのロスレス圧縮のフリーソフト「Voralent Antelope」は優秀!!

jpeg画像のファイル容量を画質の劣化なく下げる方法について。ロスレス圧縮とも言う。

Web用の3大画像形式

わかる人は読み飛ばして構わないが、Webサイトで使う画像のファイル形式は大きく3つある。

jpeg

非可逆圧縮されるので、圧縮後の画像は多少劣化する。ファイル容量は小さくなる一方で、圧縮率を高めれば細かい部分が潰れたり、ノイズっぽくなる。写真やイラストなどで諧調のあるカラー画像に適している。Webで広く使われる形式。

gif

初期のネット界ではよく使われていたが、256色という制限があるのが特徴で、写真など諧調のあるものには通常使われない。アイコンやバナー、シンプルな諧調のイラストに使われる。ブラウザの機能のみでパラパラ漫画方式のアニメーションができるので、近年は再び注目される。透明部分を持てる。

png

可逆圧縮で画質が劣化しないので、写真にもイラストにも万能に使えるが、ややファイルサイズは大きくなるのがネック。高画質で表示させたい場合や、「なんとなく」使われる場合がある。透明部分を持てる。

jpegのロスレス圧縮とは

上記のように、jpegが非可逆圧縮というのはWeb制作者なら常識だろう。いや、デジタル画像の知識が豊富な人ほど、jpegでロスレス圧縮と言われるとハテナマークが浮かぶはず。

ここでいうロスレス圧縮とは、画質とは関係のないExifなどの情報を削除したり、データの並びなどを最適化することによってファイル容量を下げる手法である。

一般にイメージする“ロスレス圧縮”というよりは、画像表示に関係のないデータを削除+最適化してファイル容量を下げると言った方が適切かもしれない。

初心者向けの解説サイトで、この手のツールを使って「見た感じ、画質の劣化は気にならない程度でした」と書かれていることがあるが、目に見えないデータしかいじっていんいないので。画質が劣化したら設定がおかしいはずなので注意すること。

フリーソフトなども色々ある

Web上のオンラインサービスや、WordPress用のプラグインなどもあるが、今回取り上げるのはローカルにインストール可能な下記のソフト。ローカルで動くソフトの方が結局は万能に使えるので一つ知っておくと良いと思う。

無料で利用できるし、ドラッグして画像を複数追加して、容量を削減したものを指定のファルダに書き出す・・・といった現実でありがちな流れが簡単にできたりして、使い勝手が良いと感じた。

Voralent Antelope
2018年10月現在、公式サイトからうまくダウンロードできない場合があるようなので、その場合は窓の杜などの配布サイトからダウンロードしよう。

画質劣化を伴わないロスレス圧縮でも、画像によるが10%~30%程度も容量を圧縮することができる。さらに容量を減らしたい場合は、非可逆圧縮のオプションも使用することができる。

jpegの画質はソフトによって様々

元ファイルであるjpegを書き出した時のソフトが使っているエンジンにもよるが、CS6以前の古いバージョンのPhotoshop(Web用に保存、を含む)では、そのエンジンが古いこともあってファイル容量が大きくなりがち。

CreativeCloudではさすがに今どきのエンジンが採用されて、ファイル容量を抑えつつ画質を確保できるのだが、過去に古いバージョンのPhotoshopで書き出したjpegの容量を減らしたい、という用途にも「Voralent Antelope」は役に立つだろう。

ブロードバンドの時代でもファイル容量は大事

以前に比べるとインターネット環境は非常に高速になった。

しかし、モバイルファーストな時代だけあり、スマホユーザーの利便性を考えた時に画像のファイル容量というのは、重要な検討課題となる。読み込みの遅いサイトはSEO評価も下がり、表示が遅いがためにユーザーを逃すことにもなりかねないだろう。

最近人気の格安SIMでは1カ月あたりの通信容量別に料金プランが決められていることもあり、画像などのファイル容量が小さいことはユーザーの気持ちを考えても大切なことだ。