Addy Osmaniによるポッドキャストエピソード39のスマッシング：画像の最適化

公開: 2022-03-10

簡単な要約↬SmashingPodcastのこのエピソードでは、画像の最適化について話します。 2021年にパフォーマンスの高い画像を作成するには、どのような手順に従う必要がありますか？専門家のAddyOsmaniに相談して調べます。

Smashing Podcastの今日のエピソードでは、画像の最適化について話します。 2021年にパフォーマンスの高い画像を作成するには、どのような手順に従う必要がありますか？私は専門家のAddyOsmaniと話をして調べました。

メモを表示

「画像の最適化」、Addy Osmani
TwitterのAddy
アディの個人ウェブサイト

毎週の更新

Meet：has、ネイティブCSS親セレクター（およびその他）
エイドリアンベスによって書かれました
最近発見した3つのフロントエンド監査ツール
ステファンジュディスによって書かれました
便利なフロントエンドボイラープレートとスターターキット
CosimaMielkeによって書かれました
Webデザインはうまくいった：オーディオを利用する
フレデリックオブライエンによって書かれました
CSSが十分でない場合：アクセシブルなコンポーネントのJavaScript要件
ステファニーエックルズによって書かれました

トランスクリプト

アディオスマニの写真 Drew McLellan：彼はGoogle Chromeに取り組んでいるエンジニアリングマネージャーであり、彼のチームは速度に重点を置いており、ウェブの高速化を支援しています。オープンソースコミュニティに捧げられた彼の過去の貢献には、Lighthouse、Workbox、Yeoman、Critical、およびNVCの実行が含まれます。したがって、彼はWebパフォーマンスの最適化を回避する方法を知っています。しかし、彼が誤記のために助演女優賞でオスカーを受賞したいと思っていることをご存知ですか？私の壊滅的な友人、アディオスマニを歓迎してください。こんにちは、アディ。元気ですか？

Addy Osmani：私は粉砕しています。

ドリュー・マクレラン：聞いて良かったです。今日はウェブ上の画像についてお話ししたいと思います。これは、過去数年間に驚くほど多くの変化と革新があった分野であり、Smashingの画像最適化に関する非常に包括的な本を書いたばかりです。このとき、「今こそ画像の最適化に関する本を読む時が来た」と考える動機は何でしたか？

Addy Osmani：それは素晴らしい質問です。画像は何十年にもわたってウェブのかなり重要な部分であり、私たちの脳は画像をテキストよりもはるかに速く解釈できることを私たちは知っていると思います。しかし、この全体的なトピックは、時間の経過とともにますます面白く、ニュアンスが増し続けるトピックです。そして私はいつも人々にこれはおそらく私の3冊目か4冊目の本だと思います。私は意図的に本を書き始めたことはありません。

Addy Osmani：私はこの本を始めて画像の最適化に関する記事を書き始めましたが、時間が経つにつれて、誤ってそれに関する本全体を書いていたことがわかりました。私たちはこのプロジェクトに約2年間取り組んでいました。そしてその時でさえ、業界はブラウザを進化させ、画像と画像フォーマットを中心としたツールは進化してきました。

Addy Osmani：それで、私はこれらすべての変更を把握するのが難しいと感じたので、この本を書きました。そして、「私は良いWeb市民になり、学んだことすべてを1か所で追跡して、他のすべての人がそれを利用できるようにするつもりです」と思いました。

Drew McLellan：それはそれらの分野の1つだと思います。ブラウザーのパフォーマンスが大幅に最適化されているため、状況は急速に変化していますね。最新でベストプラクティスであると学んだテクニックで、テクノロジーの変化が起こった場合、それは実際にはアンチパターンであり、実行すべきではありません。そして、知識を維持し、正しい記事を読んで正しいことを学び、2年前の何かを読んでいないことを確認しようとするのは非常に困難です。

ドリュー・マクレラン：それで、権威ある情報源からよく研究された1冊の本にすべてを集めることは本当に素晴らしいことです。

Addy Osmani：うん。著者の観点からさえ、私たちの編集チームにとって最も興味深いことの1つであり、おそらく最もストレスの多いことの1つは、章を渡してそれが完了したと言うことでした。そして2週間後、ブラウザで何かが変わると、「ああ、待って。土壇場でもう一度変更する必要があります。」

Addy Osmani：しかし、画像の風景は昨年でもかなり進化しました。最近のほとんどのブラウザーでは、WebPサポートがようやく最終段階を超えているのを見てきました。 AVIF画像のサポートはChromeで行われ、Firefox、JPEG XL、遅延読み込みに対応しています。そして、全体的に見て、ブラウザでWeb上の画像をかなり具体的に使用する方法が強化されています。しかし、繰り返しになりますが、人々が上に保つことはたくさんあります。

Drew McLellan：一部の人々は、画像の最適化の主題をかなり堅実なトピックと見なすかもしれません。私たちは、キャリアのある時点で、グラフィックソフトウェアからWeb用にエクスポートする方法を学びました。そして、それらのエクスポートされた画像を取得し、ImageOptimのようなものを通してそれらを実行する習慣があるかもしれない私たちの何人か。

Drew McLellan：ですから、写真画像の場合はJPEGを選択し、グラフィックベースの画像の場合はPNGを選択する必要があることを知っているかもしれません。画像の最適化はわかっています。これで完了です。」しかし、実際には、これらは単なるテーブルステークですよね。

Addy Osmani：そうですね。アートディレクションを気にするかどうかに応じて、より詳細で鮮明な画像や異なるコンテキスト内の画像を表示する機能は、時間の経過とともに進化してきたと思います。環境、デバイスの制約、ネットワークの制約は難しい問題であり、多くの人がまだ知っていることを念頭に置いて、エンドユーザーが意図したとおりに画像を美しく見せるための方法を理解する必要があると思います。と闘う。

Addy Osmani：それで、画像について考えて、「ねえ、JPEGを使用しましょう」または「PNGを使用しましょう」だけでなく、これをもう少し洗練されたものにすることになると、この価値にはいくつかの側面があると思います心に留めておく。 1つ目は、一般的に圧縮です。あなたはImageOptimについて言及しましたが、私たちの多くは、画像をある場所にドラッグして、その後ろから何かを小さくすることに慣れています。

Addy Osmani：さて、圧縮に関しては、通常、さまざまなコーデックについて話します。また、コーデックは圧縮技術であり、通常、ファイルをエンコードするためのエンコーダコンポーネントと、ファイルをデコードおよび解凍するためのデコーダコンポーネントがあります。また、何かを使用しているかどうかを判断するときは、通常、使用している写真または画像が非可逆圧縮アプローチまたは非可逆圧縮アプローチのどちらを使用してアプローチしても問題がないかどうかを検討する必要があります。

