4個の必須画像最適化ヒント

Sep 15, 2025

操作方法

ラッキー開発者とこの作者は、Addy Osmaniの新しいイメージ最適化電子ブックを編集する機会を得ました。必須画像の最適化あなたが絶対に読むべきですか。

より良いパフォーマンスのために画像を最適化するための10の方法

あなたがフルサイズを構築するかどうか eコマースWebサイト または単にあなたのためにオンラインの家を作る デザインポートフォリオ 、この記事では、あなたのイメージをより早くより速くするのに役立つaddyの本からいくつかのヒントを学ぶでしょう。

重要な画像を選択的で予圧する

あなたのサイトを見て、重要なイメージアセットを識別してください。ほとんどの場合、これはあなたができるだけ早くレンダリングしたいロゴやヒーローのイメージです。

これがどこにあるか prel リソースヒントが入ってきます。 prel ブラウザパーサーがそれを検出する前にアセットを取得する必要があることをクライアントにヒントする方法です。あなたはそれをほとんど何でも使うことができますが、それは重要な画像をプリロードするために素晴らしいことです。 HTMLで使用されている例が次のとおりです。 ＆lt;頭＆gt; ヒーローバナーイメージをプリロードするための要素：

<link rel="preload" href="/img/logo.svg" as="image">

HTTPヘッダーでプリロードを使用することもできます。

Link: </img/logo.svg>; rel=preload; as=image

下に同じページのスクリーンショットロールがChromeにロードされている2つのスクリーンショットロールを見ることができます。 1つのシナリオが使用します prel 他の人はそうではありませんが、ヒーローバナーイメージをロードする。

The effect of using preload on a hero banner — ヒーローバナーにプリロードを使用する効果

の例では prel 、バナーイメージはブラウザウィンドウに半分早く速く表示されます。ブラウザにヘッドの起動を与えたクイックワンライナーのせいで。

SVGアートワークを自動的に単純化します

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — イラストレーターの単純化ツール、曲線精度が低下する前後のアンカーポイントの数を示します

SVGの最適化は他の画像タイプとは異なり、JPEGまたはPNGとは異なり、SVGはテキスト、特にXMLマークアップで構成されているためです。これは、テキストベースの資産に適用される典型的な最適化（例えば、鉱化、GZIP / BROTLI圧縮）がSVGSに適用される可能性があることを意味します。それを超えて、SVGOのようなオプティマイザを使用してSVGのサイズをタンプすることができます。

しかし、あなたが単にベクトルアートワークを消費していないがそれを作成するだけではない場合はどうなりますか？ Illustratorユーザーであれば、簡易ダイアログウィンドウを介してパス内のアンカーポイントの量を自動的に簡素化することができます。

このダイアログはIN.にあります イラストレーターCC オブジェクト＆gtに行くことによってメニューのメニュー。Path＆GT;簡素化。曲線精度を低下させることによって（および任意の角度閾値を調整する）、アートワーク内の余分なパスポイントを除去することが可能である。この場合、曲線精度の低下が6％の小さいパスポイントを削除することに留意されたい。慎重に使用される、それはあなたのアートワークの外観を改善することさえできます。

The savings that path simplification can afford — 経路の単純化が可能な節約

賢明な言葉 - あなたがこのツールを使って積極的に積極的に手を払う方法に注意してください。カーブの精度が低く、かつて慎重に作られたアートワークがBLOBに身を占めます。右のバランスを打つ、あなたは報酬を享受するでしょう。

アニメーションGIFをビデオに変換します

With FFmpeg you can turn flabby GIFs into svelte video — FFMPEGを使用すると、FLABBY GIFをSVELTEビデオに変えることができます

私たちはみんな良いアニメーションGIFを愛しています。彼らはほぼ任意の感情を効果的に伝えますが、彼らは本当に大きくなることができます。 Gifsicleなどの画像のオプティマイザは過剰なキロバイトを剃るのを助けることができますが、チケットはそれらのGIFをビデオに変換してHTML5に埋め込むことです。 ＆lt;ビデオ＆gt; 鬼ごっこ。 the FFMPEG コマンドラインユーティリティはこのタスクに最適です。

 FFMPEG -I Animated.gif -B：v 512K Animated.Webm
ffmpeg -i animated.gif -b：b：v 512k animated.ogv.
ffmpeg -i animated.gif -b：v 512k Animated.mp4

上記のコマンドはソースGIFを取ります（ animated.gif. ）-i引数の入力として、最大512kbpsの可変ビットレートでビデオを出力します。私たち自身のテストでは、989KBのアニメーションGIFを取り、155KB MP4、109KBのOGV、および85KBのWebMに縮小することができました。すべてのビデオファイルはソースGIFに品質が匹敵しました。の普遍のために ＆lt;ビデオ＆gt; ブラウザでのタグサポート、これら3つのビデオフォーマットは次のように使用できます。

＆lt;ビデオプリロード= "なし"＆gt;
  ＆lt; src = "/ videos / animated.webm" type = "video / webm"＆gt;
  ＆lt; src = "/ videos / animated.ogv" type = "video / ogg"＆gt;
  ＆lt; sorc = "/ videos / animated.mp4" type = "video / mp4"＆gt;

