メイン グラフィックデザイン ウェブサイトのパフォーマンスを向上させるために GIF ファイルのサイズを削減する方法

ウェブサイトのパフォーマンスを向上させるために GIF ファイルのサイズを削減する方法



知っておくべきこと

  • 画像の周囲の余分なスペースをトリミングして、ピクセル寸法を縮小します。 GIF を準備するときは、出力サイズを縮小します。
  • 画像内の色数を減らします。アニメーション GIF の場合は、フレーム数を減らします。
  • ディザリングやインターレースは避けてください。ソフトウェアに GIF を保存するための非可逆オプションがある場合、これによりファイル サイズが大幅に削減されます。

この記事では、Web サイト上の GIF のファイル サイズを削減して、画像をより速く読み込み、Web サイトをより効率的に動作させるために考慮すべき一般的なルールについて説明します。

ウェブサイトのパフォーマンスを向上させるために GIF ファイルのサイズを削減する方法

GIF をできるだけ効率的にするには:

  1. 画像の周囲の余分なスペースをトリミングします。画像のピクセル寸法を減らすことは、ファイル サイズを減らす最も効果的な方法です。 Photoshop を使用している場合は、 トリム コマンドはこれに適しています。

  2. GIF 画像を準備する場合は、出力サイズを小さくしてください。各グラフィック編集プログラムは、サイズ変更のためのさまざまなコマンドを提供します。

  3. 画像内の色数を減らします。 GIF では 256 色しか表示されませんが、画像に数色しか含まれていない場合は、とにかく色数を減らしてください。 GIF で色を減らす場合、色数を次のオプションの中で可能な限り小さい値 (2、4、8、16、32、64、128、または 256) に設定すると、最適な圧縮が得られます。

  4. アニメーション GIF の画像内のフレーム数を減らします。一般に、無駄なアニメーションは避けてください。過剰なアニメーションは Web ページのダウンロードに時間がかかるため、多くの人が気が散ると感じます。

    2018年のアンドロイドを知らずにスナップチャットでスクリーンショットを撮る方法
  5. 使用する場合 フォトショップ を使用して GIF ファイルを作成します。 名前を付けてエクスポート メニュー項目。選択する ファイル > 名前を付けてエクスポート 。メニューが開いたら選択します GIF ファイル形式として使用し、画像の物理的寸法 (幅と高さ) を縮小します。

  6. Adobe Photoshop Elements を使用している場合は、 ファイル > ウェブ用に保存 。このプロセスにより、 ウェブ用に保存 このダイアログ ボックスは、Adobe Photoshop にもあります。 ファイル > 輸出 > Web 用に保存 (レガシー) 。開いたら、ディザリングを適用し、色を減らし、画像の物理的な寸法を変更します。

    Google Home のアラーム音を変更する方法
  7. ディザリングを避けてください。 ディザリング 一部の画像の見栄えが良くなる場合がありますが、ファイル サイズが増加します。ソフトウェアで許可されている場合は、より低いレベルのディザリングを使用して余分なバイトを節約します。

  8. 一部のソフトウェアには、GIF を保存するための非可逆オプションがあります。このオプションを使用すると、ファイル サイズを大幅に削減できますが、画質も低下します。

  9. インターレースは使用しないでください。通常、インターレースを使用するとファイル サイズが増加します。

  10. Photoshop と Photoshop Elements の両方にダウンロード時間が表示されます。気にしないでください。これは 56k モデムの使用に基づいています。ドロップダウン メニューからケーブル モデムを選択すると、より有効な番号が表示されます。

GIF画像とウェブ

GIF 画像は、万能のソリューションではありません。 GIF 画像には最大 256 色があるため、注意しないと画像と色の大幅な劣化が予想されます。

GIF ファイル形式は、多くの点で、Web の初期にまで遡るレガシー形式です。 GIF 形式が導入される前は、Web 画像は白黒で、RLE 形式を使用して圧縮されていました。 GIF は 1987 年に Compuserve が Web イメージング ソリューションとしてこの形式をリリースしたときに初めて登場しました。当時、デスクトップにはカラーが登場したばかりで、Web へのアクセスは電話回線に接続されたモデムによって行われていました。この新しいインフラストラクチャにより、電話回線を介して Web ブラウザに短時間で配信できるように画像を十分に小さく保つ画像形式の必要性が生じました。