Addy Osmani：人々がこれらの概念にあまり精通していない場合に備えて、ロスレスアプローチは、解凍時に最後にまったく同じファイルを複製するアプローチです。ですから、品質の面でそれほど多くを失うことはありません。ロスレスとは、画像をファックス機に送信することです。オリジナルの複製を入手しますが、それはオリジナルのファイルにはなりません。そこにはいくつかの異なるアーティファクトがあるかもしれません。微妙に異なって見えるかもしれません。しかし、一般的に言えば、圧縮するほど、通常は品質が低下します。

Addy Osmani：そして、これらの最新の画像コーデックはすべて、ユースケースに応じて、比較的適切なファイルサイズを維持しながら、どれだけの品質を引き出すことができるかを確認しようとしています。

Drew McLellan：つまり、テクノロジーの観点からすると、ソースイメージがあり、次に宛先ファイル形式があります。しかし、一方を他方に変えるプロセスは議論の余地があります。適合ファイルがある限り、それをどのように行うかは、多くの異なる実装を持つことができるコーデックにかかっており、いくつかは他よりも優れています。

Addy Osmani：もちろんです。絶対。また、JPEGとPNGから始めたところに戻ると、JPEGが写真の不可逆圧縮用に作成されたことを知っている人もいるかもしれません。通常、ファイルの裏側から小さなファイルが取得され、異なるバンディングアーティファクトが発生する場合があります。 PNGは元々、可逆圧縮用に作成されたもので、写真以外の画像で非常にうまく機能します。

Addy Osmani：しかし、それ以来、物事は進化してきました。 2010年頃、私たちはWebPのサポートを開始しました。これは、JPEGとPNGに取って代わり、圧縮でそれらを少し上回ることになっています。しかし、それ以来、テーブル上の画像フォーマットとオプションの数は急増しています。特にAVIFやJPEGXLのような最新のフォーマットでは、物事は概して良い方向に向かっていると思います。しかし、私たちがここに着くまでにはしばらく時間がかかりました。すべてのブラウザでWebPサポートを取得することでさえ、かなりの時間がかかりました。

Addy Osmani：そして最終的には、開発者がそれを求めていることを確認し、これらの最新のフォーマットからより良い圧縮を取得できるようにする意欲があり、ブラウザー間で良好な互換性を持ちたいという願望があったと思います。これらのことについても。

ドリュー・マクレラン：うん。 WebPは私にとって非常に興味深いもののようです。なぜなら、フォーマット内で可逆圧縮と非可逆圧縮を利用できるだけでなく、結果としてファイルサイズが大幅に縮小されたからです。また、ブラウザのサポートも良好で、GoogleやNetflixなどの大企業やさまざまな大企業から採用されています。

Drew McLellan：しかし、業界での私の認識は、草の根レベルで同じような取り込みは見られないということです。 WebPはまだその日が来るのを待っていますか？

Addy Osmani： WebPが登場していると思います。多くの人々がSafariとWebKitのサポートが実現するのを待っていましたが、ついにそれが実現しました。しかし、新しい画像形式について考えるとき、サポートが実際に何を意味するのかを理解することが非常に重要です。これらの画像をデコードするためのブラウザサポートがあります。また、ノード環境、イメージCDN、CMSのいずれの場合でも、これらのイメージ形式を使用できるように、非常に優れたツールサポートが必要です。

Addy Osmani： WebPが最初に登場したのは何年も前のことです。初期の採用者は、WebPファイルをデスクトップに保存するというこの問題を抱えていましたが、突然、「ああ、待ってください。これを表示するには、これをブラウザにドラッグする必要がありますか？」または「ユーザーがWebPをダウンロードしている場合、ユーザーは行き詰まり、何が起こっているのか疑問に思いますか？」

Addy Osmani：ですから、オペレーティングシステムレベルと他のコンテキストの両方で画像形式がかなり全体的にサポートされていることを確認することは、画像形式が普及するために非常に重要だと思います。また、画像を提供している人は、これらのユースケースについて少し考えて、ファイルを保存またはダウンロードする場合に、一般的に簡単に共有できるポータブル形式にしようとしていることも重要です。そして、これは、少なくともiOSでは、iOSがハイキングとハイフンをサポートしているところだと思います。また、必要に応じてJPEGに変換することで、人々がそれらを共有できるようになります。

Addy Osmani：ですから、より良い圧縮を提供している間、ユーザーが負けていないことを確認できるようなタイプのユースケースを検討することが重要だと思います。

Drew McLellan：ご想像のとおり、何十万もの画像を処理するスライド共有サービスを実行しています。そして、私がWebPを見ていましたが、これはおそらく3年前のことでしたが、主にCDN帯域幅のコストを削減する方法を検討していました。これは、小さいファイルを提供する場合、提供する料金が少なくなるためです。しかし、フルバックイメージ、つまりレガシーイメージ形式も必要でしたが、私の計算では、他のイメージセット全体を保存するコストが、小さいファイルを提供するメリットを上回っていることを示しました。それで、ここに私たちは2021年にいます。それは私がこの時点で再考すべき決定ですか？

Addy Osmani：それは本当に重要な考慮事項だと思います。時々、私たちがあなたのイメージ戦略にどのように取り組むべきかについて話すとき、人々に「ねえ、ええ。 5つの異なるフォーマットを生成するだけで、無限に拡張できます。」そして、それは常にそうであるとは限りません。

Addy Osmani：ストレージを念頭に置く必要がある場合、ユーザーにサービスを提供するのに最適で最も一般的な分母を見つけようとすることは、覚えておく価値があると思います。最近では、WebPをその共通の分母として検討する価値があると私は実際に言います。画像タグを使用してさまざまな形式を条件付きで提供することに慣れている人にとっては、通常、メインのフォールバックとしてJPEGを使用します。非常に古いブラウザを使用しているユーザーがいない限り、ほとんどのユーザーのフォールバックとして実際にWebPを使用することは最近では問題ないかもしれません。そして、私たちは最近、それがはるかに少なくなっていると思います。しかし、そこには確かにある程度の柔軟性があります。

Addy Osmani：さて、前向きになりたいのなら、本当にうまくいくと思うフォーマットを1つ選んでください。拡張性があり、ニーズに柔軟に対応できる方法でストレージにアプローチできる場合、人々がすべきことはJPEGXLを検討することです。技術的にはまだブラウザで出荷されていません。その場合、JPEG XLは、損失のあるまたは損失のないユースケースの多くの写真、または写真以外のユースケースにも非常に優れたオプションになるはずです。そして、それはおそらくWebPV1よりもはるかに優れているでしょう。だからそれは1つの場所です。

