画像を最適化してページ速度/ウェブページの読み込み時間を改善する方法は？

これはほぼStackOverflowの質問ですが、Photoshopやその他のツールに完全に関連しています。すべてのPagespeedテストをすべてのWebサイトに対して行うと、「ロスレス圧縮画像Xによる画像の最適化」というコメントが表示され、ページのランクが大幅に高くなることがよくあります。

Photoshopで「Web用に保存」ですべての画像を既に保存していますが、「ロスレス圧縮により画像を最適化」する方法をさらに疑問に思っていました。私の知る限り、できる限りのことはやっています。

画像を最適化してウェブページの読み込み速度を向上させるにはどうすればよいですか？

おそらく、最初のステップはPhotoshopよりも計画的です。

1）画像ファイルは必要ですか？それとも別のものを使用できますか

• 背景色。
• CSSグラデーション。

2）そのファイルの寸法は必要ですか？または使用できますか

• 拡大された下の次元。
• 低解像度を何かでマスクしますか？その上のパターン、ぼかし、それを暗くします。
• パターン。
• ハイレゾで撮った画像は本当に価値があるのでしょうか？

3）ファイル形式は適切ですか？

それは石に刻まれていませんが：

• 写真のJpg。
• 無地またはグラデーションのpng。ロゴ、グラフ。
• スケーラブルな画像、プレーンカラー、グラデーションのSVG画像。

4）アニメーションの代替を使用できますか？

• 最適化されたパレットとディザリングを使用したアニメーションgif。
• Cssアニメーション。

5）スクリーンデバイスに必要な適切なメディアクエリを準備しましたか？

• そのデバイスにその寸法が必要ですか？

6）ここに特定のjpg圧縮が行われます

写真用。私が必要とする実際の次元を決定した後：

• 圧縮アーチファクトが見られるかどうかは本当に重要ですか？もう少しプッシュできますか？その価値はありますか？
• 各写真にカラープロファイルを含める必要がありますか？

ここに「心理学的」な問題があります。ウェブ用に保存する場合、「低」と表示されているだけで品質を使用せず、サイトを高品質にする必要がありますか？

7）そしていくつかの詳細

• プログレッシブjpgは、非プログレッシブよりも少し多くのスペースを使用します。
• jpgの最適化をオンにします。
• ブラーオプションをオフにします。
• 4：4：4アルゴリズムを使用すると、品質は向上しますが、高品質では圧縮が少なくなります。4：2：2は圧縮率が高くなります。
• cmykではなく、rgbファイルを使用してください。
• 「ウェブ」の色設定でファイルを準備します。この方法で、カラープロファイルを削除できます。

最適化ツールは常に、常により良い方法を教えてくれます。

アルゴリズムが言うためにどのパラメーターを使用できるか。ああ、あなたがあなたのウェブサイトに見せている肖像画は、「損失」圧縮の適切な量を持っていますか？

再び。「ロスレス」はここでは意味がありません。

最終的なウェブサイトのデザインを配信する前に、画像の最適化に特化した専用のツールを使用して画像を最適化する必要があります。Photoshopでも大丈夫ですが、他のツールの方が優れていると多くの人がコメントしているのを見てきました。

私が聞いたところによると、ImageMagickはこの目的にかなり適しています。ただし、コマンドラインの初心者としては、少し時間をかけて個人的に習得する必要があります。コマンドラインに慣れている場合は、おそらくそれが最適です。

今はImageMagickをマスターする時間がないので、画像を入力できる無料のオンライン最適化ツールを探すことにしました。最適化されたバージョンが出力されます。

私が見つけたいくつかのツールは次のとおりです。

• Compressor.io-調整可能なオプションはほとんどありませんが、かなり驚くべき結果です（平均でファイルサイズが60％から80％削減されます）
• ImageOptimizer.net-標準に見える
• tinyPNG-個人的に使用して良好な結果が得られます（透明度を維持しながら、アルファチャネル付きの24/32ビットPNGを8ビットPNGに変換できます）

私は個人的に、ゲームを変えるものについて聞いていない限り、利用可能なすべての無料オプションを備えた追加のツールにお金を払う理由はありません。

あなたは、おそらくのようなキーワードを組み合わせることにより、より多くの無料のオンラインとオフラインのツールを見つけることができますreduce image file size、image compression、PNG / JPEG / GIF optimisation tools。

私の経験から、Photoshopの「Web用に保存」ルーチンを実行すると、画像がWeb用に最適化されます。それにもかかわらず、ページ速度をテストすると、最適化アラートが表示されますが、達成する最適化のKBを確認してください。ほとんどの場合、約1〜5 kbです。私はスコットに同意します。あなたはページ速度に夢中になってはいけません。

WordPressを使用している場合は、EWWW画像オプティマイザーなどの最適化プラグインをインストールできます。これにより、アップロードする各画像が処理され、一定の割合で縮小されます。クライアントが自分でアップロードする場合に便利です。

別のオプションは、http：//www.jpegmini.com/などのデスクトップ最適化ソフトウェアを使用することです。これは、品質と圧縮の比率が高く、バッチ処理が可能です。

あなたの場合、私はそれが終わったと思います。この時点から、Amazon S3などの強力なホスティングを使用してサーバー側を確認し、そこからファイルを提供して最高のパフォーマンスを実現する必要があります。

Wordpressユーザーの場合は、ロスレス画像圧縮のOptimus Image Optimizer（免責事項：プラグインを作成した会社で働いています）も確認できます。それにもかかわらず、このプラグインを他のプラグインと比較した大きな違いは、画像をWebP形式に変換できることです。これは、PNGと比較してファイルサイズを最大26％削減することが知られています。

これにより、画像が非常に小さくなり、クライアントが画像をダウンロードする時間が短縮されるため、ページの読み込み時間をさらに短縮できます。

これも一見の価値があるかもしれません...

https://developers.google.com/speed/pagespeed/

過去にPageSpeedを使用したことがあります。

サイトからの読み込みページをテストし、読み込み時間を短縮するための一般的に役立つ提案を提供します。

他の人が指摘したように-画像の最適化も非常に役立ちます。

Mac-私はImageOptimを使用しています...結果が本当に好きです。

https://imageoptim.com

PS：私はスパムしようとはしていません。:-D