GIF 画像は、ロゴや線画など、カラー パレットが限られたシャープなグラフィックに最適です。 GIF 形式は写真に使用できますが、減色カラー パレットでは画像にアーティファクトが生じます。それでも、 グリッチアート運動 そして、 シネマグラフ GIF 形式への新たな関心が高まっています。

よくある質問
  • Discord の絵文字 GIF のサイズを変更するにはどうすればよいですか?

    GIF を Discord にアップロードすると、必要に応じて画像が 128x128 ピクセルに自動的に調整されます。 Discord では最大 8MB (Nitro サブスクリプションの場合はそれ以上) までの画像やその他のファイルを共有できますが、絵文字のサイズ制限は 256kb です。

  • 品質を落とさずに GIF を圧縮するにはどうすればよいですか?

    品質に影響を与えずに GIF を圧縮する最も簡単な方法は、エクスプローラー独自の圧縮機能を使用することです。 WinZip などの一部のサードパーティ圧縮ソフトウェアを使用して、全体的な視覚的な品質を低下させることなく GIF を圧縮することもできます。

    錆びた壁を壊す方法
  • 複数の GIF を 1 つの GIF に結合するにはどうすればよいですか?

    Photoshopなどの画像編集ソフトを使用して、 ファイル > 輸入 > ビデオフレームからレイヤーへ 結合したいGIFをすべて選択します。最初の GIF 内のすべてのアニメーション フレームを選択し、選択してコピーします。 > アニメーション 。次に、次の GIF に移動し、前の GIF を挿入する場所を選択して、コピーしたフレームに貼り付けます。追加したい他の GIF についてもこの手順を繰り返し、完了したら完成した結合をエクスポートします。

興味深い記事

エディターズチョイス

Windows拡大鏡のコマンドライン引数(magnify.exe)
Windows拡大鏡のコマンドライン引数(magnify.exe)
Windows Magnifierコマンドライン引数のリスト(magnify.exe)Magnifierは、Windows 10にバンドルされているユーザー補助ツールです。Magnifierを有効にすると、画面の一部またはすべてが大きくなり、単語や画像が見やすくなります。ユーザーアカウントにサインインする前に拡大鏡を起動することができます。あまり知られていない機能
Chrome にカメラへのアクセスを許可する方法
Chrome にカメラへのアクセスを許可する方法
さまざまなアプリが特定のアクションにカメラやマイクを使用する必要があります。過去のある時点で、このアクセスを許可するように求められた可能性があります。ここでは Chrome も例外ではありません。一部のサイトと Web ページでは
ハンズオン: LG Watch Urbane と LG Watch Urbane LTE のレビュー – 高度なスマートウォッチ
ハンズオン: LG Watch Urbane と LG Watch Urbane LTE のレビュー – 高度なスマートウォッチ
LG は、数週間前に最新のスマートウォッチである LG Watch Urbane と Urbane LTE の詳細を発表しましたが、バルセロナでの MWC で初めてデバイスを手にする機会がありました。 LGの
MicrosoftはE3Xboxイベントを4Kでストリーミングします
MicrosoftはE3Xboxイベントを4Kでストリーミングします
マイクロソフトは、2017年6月11日のElectronic Entertainment Expo(E3)2017中にXbox関連の別の会議を開催します。このイベントは、このホリデーシーズンにリリースされる予定のマイクロソフトの次のXboxイテレーションであるプロジェクトScorpioに焦点を当てます。もちろん、いくつかのゲームやサービスの発表がありますが、イベント中の最大の焦点
USB、HDMI、またはカードリーダーのポートが錆びることはありますか?
USB、HDMI、またはカードリーダーのポートが錆びることはありますか?
通常、あらゆる種類の電子機器に適用される錆という用語を聞くと、古い何かのビジョンが頭に浮かびます。残念なことに、USB、HDMI、または電子機器用のカード リーダー ポートでは、実際に錆が発生することがあります。
Windows10のスタートメニューに設定を固定する方法
Windows10のスタートメニューに設定を固定する方法
Windows 10の[スタート]メニューに[設定]を固定することができます。設定アプリの個々のページとカテゴリを固定できます。方法は次のとおりです。
Bluetooth ヘッドフォンを PS4 に接続する方法
Bluetooth ヘッドフォンを PS4 に接続する方法
夜遅くまでゲームをして家にいる人全員を起こしてしまうのはやめましょう。 BluetoothヘッドフォンをPS4に接続する方法は次のとおりです。