Addy Osmani：本当に低いビットレートにする必要がある場合は、おそらくAVIFの方が優れていると思います。多分あなたは帯域幅を大いに気にします。たぶん、あなたは画像の忠実度について少し気にしないでしょう。そして、それらのビットレートでは、いくつかの選択肢よりも鮮明に見えると想像できました。そして、JPEG XLができるまで、私はあなたの分析を見て、あなたがAVIFを提供することが可能かどうかを理解しようとします。そうでなければ、私はそのWebPに焦点を合わせます。あなたが分析をしているなら、ほとんどの人がWebPを提供できると思います。そして、染色体のサンプリングがWebPで完全ではないかもしれない場所である、ワイドガモットやテキストオーバーレイについては少し気にしません。それは確かに覚えておく価値のあることです。

Addy Osmani：ですから、すべての人に1つのサイズで対応できるわけではないことを覚えておいてください。私は個人的に、最近、イメージCDNを使用しているという理由だけで、ストレージ、出力、および帯域幅のコストについて少し心配することが少なくなっています。そして、私はCloudinaryを個人的に使用していると言ってうれしいです。私が働いている場所では、さまざまなイメージCDNを使用しています。しかし、画像パイプラインを処理するためのメンテナンスコストについてそれほど心配する必要がないことがわかりました。たとえば、次のようにサポートする方法を処理します。「ああ、これはさらに別の画像形式、新しいタイプのフォールバック、新しいWebAPIです。、」それは私のためにそれを世話する何かに投資することへの素晴らしい利益でした。

Addy Osmani：それで、私のユースケースの全体的なコストは大丈夫でした。しかし、その規模でスライドサービスを実行している場合、それも必ずしもオプションではない可能性があることは完全に想像できます。

ドリュー・マクレラン：うん。だから私はこれらの今後のフォーマットのいくつかに戻りたいと思います。しかし、それは掘り下げる価値があると思います。あらゆる種類のパフォーマンスツール、Lighthouse、またはWebPageTestsを使用して、サイトを実行する場合、画像にCDNを使用することをお勧めします。そして、それは非常に大企業にとって非常に現実的なことです。それは現実的で、小さなWebサイトやアプリを作成する人々の手の届く範囲にありますか、それとも実際にそれは思ったほど簡単ですか？

Addy Osmani：人々が尋ねるべき質問は、「あなたは何のために画像を使っているのですか？」だと思います。画像が数個しかない場合、ブログを作成していて、追加する画像が比較的単純な場合、数十万、数千、数千の画像がない場合は、これに近づいても大丈夫かもしれません。ビルド時に、非常に静的な方法で、いくつかのNPMパッケージをインストールします。たぶん、あなたはただシャープを使っているのでしょう。そして、それはほとんどの部分であなたの世話をします。

Addy Osmani：複数のフォーマットを生成するのに役立つツールがあります。ビルド時間が少し長くなりますが、実際には多くの人にとっては問題ないかもしれません。そして、複数を活用できるようにしたい人のために-

Addy Osmani：そして、複数のフォーマットを活用できるようにしたい人にとっては、ツールの細部に対処することを望まず、非常にリッチでレスポンシブな画像やストーリーを適切に配置できるようにしたいと考えています。画像CDNを試してみてください。個人的には、最初はコストの問題で個人的なプロジェクトに使用することをかなり控えていましたが、請求書を見ていくうちに、自分でこれらの問題に対処するために投資する時間を節約できることに気づきました。過去に画像を処理するためのカスタムスクリプトを作成する必要があったかどうかはわかりませんが、これらのさまざまなnpmパッケージを使用して、少なくとも2日間のデバッグを節約できれば、コストがかかることに気付きました。時間を節約できるので大丈夫です。

Addy Osmani：しかし、数百、数千、数百万の画像にスケーリングしている場合、それが必ずしも収益でカバーされるものでも、支払う準備ができているものでもない場合は、考える必要があります。代替戦略。そして、私たちが今日利用できるツールに十分な柔軟性があり、これらの方向のいずれかに進むことができるのは幸運だと思います。私たち自身のイメージCDNまたは私たちはもう少し商業的なものに投資します。そして、私たちは、いくつかのユースケースでは、イメージCDNを使用でき、手頃な価格であると言える場所にいます。

Drew McLellan：ある種の指針となる原則の1つは、常にアジャイルであり、変化に備えることです。また、画像CDNを使用して、要求に応じて画像を動的に変換することから始めることもできます。それがコスト面で持続可能ではない場合は、別のソリューションを検討して、コードベースを状態にすることができます。あるソリューションを別のソリューションに置き換えるのは簡単です。一般的に、そしてどこでもサードパーティのサービスに依存していると思いますが、それは良い原則ですよね？それで、これらの今後の画像フォーマット、あなたはJPEGXLについて言及しました。 JPEG XLとは何ですか？どこから来たの？そして、それは私たちのために何をしますか？

Addy Osmani：それは素晴らしい質問です。したがって、JPEG XLは次世代の画像形式であり、汎用であると想定されており、JPEG委員会のコーデックです。それは、Googleのpic形式のいくつかのルーツから始まり、次にCloudinaryのFUIF形式で始まりました。何年にもわたってこの取り組みに組み込まれたフォーマットはたくさんありましたが、それは個々の部分の単なる合計以上のものになり、JPEGXLの利点のいくつかは高忠実度に最適です画像は、ロスレスに非常に適しています。プログレッシブデコード、ロスレスJPEGトランスコーディングがサポートされており、手間がかからず、ロイヤリティフリーでもあります。これは間違いなくメリットです。 JPEGXLは本当に有力な候補になる可能性があると思います。先ほどお話ししましたが、1つだけ選ぶとしたら、何を使いますか？そして、JPEGXLはその可能性を秘めていると思います。

Addy Osmani：私も約束しすぎたくありません。ブラウザのサポートはまだ非常に早い段階です。ですから、実際にどれだけうまく整列し、人々の期待に応えられるかを実際に待って見て、実験して評価する必要があると思いますが、JPEG XLには、損失のあるケースと損失のないケースの両方に多くの可能性があります。今のところ、Chromeはおそらくサポートの面で最も遠いと思いますが、Mozilla側や他のブラウザからも間違いなく関心が寄せられているので、JPEGXLの将来に興奮しています。そして、私たちが言うならば、人々にとってさらに短期間の関心は何ですか？もちろんAVIFもあります。

ドリュー・マクレラン： AVIFについて教えてください。これは私がよく知らないもう1つのものです。

Addy Osmani：わかりました。したがって、ビットレートを低くする必要があり、画像の忠実度よりも帯域幅を重視する場合は、AVIFがより適切な候補である可能性があることについて少し前に説明しました。一般的な原則として、AVIFは忠実度の低い高アピール圧縮で主導権を握っています。そして、JPEG XLは、中程度から高い忠実度で優れているはずですが、それらはそれ自体の権利においてわずかに異なる形式です。私たちはAVIFがますます優れたブラウザサポートを獲得している場所にいますが、一歩下がってフォーマットについてもう少し話させてください。したがって、AVIF自体は、Alliance for Open Mediaによって標準化されたAV1ビデオコーデックに基づいており、先に説明したWebPよりもJPEGよりも大幅な圧縮率の向上を実現しようとしています。 AVIFから得られる正確な節約は、コンテンツと品質目標によって異なりますが、JPEGと比較して50％以上の節約を提供できるケースはたくさんあります。

