画像

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カ月あたりの通信容量別に料金プランが決められていることもあり、画像などのファイル容量が小さいことはユーザーの気持ちを考えても大切なことだ。