iOSやMacがWebp画像形式に対応

※この記事は弊社ホームページリニューアル前のページをベースに執筆されています。
※長くなってしまったので要約しました


3行でまとめると…。

  1. webpという次世代画像でデータ転送量が軽量に。
  2. iPhoneがwebpにようやく対応することで日本で次世代画像が普及加速する
  3. ワードプレスでは一括でwebpに対応可能。やっぱりwordpressでホームページ制作がおすすめ

iPhoneやiPadに利用されているOSの”iOS”、”iPadOS”ですが、バージョン14(14.x.x)から遂に次世代画像形式と呼ばれる“webp”形式の画像に対応とのアナウンスが2020年にありました。また、Macintosh(マック)のPCの次のバージョンのOSでもSafariで.webpに対応するとの発表がありました。


これらの対応によって、データ通信量の削減につながりウェブページ閲覧の高速化が期待できるため、画期的なアップデート内容といっていいと思います。

画像形式、画像フォーマットについて

現在使われている画像のフォーマットには、いくつか代表的な形式があります。
ファイルの形式というのは、たとえば、

“卒業式の集合写真.jpg“とか、”ホームページロゴ.png

などの、”.”のあとに続く文字列のことと考えてください。
この文字列のことを”拡張子”とも呼びます。

ウェブ制作では”jpg”,”gif”,”png”が昔から使われています。

画像形式の特徴について簡単に説明すると、

  • jpeg形式の画像について
    写真などの解像度の高い、使用する色が多いデータで使われる。
    (デジカメなどではRAWフォーマットの次に選ばれる形式)
    透過処理ができないので、必要に応じてpng形式の画像との併用が必要。
  • pngについて
    透過処理が可能なので、ウェブページのロゴデータなどに使う。
    利用するカラーが増えるとデータが重くなるため、適切なホームページ制作においては場合に応じて最適化する必要がある。
    データは重くなりがち。
  • gifについて
    最大256色しか使えない、シンプルな画像保存形式。色の少ないロゴデータや単色のイラストの保存に適しています。
    また、動画アニメーション化することも可能です。非常に軽量にデータを抑えることが可能です。

主に、この3種類の画像形式であれば現行のウェブブラウザは画像を表示することができます。

他にもSVG画像などもありますが、機会があれば、より詳しい画像フォーマットの解説をしようと思います。

ホームページが重くなる要因とは?

ホームページの表示速度については、もたもたした動作をするウェブサイトよりもキビキビ動くウェブサイトのほうがユーザーに喜ばれるのは言うまでもないと思います。

では、キビキビしたウェブサイトと、表示がもたもたしたウェブサイトはどう違いがあるのでしょうか?

とても簡単に要因を挙げると、下記のような要因が挙げられます。

  • プログラムが単純に冗長である
  • 画像のデータ量が非常に大きい
  • ウェブサイトが呼び出すデータベースの反応が遅い、データベースに対してのサーバ性能が悪い
  • JavascriptによるJavascriptの負担の最適化ができていない
  • データの通信順が適切ではない。

次世代画像の導入は、画像のデータ量を削減することでページ表示の最適化が可能になるわけです。

しかしながら、googleやApple,Microsoftなど、主要ブラウザを開発する企業がそれぞれに新しい規格をつくっていたので統一ができず、ウェブサイトへの実装がなかなかできずにいました。

(こういった規格の統一問題はインターネット黎明期から様々な分野で続いているので珍しいことではありません)

特に日本では、iphoneからのデータ転送量が多いので、googleとの規格統一が望まれていました。

Webp画像の特徴

  • データ容量が軽い
    公には30%程度の軽量化といわれていますが、私が試した所、pngでは半分以下、jpeg画像では3~9割以上のデータ量削減に成功しています。
  • 透過処理も可能。
  • アニメーション処理も可能

となっています。主にGoogleが企画したデータ形式なのですが上述したようにappleが対応をしてこなかったために、なかなか普及できない状況が続いていました。

データ転送量が軽量になるために、モバイル端末でスピード制限がかかっているような状態でも、安定して画像が表示できるという強みがあります。

ワードプレスでは自動で次世代画像に置換が可能

私が制作するホームページでは、とくに軽量に表示が求められるウェブサイトではページのコーディングをゼロから作成し、
無駄なプログラムやデータを削ることで高速表示し、画像フォーマットについてはOSによって出し分けの処理をしていました。

かなり手間のかかる処理だったのですが、ワードプレスでは次世代画像の出し分けを一括で行う機能が備わっています。

そこまでホームページ制作に予算をかけず、一定のパフォーマンスを出すのであれば、ワードプレスが一番おすすめです。

0 返信

返信を残す

Want to join the discussion?
Feel free to contribute!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です