Addy Osmani：優れた機能がたくさんあり、高ダイナミックレンジや広い色域、フィルムグレイン合成などの新機能のコンテナサポートを提供できます。繰り返しになりますが、前向きについて話すのと同様に、画像タグの優れた点の1つは、今すぐユーザーにAVIFファイルを提供でき、必ずしもサポートされていない場合でもWebPまたはJPEGにフォールバックできることです。。しかし、Photoshop Save For Webの例に戻ると、500キロバイトのサイズのJPEGを使用して、Photoshop Save For Webと同様の品質で撮影してみることができます。また、AVIFを使用すると、おそらくそのファイルサイズが約90キロバイト、100キロバイトであるため、品質が実際に認識できるほどの損失はなく、かなりの節約になります。

Addy Osmani：それについての素晴らしい点の1つは、理想的には、詳細が豊富な画像でテクスチャがそれほど失われることはないということです。したがって、森やキャンプなどの写真を持っている場合でも、AVIFを使用すると非常に豊かに見えるはずです。ですから、私はAVIFの方向性に非常に興奮しています。ツールのサポートに関しては、もう少し作業が必要だと思います。先日、これについてツイートを削除しました。現在、AVIFを使用するためのオプションがいくつかあります。単一の画像には、Chromeの別のチームによって作成されたSquoosh、squoosh.appがあります。 Squooshに取り組んでくれたSurmaとJakeに出かけました。 Avif.ioには、焦点を当てている技術スタックに関係なく、今日AVIFを使おうとしている人々のための優れたオプションがいくつかありますが、SharpはAVIFもサポートしています。

Addy Osmani：しかし、一般的に、画像を扱う他の場所について考えます。それがFigma、Sketch、Photoshop、その他の場所であるかどうかにかかわらず、私たちはまだ少し作業を行う必要があると思います。 AVIFは、開発者とユーザーが実際に着陸して帰宅したように感じるためにユビキタスである必要があるため、そこでサポートします。これは、現在ChromeでAVIFに取り組んでいるチームが焦点を当てている分野のひとつであり、ツールをかなり良い場所に配置できるように努めています。

Drew McLellan：これで、画像要素であるHTMLを使用できるようになりました。これにより、従来の画像タグよりも柔軟性が高まります。画像タグも長い道のりですがね。しかし、画像が追加されているのを見ました。それはネイティブのビデオタグとほぼ同じ時期でした。そのような、HTML5の元のバッチの変更だと思います。そして、これは私たちに複数のソースを指定する能力を与えます、そうですか？

Addy Osmani：はい、そうです。

Drew McLellan：さまざまな形式の画像を一覧表示すると、ブラウザがサポートする形式を選択します。これにより、古いブラウザを使用している人のために物事を壊すことをあまり心配することなく、すぐに実験を行うことができます。

Addy Osmani：もちろんです。これは、方向性を考えているユースケースの外で画像タグを使用することの最も優れた利点の1つだと思います。画像を提供し、ブラウザに潜在的なソースのリストを調べて、わかりました。ええと、私はそのリストの最初のものを使用します。そうしないと、フォールバックします。これは、人々にとって非常に強力な機能です。同時に、複数のフォーマットをサポートしようとしているときに、マークアップの非常に大きな塊を再生成していることに懸念や懸念を表明している人もいると思います。これらのフォーマットのサイズを考慮して、突然少しかさばります。

Addy Osmani：では、これらの問題に取り組む方法は他にありますか？イメージCDNで人々を売りすぎたくないので、彼らに自立してもらいたいのです。しかし、これはコンテンツネゴシエーションと呼ばれるアイデアが実際にあなたに興味深い道を提供できる場所の1つです。そこで、さまざまなリソースを生成し、優先順位、つまり追加のHTMLを決定する必要があるpicturetagについて少し説明しました。コンテントネゴシエーションでは、サーバー上ですべての作業を実行しましょう。したがって、クライアントは、Accept HTTPヘッダーを介したMIMEタイプのリストを介して、サーバーがサポートする形式を事前にサーバーに通知できます。次に、サーバーは、最終的なリソースを生成および管理し、クライアントに送信するリソースを決定するというすべての重い作業を実行できます。また、ここでの強力な点の1つは、イメージCDNを使用している場合、単一のリソースを指すことができることです。

Addy Osmani： puppy.JPEGのような子犬の画像がある場合は、puppy.JPEGへのURLをユーザーに提供できます。また、ブラウザがWebPをサポートしている場合、またはAVIFをサポートしている場合は、サーバーが適切なサービスを提供することについて非常に賢くなります。サポートがどのように見えるかに応じてそれらのユーザーにイメージしますが、それ以外の場合は、自分で大量の余分な作業を行う必要なしにフォールバックします。さて、それは強力なアイデアだと思います。サーバーでできることはたくさんあります。私たちは時々、誰もが本当に強力なネットワーク品質にアクセスできるわけではないことについて話します。あなたの効果的な接続タイプは、あなたがどこにいるかによって本当に異なります。

Addy Osmani：シリコンバレーに住んでいても、コーヒーショップからホテルまで歩いていたり、車の中にいて、Wi-Fiや信号の品質がそれほど良くない場合があります。したがって、ここで他のAPIにアクセスできます。ユーザーがデータの節約を選択した場合、Save-Dataクライアントのような他のアイデアは、より小さなサイズのリソースで人々にサービスを提供できる可能性があることを示唆しています。したがって、サーバー側で実行できる興味深いことがたくさんあります。市場パスを実行することに慣れている人々がそうするためのすべての柔軟性を備えている、素晴らしいバランスを見つけるというこれらのアイデアを推進し続ける必要があると思います。また、もう少し魔法のような解決策が必要な人にも、いくつかの選択肢があります。

Drew McLellan：この種のデータセーバーアプローチの概念は、私があなたの本から最初に知ったものでした。つまり、それは非常に興味深いので、もう少し詳しく見ていきましょう。つまり、ブラウザが従量制の接続を使用しているか、バッテリー残量が少ないなどの理由で、データエクスペリエンスの低下を希望する設定を通知できるということです。

Addy Osmani：その通りです。丁度。私は通常の時間または以前はもっと多くの旅行をする予定でしたが、世界中の多くの場所や、ネットワークの品質が非常に悪い、または非常にむらがある状況を経験しました。ウェブページをアップすることは、苛立たしいまたは困難な経験になる可能性があります。私はメニューを探しているかもしれません、そしてそれらが利用できる美しい食べ物の写真を見ることができないなら、私は私ができるところに行くかもしれません、あるいは私は私が知らない、代わりに自分で食べ物を作るかもしれません。しかし、データセーバーの興味深い点の1つは、ユーザーの好みに戻ることができることだと思います。したがって、ユーザーとして、ネットワーク接続に苦労していることを知っています。「さて、ブラウザでデータセーバーモードを選択します」と言うことができます。

