ホーム » 画像は全部WebPでやりましょう あ!ロゴだけはSVGだわ

画像は全部WebPでやりましょう あ!ロゴだけはSVGだわ

by MOMO

白い背景にダークグレーのフォントで文章が書かれているだけで十分に美しいよねって以前の記事にも書きました。行間が異常に空きすぎていたりするとスクロールが多くなるし私はそれだけで面倒くさくなっちゃう。
もちろんCSSの行間設定(line-height)は大事でしょう。文章を追って目が右から左に動くときにまた同じ行を読んじゃって損した気分にならないような行間設定が大事ね。それだけあれば他はやり過ぎないようにはしたい…
でも、画像を使わないでBlogをやることってほぼないでしょう。

百聞だってやったことをキャプチャにとって記録している記事を書くし、それが自分のためでもあるのよね。今日はそんなデザイン的にも重要である画像の話をしましょう。

10年かけてやっとSafariが対応して安心して使えるようになったね

何をやりたいのか百聞の始まりで書いているので併せてこちらの記事もどうぞ。

『百聞』でやりたいこと – 基本は記事を読んでいただくこと

快適にWebが一層進歩していけるようにGoogleがファイルサイズを減らしても劣化が少ない画像のフォーマットを発表したのが2010年9月。当然発表されただけではそんなフォーマットに変換できるツールもないので、空想だけでしたけどワクワクしたのを覚えてます。
ブラウザChromeの対応はすごく早くて搭載されたのは発表とほぼ変わらなかったはず。自分たちがWebを率先していくという意思の表れのようでしたよね。

知識もスキルのうち積極的に新しい技術を学んでいきたい

Webサイトをデザインするときにアメリカでは最近はChromeで正しく表示されればOKなんだとか。Microsoft社のIEやEdgeでは多少表示が崩れてもそこまで対応させる高額のコーディング代を払うよりいいという考えみたい。ただ、スマホの中では圧倒的なシェアのiPhoneのiOSのSafariに対応しないでいいなかしら? どうやらこれもNYの人たちはお気に入りやパスワードなどの同期ができるiOS対応のChromeを使うのが当たり前のようです。私もiPhoneはChromeだけど、我が家の者でもわざわざChromeを入れないでそのままSafariで使ってるわ。日本がブラウザをIEやEdgeの使用率が欧米に比べて多いのはそういうツールのカスタマイズに時間をかけないからなのかも。
だから当然ですけどWebPはなかなかお仕事でお勧めしてこれませんでしたよ。でもね、2020年に遅ればせながらSafariはデスクトップとiOSともにWebP対応になったんです。

WebPの実力はすごい!ほぼ6割はサイズダウンしてくれるの

JPGは写真などには有効なフォーマットでした。PNGは数の少ないイラストやロゴなど背景を透過させることもできるので使い分けてましたね。GIFはアニメーションも作れるのでたまに…
バナー制作などに使ったかな。

さて、大きな美しい画像をポートフォリオなどとして見せるには多少のロード時間はかかってもいいと思ってますよ。ただ、サムネイル化しても数が多くなればやっぱりPageSpeed Insightsで遅いよって叱られる。
少しでも速くしたいならこれは絶対的にWebPがお勧めです。
サイズはガッツリダウンしても画像の劣化は気になるほどではないし、良いことのほうが多いのでその実力をご紹介しましょうか。

サンプル画像でその差をご紹介しましょう

WebP-ファイルサイズ60kb JPGJpg- ファイルサイズ501kb

今回アイキャッチに使った画像です。JPGの元画像をWordPressのロゴを入れる加工をしてそのときに10%ほどの解像度を落としてますけど、まだまだ500kbを超えるサイズ。

それをWebPに自分で変換してます。私の使うツールはこのときにもパーセント単位で劣化選択できるんで今回は80%で指定。するとどうですかこのサイズの差!
そして拡大してそのサイズの劣化を感じますか? 自分で変換するのもとても簡単なんです。
変換ツールやWebサービスもお勧めできるものがもう揃ってますので次回ご紹介しましょうね。

その次にはAVIFというフォーマットも控えてます

やはり新しい良い技術は積極的に取り入れることで大きな見返りも得られます。それはまず、情報を知ることからの始まりですね。

すでにChromeはこのAVIFという画像フォーマットも表示されるようになってます。
FireFoxなども速いですね。今度もまだSafariは対応していません。変換ツールはもうWebサービスでありますよね。これまた驚きのサイズ縮小でWebPの上をいく凄さです。
これが普及するかどうか…WebPのように10年もかかるのは残念すぎますけどね、Safariが搭載するかどうかがやっぱりこのフォーマットの普及の鍵になることは間違いなさそう。

では次の後半で便利なツールご紹介しましょうね。

You may also like