タグ #webp
「webp」タグの記事一覧です。
WebP時代を全自動で先取りする PHPWebP Concept をオープンソースとして公開
既存のサイトに置くだけで WebP 対応を自動化する PHPWebP Concept をオープンソースで公開しました。95%以上のブラウザが WebP に対応した今の状況もあわせて説明します。
透過=即PNGはもう古い。写真っぽい透過PNGを劇的に軽量化する無料ツールと3つのテクニック
透過が必要ならPNG、という判断はもう古いという話です。写真のような透過画像を劇的に軽くする3つの手法と、無料で試せるツールを紹介します。
「画像できるだけ軽くして！」曖昧な指示はもうやめよう・具体的な基準のために統計的に考える画像の軽さ
「画像をできるだけ軽くして」という曖昧な指示をやめるための基準を提案します。日本の上位500サイト約70万画像を調べ、100×100ピクセルあたりの重さで測る方法です。
【保存版】知らないと画質が落ちるWebP変換おすすめパラメーター設定例 JPEG/PNG編
JPEGやPNGを WebP に変換するときの推奨パラメーター設定をまとめました。既定のまま使うと画質が落ちることがあります。形式別に、まず何を指定すべきかを示します。
WebP変換を乗りこなそう！ WebPパラメーターナビを公開。cwebpコマンドのパラメーターの効果を視覚的に比較
cwebp コマンドの各パラメーターがWebP変換にどう効くかを、視覚的に比較できる「WebPパラメーターナビ」を公開しました。画質とファイルサイズを並べて確認できます。
iOS 14 ベータでWebP対応を確認。picture要素やAcceptヘッダは今まで通りか
iOS 14 パブリックベータで Safari の WebP 対応を確認しました。picture 要素と Accept ヘッダによる出し分けが、これまで通り機能するかも検証しています。
WebPが次世代画像フォーマット天下統一！ Safari 14でついにiPhoneもWebP対応・導入加速は間違いなし
Safari 14 で iPhone もついに WebP に対応します。長く続いた次世代画像フォーマットの競争に区切りがつき、導入が加速すると見られる理由を説明します。
WebP公式のPhotoshopプラグイン WebPShop登場
WebP開発チームによる公式のPhotoshopプラグイン WebPShop が公開されました。インストール手順と、Photoshop で WebP を開いて保存するまでを試しています。
WebPウザいという方に贈るChromeでWebPをブロックする方法 ※ただし完全ではない
Chrome拡張 ModHeader で Accept ヘッダを書き換え、WebP の配信をブロックする方法です。仕組みと、この方法では完全には防げない理由も説明します。
WebPの利用事例: 新R25 (r25.jp)
新R25 が全面的に WebP を使っています。配信の仕組みを HTTPヘッダから推測しつつ、HTMLの最小化など他のパフォーマンス対策も読み取ります。
Safari 12.1でも残念ながらWebPサポートなし。ついでに見出しを斜め読み
Safari 12.1 でも WebP はサポートされませんでした。あわせて、このバージョンで追加されたダークモード対応や Web支払いAPI などの新機能を眺めています。
新人にもわかる！WebPのブラウザ振り分けの仕組みを図解。picture要素と.htaccessのどっちでやるべき？
WebP 対応・非対応のブラウザに画像を振り分ける仕組みを図解します。picture 要素とWebサーバー設定のどちらを使うべきか、理由がなければサーバー側を勧めます。
画像軽量化の可能性を無料レポート！ LightFile/WebPシミュレーター v3をリリース
画像をどこまで軽くできるかを無料でレポートする LightFile/WebP シミュレーター v3 を公開しました。削減後の画質をスライダーや差分で確かめられます。
WebPの利用事例: YouTube・Google PlayなどGoogleのサービス
Google 自身のサービスにおける WebP の利用状況を見ます。YouTube、Google Play、Google Home や Chromecast の紹介ページなど、画像のほとんどが WebP で配信されています。
WebPの利用事例: ANA
ANA の公式サイトで WebP が使われています。レスポンスヘッダから Akamai Image Manager の利用が読み取れ、同じ仕組みを使うサイトは今後増えそうです。
WebPに関する10の誤解~5分で正しく理解するWebP
WebP について誤解されがちな10項目を、正しい内容と並べて説明します。読み方、ライセンス、対応ブラウザ、SEOとの関係など、5分で全体像がつかめます。
WebPの意外な事例: Amazon
Amazon でも WebP の利用が始まりました。2019年3月時点では商品一覧のサムネイルのみですが、画質に問題がなければ詳細ページにも広がると見られます。
WebPの本格利用に備えるための企業向け個別セミナーをスタート
WebP を短時間で理解できる企業向けの個別セミナーを始めました。数式やプログラミングは使わず、人数によらない定額制です。質問しやすい時間も設けています。
サイトのWebP対応は気楽にやろう！ 心が軽くなる4つの事実
サイトの WebP 対応は気楽に始めて大丈夫だ、という4つの理由を挙げます。一気にやらなくてよく、既存のデータを壊さず、困ったらすぐ元に戻せます。
画像フォーマットのチートシート日本語版を公開しました
画像フォーマットの特徴が1枚でわかるチートシート「SMUSH PRO Guide to Image Formats」を、著者の許可を得て日本語に翻訳しました。PDFでダウンロードできます。
WebPの発音について・アクセントは前後のどっち？
WebP は「ウェッピー」か「ウェブピー」か、アクセントはどこに置くのか。IT用語の読み方が割れる背景も交えつつ、迷ったときの考え方を書きました。
WebPウザいめんどくさいという方におすすめChrome拡張機能・JpegやPNGで画像をダウンロード
WebP でダウンロードした画像が開けなくて困る、という声への対処法です。JPEG や PNG で保存し直せる Chrome拡張機能と、コピペで済ませる方法を紹介します。
新聞ニュース系158サイトでWebP利用中は23サイト・WebPで平均-1.6秒待ち時間短縮と試算・レポート無料公開
新聞・ニュース系158サイトのモバイルトップページを調査しました。1ページ平均4.43MBで画像はその42%。WebP に変換すると平均1.6秒短縮できると試算しています。
WebPの意外な事例: マイクロソフト
マイクロソフトのサイトが、いつの間にか画像をほぼ WebP で配信していました。WebP Highlighter で可視化した結果と、配信に使われている仕組みの推測を紹介します。
WebPの意外な事例: Wikipedia
Wikipedia が画像配信に WebP を使っています。WebP Highlighter で可視化した結果と、レスポンスヘッダから推測できる配信の仕組みを紹介します。
WebPと従来の画像を正しく振り分ける.htaccessファイル
WebP と従来の画像を、ブラウザの対応状況に応じて振り分ける .htaccess の書き方を説明します。非対応ブラウザには元の画像を返すため、既存の画像はそのまま残せます。
WebP画像を目立たせるChrome拡張機能 WebP Highlighter
ページ内で WebP として配信されている画像を蛍光色の枠で目立たせる Chrome拡張機能 WebP Highlighter を紹介します。Developer Tools を開かずに確認できます。
iPhoneの非対応でシェア劣勢でも、いまWebPに対応する意味
日本では iPhone が多く WebP 対応シェアは35%程度にとどまります。それでも今 WebP に対応する意味を、PageSpeed Insights のスコアと実際の恩恵の面から説明します。
ページの画像をまるごとWebP変換してPageSpeed Insightsスコアを今すぐ改善するチュートリアル
ページの画像をまるごと WebP に変換して PageSpeed Insights のスコアを改善する手順を、変換からアップロードまで通しで説明します。既存画像は置き換えません。
通販上位300サイト中32サイトがWebPを配信・楽天市場は積極利用
ネット販売企業上位300社のスマホトップページを調べたところ、32サイトが WebP を配信していました。楽天市場は店舗ページを自動で WebP 化しています。
Firefox Quantum が WebP をサポート。残る未対応は Safari のみ
Firefox 65「Firefox Quantum」が WebP に対応しました。これでメジャーブラウザで未対応なのは Safari だけになります。実際に表示を確認した結果を報告します。
WebP、JPEG、4K8K。2019年も画像にこだわろう
2019年の画像まわりで押さえておきたい話題を3つ挙げます。WebP への対応、JPEGの品質設定、そして4K8K時代に向けた画像サイズの考え方です。
実際にWebPを利用するとどうなる？WebPの試験導入で画像ファイルサイズを-62.38%も削減という結果に！
自社サイトで WebP を試験導入した結果、画像のファイルサイズが62.38%削減されました。Googleデータスタジオで作ったレポートをもとに、実際の削減幅を共有します。
Webサイト全体をWebP対応する最低限の方法
サイト全体を WebP 対応する最低限の方法を、3ファイルのシェルスクリプトで実現しました。既存の画像を残したまま、対応ブラウザにだけ WebP を返す仕組みです。
2018年8月現在のWebPのブラウザ対応状況を確認する
2018年8月時点での WebP のブラウザ対応状況をまとめました。Chrome など Google 系は対応済みですが、Microsoft と Apple のブラウザは未対応のままです。
WebPってなに？Googleが作った軽くて透過も使える画像フォーマット
Google が作った画像フォーマット WebP を説明します。JPGより軽く、PNGのように透過も扱えます。対応ブラウザの状況と、導入すると容量がどう変わるかを確かめる方法も紹介します。