Addy Osmani：それから、開発者として、「ユーザーは少し制約があります。おそらく、はるかに小さい画像やはるかに低品質の画像をサーフィンするでしょう」と言うシグナルとして使用できます。しかし、彼らはまだいくつかの画像を見ることができます。これは、はるかに豊富なものが提供されるのを非常に長い間待つよりも優れています。これらのタイプの信号の他の利点は、条件付きでメディアを提供するためにそれらを使用できることです。そのため、そのページでテキストが最も重要な場合があるかもしれません。ユーザーが一種の制約された環境にいることに気付いた場合は、それらの画像をオフに切り替えることができます。これには30秒しか費やしませんが、このアイデアを極端に推し進めることができます。 Save-Dataでできる興味深いことのいくつかは、JavaScriptで実装された非常にコストのかかる機能をオフにすることさえあるかもしれません。

Addy Osmani：少しオプションと見なされる特定のコンポーネントがある場合、エクスペリエンスを向上させるだけであれば、必ずしもすべてのユーザーに送信する必要はありません。それでも、非常にコアで、小さく、迅速なエクスペリエンスをすべての人に提供し、より高速な接続またはデバイスを持っている人のために、いくつかの素敵なフロスティングでそれを重ねることができます。

Drew McLellan：潜在的に、それはページ付けを考慮に入れることができ、100ではなく10の結果をページに返すことができると思います。そこにはたくさんの興味深い、興味深い機能があります。私たちは、新しいサイトを準備し、すべての画像を最適化し、それをクライアントに渡し、コンテンツを管理するためのCMSを提供し、すべてを次のものに置き換えていることに気付くという苛立たしいプロセスに精通していると思います。最適化が不十分な画像。つまり、イメージCDNはそれに対する非常に便利なソリューションだと思いますが、他のソリューションはありますか、それを支援するためにCMSがサーバー上で実行できることはありますか、それともイメージCDNである可能性があります。行く方法は？

Addy Osmani：おそらく少なくとも6〜7年間、すべての人に画像を最適化させようとした後に私たちが発見したことは、写真に関係する一部の人々が少し技術的に精通していて、おそらく快適な設定であるという難しい問題だと思います独自のツールを使用するか、Lighthouseを実行して実行するか、他のツールを試して、改善の機会があるかどうかを知らせます。さらに最適化したり、適切なサイズの画像を提供したりする機会があれば、Lighthouseのようなものを一貫して使用している人々に会いたいのですが、それを超えると、画像をアップロードしている人々がそうでない可能性があるユースケースに遭遇することがありますアップロードするリソースのコストさえも理解する必要があります。これは一般的に私たちが遭遇するものであり、申し訳ありませんが、あまり多くの人に声をかけるつもりはありませんが、これはGoogleブログでも遭遇するものです。

Addy Osmani： Googleブログでは、数週間ごとに、20メガバイトまたは30メガバイトの非常に大きなアニメーションGIFを誰かにアップロードしてもらいます。そして、それが良い考えではないことを彼らが知っているとは期待していません。彼らは記事をクールで非常に魅力的でインタラクティブに見せようとしていますが、それらの聴衆は必ずしもツールを実行したり、ImageOptimを使用したりすることを知っているとは限りません。または、これらの他のツールのいずれかを適切に使用して、それらを文書化してチェックアウトする必要があることは、確かに1つのオプションです。しかし、問題を自動化できることは非常に説得力があり、技術的であろうと非技術的であろうと、CMSのすべてのユーザーのニーズのバランスが取れている場所に一貫して到達するのに役立つと思います。ユーザーのニーズとして。

Addy Osmani: So I think the image CDNs can definitely play a role in helping out here. Ultimately, the thing that's important is making sure you have a solution in place between people, stakeholders who might be uploading those images, and what gets served down to users. If it's an image CDN, if it's something you've rolled yourself, if it's a built step, just needs to be something in place to make sure that you are not serving down something that's very, very large and inefficient.

Drew McLellan: Talking about animated GIFs, they're surprisingly popular. They're fun, we love them, but they're also huge. And really, it's a case where a file format that was not designed for video is being used for video. Is there a solution to that with any of these image formats? 私たちは何ができる？

Addy Osmani: Oh, gosh. The history of GIFs is fascinating. We saw a lot of the formats we know and love or have been around for a while were originated in the late '80s to early '90s, and the GIF is one of those. It was created in 1987. I'm about as old as the GIF.

Addy Osmani: As you mentioned, it wasn't originally created necessarily for use case. I think it was Netscape Navigator which in mid '90s maybe added support for looping GIFs and giving us this kind of crazy fun way to do memes and the like, but GIFs have got so many weaknesses. They're kind of limited in many cases to a very finite color palette; 256 colors, in many cases. They're a bitmapped raster format with pixel value stored in image files.

Addy Osmani: They're very inefficient, for a number of reasons. And you mentioned that they're also quite large. I think that we've gotten into this place of thinking that if we want a short segment of video or animation that's going to be looping, the GIF is the thing that we have to use. And that's just not the case.

Addy Osmani: While we do see that there are modern image formats that have support for animation, I think that the most basic thing you can do these days is make sure you're serving a video down instead of a GIF. Muted auto-play videos combined with HD64, HD65, whatever video you're going to use, can be really powerful, and significantly smaller for use cases where you need to be showing a sequence of images.

Addy Osmani: There are options for this. AVIF has got image sequences in there, potentially. Other formats have explored these ideas as well. But I think that one thing you can do is, if you're using GIFs today, or you have users who are slightly less technical who are using GIFs today, try to see if you can give them tools that will allow them to export a video instead, or if your pipeline can take care of that for them, that's even better.

Addy Osmani: I have plenty of conversations with CMS providers where you do see people uploading GIFs. They don't know the difference between a video and a GIF file. But if you can just, whether it's with an image CDN or via some built process, change the file over to a more efficient format, that would be great.

Drew McLellan: We talked briefly about tools like ImageOptim that manage to strip out information from the files to give us the same quality of result with a smaller file size. I'm presuming that's because the file formats that we commonly deal with weren't optimized for delivery over the Web in the first place, so they're doing that step of removing anything that isn't useful for serving on the Web. Do these new formats take that into consideration already? Is something like ImageOptim a tool that just won't be required with these newer formats?

Addy Osmani: I'm anticipating that some of the older formats… Things that have been around for a while, take a while to phase out or to evolve into something else. And so I can see tools like ImageOptim continuing to be useful. Now, what are modern image formats doing that are much better? Well, I would say that they're taking into account quite a few things.

Addy Osmani: They're taking into account, are there aspects of the picture that the human eye can't necessarily make out a difference around? When I'm playing around with different quality settings or different codecs, I'm always looking for that point where if I take the quality down low enough, I'm going to see banding artifacts. I'm going to see lots of weird looking squares around my buildings or the details of my picture.