このルートに行くことにした場合は、必ず注文してください ＆lt; Source＆GT。 最適なフォーマットが最初に指定され、最後に最適な最適な形式が指定されるようにタグ。ほとんどの場合、これは最初にWebMのビデオから始めることを意味しますが、各ビデオの出力ファイルサイズを確認し、最初に最小のものであるものと一緒に行ってください。

あなたがffmpegを持っていないか、それが何であるかわからないならば、見てみな。 HomeBrewやChocolateyなど、ほとんどのオペレーティングシステムパッケージマネージャをインストールするのは簡単です。

InterSectionObServerの遅延負荷

遅延ロードイメージはすでにやっているかもしれないものですが、多くの遅延ロードスクリプトはCPU集中的なスクロールイベントハンドラを使用しています。そのような方法は、ページ上の相互作用を低調に推移させるのに寄与する。処理能力の少ない古いハードウェアは、この種のコードの悪影響を伴うことがさらに進んでいます。実行スロットルは学位に役立ちますが、それでも要素がいつビューポートに入っているかを判断するための厄介ではなく、非効率的な回避策です。

ありがたいことに、Intersection Observer APIは、要素がいつビューポートにあるかを判断するためのより単純ではるかに効率的な方法を提供します。これがいくつかの基本的な遅延ロードイメージマークアップの例です。

 img class = "lazy" data-src = "/ images / lazy-loaded-image.jpg" src = "/ images / placeholder.jpg" Alt = "怠け者です。" width = "320" height = "240"＆gt;

ここでは、プレースホルダーイメージをロードします SRC 属性を算出して、怠惰に負荷をかける画像のURLを保存します。 DATA-SRC 属性。それをすべて上手くすると、私たちは ＆lt; img＆gt; 要素に簡単にアクセスするための怠惰なクラス QuerySelectorすべて 。そこから、このコードを使用します。

 Document.AdDeventListener（ "domcontentloaded"、function（）{
  （ "interSectionObServer"（ウィンドウ＆アンプ内の "InterSectionObServer"＆amp; in amp;＆amp; in amp; in getersextobserverentry.prototype）{
    要素= Document.QuerySelectorすべて（ "img.lazy"）;

    VAR ImageObServer =新しいInterSectionObServer（関数（エントリ、オブザーバ）{
      Entries.Foreach（関数（エントリ）{
        if（entry.is intersection）{
          entry.target.SetAttribute（ "src"、entry.target.getAttribute（ "data-src"））。
          entry.target.classlist.remove（ "lazy"）;
          ImageObServer.Unobserve（entry.target）;
        }
      }）;）
    }）;）

    Elements.Foreach（機能（イメージ）{
      ImageObServer.observe（image）;
    }）;）
  }
}）;

ここではコードをバインドします資料オブジェクトの domcontentloaded イベントこのコードは、InterSectionオブザーバが現在のブラウザによってサポートされているかどうかを確認します。それがあることがわかったら、私たちはすべてをつかみます im クラスの要素 怠け者に withう QuerySelectorすべて そしてオブザーバーをそれらに取り付けます。

オブザーバーには、私たちが観察している要素への参照が含まれています（ エントリ ）そして観察者自体（ 観察者 ）。このコードは各オブザーバーエントリのエントリの上に蝶番を付けます アイシンテクスター 値。観察された要素はビューポートから外れていますが、 アイシンテクスター 戻り値 0 。要素がビューポートに入ると、それはより大きい値を返します 0 。この時点でイメージの内容を交換する DATA-SRC に属して SRC 属性、およびremoveを削除します 怠け者に クラス。与えられた画像遅延負荷の後、オブザーバーはオブザーバーのオブザーバと共に削除されます un un 方法。

このプロセスはスクロールハンドラとムックするよりはるかに簡単ですが、交差点オブザーバーは普遍的な支援を受けていないため、故障する必要があります。スクリプトをつけるための並べ替えで行くのは、交差点オブザーバーを使用する怠惰なローダーを書いていますが、Yesteryearのメソッドにも転がされています。あなたはそれをつかむことができますここに。

この記事はもともと第301号に発行されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 ここで問題301を購入してください または ここで購読する 。

関連記事：

SVGの完全なガイド
ベクトルツールを使用する：Webデザイナーのアプローチ
JavaScriptでSVGをアニメートしてください

4個の必須画像最適化ヒント

重要な画像を選択的で予圧する

SVGアートワークを自動的に単純化します

アニメーションGIFをビデオに変換します

InterSectionObServerの遅延負荷

操作方法 - 最も人気のある記事

NPMで生産性を向上させるための21の方法

ユーザーフレンドリーなWebフォームを作成するための10の規則

Zbrushが付いているより良いVDMへの4つのステップ

Cinema 4DでRedshiftプロキシを作成する方法

サイトにビジュアルキューを追加する

クリップスタジオペイントでカスタムブラシを作成する

realflowでスプラッシュ効果を作成する

あなたの静物画絵画を鮮明にする

カテゴリ