Addy Osmani: But once those start to disappear, I really need to start zooming in to the image and making comparisons across these different formats. And if users are unlikely to do that, then I think that there are good questions around is that point of quality good enough? I think that modern image formats are pretty good at being able to help you navigate, filtering out some of those details pretty well. Keeping in mind what are the needs of color, because obviously we've got white gamut as a thing right now as well.

Addy Osmani: Some people might be okay with an amount of changing your color palette versus not, depending on the type of images that you have available, but definitely I see modern formats trying to be resilient against things like generational loss as well. Generational loss is this idea that… We mentioned memes earlier. A common problem on the Web today is you'll find a meme, whether it's on Facebook or Instagram or Reddit or wherever else, you'll save it, and maybe you'll share it around with a friend. Maybe they'll upload it somewhere else. And you suddenly have this terrible kind of copy machine or fax effect of the quality of that image getting worse and worse and worse over time.

Addy Osmani: And so when I see something get reshared that I may have seen three months ago, now it might not be really, really bad quality. You can still make out some of the details, but image formats, being able to keep that in mind and work around those types of problems, I think are really interesting.

Addy Osmani: I know that JPEG XL was trying to keep this idea of generational loss in mind as well. So there's plenty of things that modern codecs and formats are trying to do to evolve for our needs, even if they're very meme focused.

Drew McLellan: Let's say you've inherited a project that has all sorts of images on it. What would be the best way to assess the state of that project in terms of image optimization? Are there tools or anything that would help there?

Addy Osmani: I think that it depends on how much time you've got to sink into the problem. There are very basic things people can try doing, like obviously batch converting those images over to more modern formats at the recommended default quality and do an eyeball check on how well they're doing compared to the original.

Addy Osmani: If you're able to invest a little bit more time, there are plenty of tools and techniques like DSSIM and other ways of being able to compare what the perceptual quality differences are between different types of images that have been converted. And you can use that as a kind of data-driven approach to deciding, if I'm going to batch convert all of my old images to WebP, what is the quality setting that I should be relying on? If I'm going to be doing it for AVIF or JPEG XL, what is the quality setting that I should be relying on?

Addy Osmani: I think that there's plenty of tools people have available. It really just depends on your time sink that's possible. Other things that you can do, again, going back to the image CDN aspect, if you don't have a lot of time and you're comfortable with the cost of an image CDN, you can just bulk upload all of those images. And there are CDNs that support this idea of automatic quality setting. I think in Cloudinary it's q_auto, or something like that.

Addy Osmani: But the basic idea there is they will do a scan of the image, try to get a sense of the type of content that's in there, and automatically decide on the right level of quality that you should be using for the images that are getting served down to users. And so you do have some tooling options that are available here, for sure.

Drew McLellan: I mean, you mentioned batch processing of images. Presumably you're into the area of that generational loss that you're talking about, when you do that. When you take an already compressed JPEG and then convert it to a WebP, for example, you risk some loss of quality. Is batch converting a viable strategy or does that generational loss come too much into play if you care about the pristine look of the images?

Addy Osmani: I think it depends on how much you're factoring in your levels of comfort with lossy versus lossless, and your use case. If my use case is that I've inherited a project where the project in question is all of my family's photos from the last 20 years, I may not be very comfortable with there being too much quality loss in those images, and maybe I'm okay with spending a little bit more money on storage if the quality can remain mostly the same, just using a more modern format.

Addy Osmani: If those are images for a product catalog or any commerce site, I think that you do need to keep in mind what your use case is. Are users going to require being able to see these images with a certain level of detail? And if that's the case, you need to make those trade-offs in mind when you're choosing the right format, when you're choosing the right quality.

Addy Osmani: So I think that batch is still okay. To give you a concrete idea of one way of seeing people approach this at scale, sometimes people will take a smaller sample of the images from that big collection that they've inherited, and they'll try out a more serious set of experiments with just that set. And if they're able to land on an approach that works well for the sample, they'll just apply it to the whole batch. And I've seen that work to varying degrees of success.

Drew McLellan: So optimizing file size is just sort of one point on the overall image optimization landscape. And I'd like to get on to talking about what we can do in our browsers to optimize the way the images are used, which we'll do after a quick word from this episode sponsor.

Drew McLellan: So we've optimized and compressed our large files, but now we need to think about a strategy for using those in the browser. The good old faithful image tag has gained some new powers in recent times, hasn't it?

Addy Osmani: Yeah, it has. And maybe it's useful for folks… I know that a lot of people that ask me about images these days also ask me to frame it in terms of metrics and the Core Web Vitals. Would it be useful for me to talk about what the Core Web Vitals are and maybe frame some of those ideas in those current terms?

Drew McLellan: Absolutely, because Core Web Vitals is a sort of initiative from Google, isn't it, that we've seen more recently? We're told that it factors into search ranking potentially at some level. What does Core Web Vitals actually mean for us in terms of images?

Addy Osmani: Great question. As you mentioned, Core Web Vitals is an initiative by Google, and it's all about trying to share unified guidance for quality signals. That can be pretty key to delivering a great user experience on the Web. And it is part of a set of page experience signals Google Search may be evaluating for ranking purposes, but they can impact the Core Web Vitals in a number of ways.

Addy Osmani: Now, before I talk about what those ways are, I should probably say, what are the Core Web Vitals metrics? There's currently three metrics that are in the Core Web Vitals. There's largest contentful paint, there's cumulative layout shift, and there's first input delay. Now, in a lot of modern Web experiences we find that images tend to be one of the largest visible elements on the page. We see a lot of product pages where we have a big image that's the main product item image. We see images in carousels, in stories and in banners.

Addy Osmani: Now, largest contentful paint, or LCP, is a Core Web Vitals metric that tries to measure when the largest contentful element, whether it's an image text or something else, is in a user's viewport, such that we're able to tell when that image becomes visible. And that really allows a browser to determine when the main content of the page has really finished rendering.

Addy Osmani：レシピサイトに行こうとしている場合は、そのレシピがどのように見えるかを気にするかもしれません。そのため、レシピの大きなヒーロー画像が表示されるようにする必要があります。現在、LCP要素は時間の経過とともに変化する可能性があります。ロードの初期段階で最大のものが見出しである可能性は非常に高いですが、ページがロードされ続けると、実際にははるかに大きな画像またはある種のポスターになる可能性があります。

Addy Osmani：それで、最大の満足のいくペイントを最適化しようとしているとき、あなたができることは約4つあります。まず、キーヒーローの画像をできるだけ早くリクエストしていることを確認します。一般的に、ページには重要なことがいくつかあります。メインページのコンテンツとレイアウトをレンダリングできることを確認したいと思います。

Addy Osmani：レイアウトについては、通常、CSSについて話します。そのため、ページで重要なCSS、インラインCSSを使用していて、レンダリングがブロックされないようにしたい場合がありますが、画像に関しては、理想的には、その画像を早期にリクエストする必要があります。最近の私たちの多くがフレームワークに依存していることを考えると、ブラウザがページのできるだけ早い段階でその画像を検出できるようにするだけでよいのかもしれません。

Addy Osmani： SSR、サーバーサイドレンダリングを必ずしも使用していない場合、JavaScriptバンドル、コンポーネントのバンドルの一部を検出するためにブラウザーで待機している場合、ヒーローイメージまたは製品イメージのコンポーネントがあるかどうかにかかわらず、ブラウザが画像を検出する前に、これらのさまざまなファイルをすべてフェッチ、解析、実行、コンパイル、実行するのを待たなければならない場合、最大のコンテンツのある画像が検出されるまでに時間がかかる可能性があります。

Addy Osmani：そうだとすれば、画像がかなり遅れてリクエストされている場所にいることに気付いた場合は、link rel preloadと呼ばれるブラウザ機能を利用して、ブラウザがその画像を早期に検出できるようにすることができます。できるだけ。さて、プリロードは本当に強力な機能です。それはあなたが多くの注意を払う必要があるものでもあります。最近では、キーのプリロードをお勧めしていると聞いている場所にたどり着くのは非常に簡単です-

Addy Osmani：キーヒーローの画像、キースクリプト、キーフォントのプリロードをお勧めしていると聞いているかもしれません。そして、物事を正しい順序で順序付けていることを確認しようとすると、これだけ大きくて大規模になります。したがって、LCPイメージは、このために覚えておく価値のある重要な場所の1つです。

Addy Osmani：もう1つは、4つのことを述べたように、ソースセットと効率的な最新の画像形式を使用していることを確認することです。ソースセットは本当に強力だと思います。また、人々がそれを使用しているとき、彼らは過大な補償を試み、おそらく解像度ごとに10の異なるバージョンの画像をそこに出荷することもあります。少なくとも一部の調査では、画像で3つを超えると、ユーザーは画質、シャープネス、ディテールの違いを理解するのに非常に苦労する傾向があります。したがって、DPRキャッピング、デバイスピクセル比キャッピングは、確かに覚えておく価値のあるアイデアです。

Addy Osmani：次に、最新の画像形式については、前に形式について説明しましたが、WebP、AVIF、JPEGXLを検討してください。ピクセルを無駄にしないでください。品質のために適切な戦略を立てることは非常に重要です。また、デフォルトの品質でも高すぎる場合が多いと思います。そのため、ビットレートを下げ、品質設定を下げて、シャープネスを維持しながらユーザーのためにどれだけ遠くまで移動できるかを試してみます。

Addy Osmani：そして、読み込みについて話しているとき、画像タグがここ数年でサポートするように進化した他の1つは、遅延読み込みです。したがって、読み込みが遅延に等しい場合、画像に遅延読み込みを追加するために必ずしもJavaScriptライブラリを使用する必要はありません。それを画像にドロップするだけです。また、クロムブラウザとFirefoxでは、サードパーティの依存関係を使用せずに、これらの画像を遅延ロードできます。そして、それもかなりいいです。

Addy Osmani：それで、遅延読み込みを実行しました。同期デコードなどの他のものもサポートされていますが、これからも続けて、他の2つのコアバイタルメトリックについて非常に迅速に説明します。

ドリュー・マクレラン：頑張ってね、うん。

Addy Osmani：では、レイアウトの変更を取り除いてください。物事が自分のページを飛び回るのが好きな人は誰もいません。私の最大の不満の1つは、Webページを開くことです。クリックしたいボタンの上に指を置くと、突然、寸法が設定されていない広告や画像の束などが表示されます。これは、非常に不快な体験を引き起こします。

Addy Osmani：つまり、累積的なレイアウトシフトは、コンテンツの不安定性を測定しようとします。そして、多くの場合、レイアウトのシフトを推進している一般的なものは、サイズが設定されていないページ上の画像やその他の要素です。それは、人々が画像のサイズを設定するのが簡単な場所の1つだと思います。多分それは私たちが歴史的にかなり多くのことをしたことではありませんが、確かにあなたの時間を費やす価値のあることです。灯台のようなツールでは、寸法が必要なページ上の画像のリストのように、収集を支援しようとしますか？だからあなたは行くことができ、あなたはそれらを設定することができます。

Drew McLellan：レスポンシブウェブデザインが重要になったとき、私たち全員がサイトを調べて画像のサイズを削除したので、それは本当に興味深い点です。画像に高さと幅の属性はありません。しかし、それは今では悪い考えですよね？

Addy Osmani：古いものは再び新しいものです。画像に寸法を設定することは間違いなく価値があると思います。広告やアイフレームなど、サイズが変わる可能性のある動的コンテンツのサイズを設定することは、サイズを設定する価値があります。

Addy Osmani：そして、本当に楽しい体験を構築している人々にとって、間違ったフレーズ、本当に楽しいレイアウト体験があり、レスポンシブカードなどでもっと多くの作業を行う必要があるかもしれません。 CSSのアスペクト比またはアスペクト比ボックスを使用してスペースを予約することを検討します。そして、それは、レイアウトのずれを避けようとしているときに物事が可能な限り固定されることを確実にするために、それらの画像の設定寸法を補完することもできます。

Addy Osmani：そして最後に、最後のCoreWebVitalは最初の入力遅延です。これは、画像に関しては必ずしも人々が常に考えているとは限らないことです。したがって、実際には、画像がページの読み込み時にユーザーの帯域幅とCPUをブロックする可能性があります。特に、非常に低速な接続や、帯域幅の飽和につながる可能性のあるローエンドのモバイルデバイスでは、他の重要なリソースがどのように読み込まれるかを妨げる可能性があります。

Addy Osmani：つまり、最初の入力遅延は、サイトの双方向性と応答性の第一印象をユーザーが捉えるCoreWebVitalメトリックです。したがって、メインスレッドのCPU使用率を減らすことで、最初の入力遅延も最小限に抑えることができます。したがって、一般的には、ネットワークの競合を引き起こす可能性のある画像は避けてください。それらはブロッキングをレンダリングしていません。ただし、それでもレンダリングパフォーマンスに間接的に影響を与える可能性があります。

Drew McLellan：画像のレンダリングのブロックを防ぐために画像でできることはありますか？その初期段階でブラウザの負荷を軽減して、より迅速にインタラクティブにできるようにすることはできますか？

Addy Osmani：折り目の上に何かを表示するための適切な最適な画像シーケンスをよく理解することは、最近ますます重要になっていると思います。フォールドの上にオーバーロードされた用語があることは知っていますが、ユーザーの最初のビューポートのようです。非常に多くの場合、ユーザーがすぐに表示するものには実際には必要のない、大量のリソースを要求しようとする可能性があります。その一部は画像です。そして、それらはページのライフサイクルの後半で読み込むための優れた候補になる傾向があり、遅延読み込みを行うのに最適です。しかし、非常に早い段階でキュー全体のように、多数の画像を要求している場合、それらは潜在的に影響を与える可能性があります。

ドリュー・マクレラン：うん。つまり、JavaScriptライブラリで実行する必要があった遅延読み込み画像については、ブラウザが画像の読み込みを最適化する歴史的な方法のため、画像の読み込みを停止することはほとんど不可能であるため、独自の欠点があると思います。、ソースを提供しない場合を除きます。また、ソースを提供せず、後でJavaScriptで修正しようとすると、そのJavaScriptが実行されない場合、画像は取得されません。したがって、遅延読み込み、ネイティブ遅延読み込みはそのすべてに対する答えです。

Addy Osmani：ええ、もちろんです。そして、ここは、昨年のネイティブの遅延読み込みエクスペリエンスである、ブラウザー間での改善を試みた場所だと思います。ご存知のように、これは私たちが何かを早期に出荷した機能の1つであり、業界のソートリーダーとの会話を利用して、「ああ、ねえ、実際に手動で設定しているしきい値は何ですか？遅延サイズを使用している場合、または他のJavaScriptの遅延読み込みライブラリを使用している場合は？」次に、しきい値を調整して、予想される場所に少し近い場所に到達しようとしました。

Addy Osmani：多くの場合、ネイティブの遅延読み込みを使用できます。より洗練されたものが必要な場合、交差点オブザーバーのしきい値を設定できるようにするためのより多くの制御が必要な場合、ブラウザーが物事を要求する時点で、通常はライブラリを使用することをお勧めします。、90％のユースケースを解決しようとしているからです。しかし、10％はまだ有効です。まだもう少し何かが必要な人もいるかもしれません。したがって、ほとんどの人にとって、ネイティブの遅延読み込みが近い将来に十分であると期待しています。

ドリュー・マクレラン：何よりも、それは無料です。追加する単純な属性で、このすべての機能を無料で利用できます。これはすばらしいことです。私たちのリスナーができることが1つあるとしたら、画像の最適化を改善するために離れて自分のサイトに行くことができます。それは何でしょうか。彼らはどこから始めるべきですか？

Addy Osmani：始めるのに良い場所は、これがあなたのサイトにとってどれほどの問題であるかを理解することです。私は灯台か支払い速度の洞察のどちらかをチェックしに行きます。最も人気のあるいくつかのページに移動して実行し、何が表示されるかを確認してください。やるべきことが1つか2つしかないように見えるなら、それは素晴らしいことです。多分あなたはそこに少し時間を置くことができます。

Addy Osmani：やるべきことがたくさんある場合は、そこにある最高の機会を見てください。「ああ、これをやれば、数秒節約できます。もの。" そして、そもそもそこにあなたのエネルギーを集中させてください。

Addy Osmani：ここで説明したように、最新の画像形式のツールは時間の経過とともに改善されてきました。イメージCDNは間違いなく検討する価値があります。しかし、それを超えて、あなたが取ることができる多くの小さなステップがあります。場合によっては、サイトが十分に小さい場合は、Squooshにアクセスして開いただけでも、いくつかの画像をそこに配置することは、優れた出発点になる可能性があります。

ドリュー・マクレラン：それは確かなアドバイスです。今、私はそれが壊滅的な出版物であることを知っています、しかし私は本当にこの本であなたを祝福しなければなりません。それはとても包括的で本当に消化しやすいです。本当に貴重な読み物だと思います。

Drew McLellan：それで、私は画像の最適化についてすべてを学んでいます。アディ、最近何を学んでいますか？

Addy Osmani：最近何を学んでいますか？実際、まだ画像に関係しているわずかに異なるトピックについてです。大学で修士号を取得しているときに、コンピュータビジョンに深く入り込み、画像のさまざまな部分を検出してワイルドに実行するにはどうすればよいかを理解しようとしました。彼らと一緒に面白いこと？

Addy Osmani：最近掘り下げている特定の問題は、私が赤ちゃんや子供の頃に自分の写真を見ていたことです。そして当時、私の両親が取るであろう食べ物の多くは、必ずしもデジタルカメラではありませんでした。それらはポラロイドでした。多くの場合、画像はやや低解像度です。そして、それらをスケールアップできる方法が欲しかったのです。それで、私は最近この問題を再び掘り下げ始めました。そして、それは私がブラウザで何ができるかについてもっと多くを学ぶようになりました。

Addy Osmani：そこで私は、機械学習、TensorFlow、既存のテクノロジーを使用して、比較的低解像度の画像やイラストを取得し、それらをはるかに高品質のものにアップスケールできる小さなツールを構築してきました。そのため、単に画像を引き伸ばすようなものよりも優れています。それは実際に詳細に記入するようなものです。

Addy Osmani：それはちょっと楽しかったです。私は、ブラウザ全体でWebアセンブリがどれほど安定しているか、デスクトップアプリケーションのユースケースでこれらのアイデアのいくつかをどれだけうまく使用できるかについて多くのことを学びました。そして、それは本当に楽しかったです。だから私は最近たくさんのウェブアセンブリを掘り下げています。そして、それはクールです。

ドリュー・マクレラン：面白いですね。テクノロジーが登場すると、あなたが知っていることすべてが頭に浮かびます。ウェブ上では、画像を小さくすることができるといつも言ってきました。しかし、画像が小さい場合、それを大きくすることはできません。それは不可能です。しかし今、私たちは多くの状況下でそれを可能にするかもしれない技術を持っています。それは本当に魅力的です。

Drew McLellan：親愛なるリスナーの皆さん、Addieからもっと聞きたい場合は、Twitterで彼を@AddieOsmaniで見つけ、AddyOsmani.comからリンクされているすべてのプロジェクトを見つけることができます。「画像の最適化」という本は、現在smashingmagazine.comのSmashingから物理的およびデジタル的に入手できます。本日はご参加いただきありがとうございます、アディ。別れの言葉はありますか？

Addy Osmani：別れの言葉はありますか？私は歴史から少し癖があり、それを人々と共有します。ティムバーナーズリーは1992年に最初の画像をインターネットにアップロードしました。それが何であるかを推測できるかどうかはわかりませんが、おそらく驚くでしょう。ドリュー、何か推測はありますか？

ドリュー・マクレラン：猫だと思います。

Addy Osmani：猫。それは良い推測ですが、違います。これはCERNでした。そして、そのイメージは実際には、CERNの従業員の集まりによって形成されたパロディーポップバンドであるLesHorriblesCernettesと呼ばれるバンドのイメージでした。そして彼らがする音楽はドゥーワップ音楽のようなものです。そして、彼らは衝突型加速器と癖、液体窒素と反物質についてのラブソングを60年代の衣装を着て歌いました。