Cloudimageを使用する任意のデバイス用にすべての画像を自動的に最適化することにより、Webサイトのパフォーマンスを向上させます
公開: 2020-04-22Lighthouseによると、画像の最適化は、ウェブサイトの速度とパフォーマンスの低下という最も一般的な問題の1つです。
最適化されていない画像がページの読み込み速度を9秒以上、場合によってはそれ以上遅くしている可能性があります。
ページが遅いと、バウンス率が高くなり、SERPの位置が低くなります。これは、トラフィックが少なくなり、顧客への支払いが少なくなることを意味します。
画像の最適化には何が含まれますか？
ウェブサイト上のすべての画像の最適化は非常に複雑な作業であり、それを正しく行うには専門知識とかなりの時間が必要です。
プラグインは時間を節約するのに役立ちますが、正しく処理されない場合、Webサイト全体の構造を破壊し、メディアの一部を完全に削除する可能性もあります。
これが複雑な仕事であると考える理由を理解するために、Cloudimageが適切な画像最適化に不可欠であると考える20ポイントのチェックリストを次に示します。
- CDN配信を組み込む
- TTFBを最適化する
- 360度の製品ビューを使用する
- 画像がレスポンシブであることを確認してください
- 画像のサイズを正しく変更する
- 適切な画像形式を使用する
- 画像を圧縮する
- alt属性を最適化する
- 写真にはっきりとキャプションを付ける
- 製品の角度に注意してください
- 色を混ぜる方法を知っている
- 感情を融合させたビジュアルを作成する
- 製品に対応する背景を使用する
- サムネイルを最適化する
- 画像サイトマップを使用する
- クロマサブサンプリングを適用する
- 重要でない画像を遅延ロードする
- イメージスプライスをデプロイする
- 画像アセットのキャッシュを開始します
- 重要な画像アセットをプリロードする
技術的な観点から、上記のリストから最も重要なポイントは、サイズ変更、フォーマットの最適化、遅延読み込み、画像圧縮、応答性、およびCDN配信です。
あなたがあなたのウェブサイトに11.000の画像を持っているとしましょう。
それらの最適化を完了するのにどのくらい時間がかかりますか？
今、それを自動的に行うことができると想像してください！
これはCloudimageが行うことです。
当社のソフトウェアを介してすべての画像を一括アップロードすることができ、それらは自動的にキャッシュされてクラウドにアップロードされます。
その後、最適化が行われます。
画像のサイズ変更
世界中の3つのデータセンター（カナダ、フランス、シンガポール）にあるCloudimageのサイズ変更サーバーは、origin_image_urlから元の画像をダウンロードし、操作とフィルターのパラメーターに基づいて変換し、最後にロケットを介してWebサイトまたはモバイルアプリに表示します-高速CDN。
Webサーバー、Amazon S3バケット、またはHTTP経由でアクセス可能なその他のストレージでホストされている元の画像の例。
幅と高さの両方を指定すると、元の画像の比率を無視するか、維持することができます。 また、画像にパディングを追加することもできます。 Cloudimageには、次のサイズ変更モードがあります。
作物
定義された幅と高さに合うように画像をカットする画像の比率を維持します。
フィット
必要なサイズを満たすために、パディングを追加して比率を維持しながら画像のサイズを変更します。
バウンド
比率を維持しながら画像のサイズを変更しようとします。 フィットに似ていますが、パディングはありません。
カバー
元の画像の比率を無視して、指定された幅と高さに画像のサイズを変更します。
回転する
画像を指定した角度で反時計回りに回転します
トリム
画像の周りの単色フレームを削除します。
画像圧縮
圧縮フィルターを使用して、画像の圧縮（出力形式と品質）を変更できます。
サイズ変更操作や画像フィルターと一緒に圧縮フィルターを使用できます。
デフォルトでは、Cloudimageは画像をWebPとして配信します。 この形式がクライアントブラウザでサポートされていない場合は、JPEGまたはPNGにフォールバックします。
Optipress –機械学習ベースの画像圧縮
JPEG圧縮の主な課題は、異なる画像ごとに最適な圧縮率を見つけることです。
同じ圧縮パラメータで圧縮された異なる画像は、異なる知覚品質をもたらす可能性があります。
さらに、異なるサイズの同じ画像は、目に見える品質を損なうことなく最大サイズのゲインを達成するために、異なる圧縮戦略を必要とする場合があります。
これを克服するために、OptipressJPEG圧縮アルゴリズムを開発しました。
Optipressは、特定の画像の特徴と現在の圧縮パラメータを分析することにより、最適なJPG圧縮アプローチを見つけます。
機械学習モデルは、この画像に最適な圧縮戦略を決定します。
次に、人間の視覚システムのシミュレーションモデルに基づいて品質が評価され、知覚的な品質の低下なしに最適な圧縮が実現されます。
変換プリセット
多くの画像に同じ変換を適用する場合は、プリセットを定義し、プリセット名（X）のみを使用して変換を適用できます。
p = X
サイズ変更変換または画像フィルターは、透かしや画像圧縮パラメーターと同様に、プリセットに含めることができます。
これにより、画像の最適化時間を50％以上節約し、関係者全員が簡単に実行できる一括最適化プロセスが可能になります。
レスポンシブ画像を簡単に
レスポンシブ画像は、エンドユーザーの画面サイズに応じて画像サイズを調整するため、さまざまな画面サイズでウェブサイトやモバイルアプリをより高速に読み込むことができます。
Cloudimageチームは、すべてを自動化するJSプラグインを開発しました。
Cloudimage JS libは、すべてのURLを自動的に適応させ、組み込みのレスポンシブデザイン、遅延読み込み、その他多くの機能を提供して、ウェブサイトの応答性を高め、高速にし、画像に優れた読み込み効果を追加します。
遅延読み込みとキャッシュを有効にすると、ウェブサイトの読み込み時間が少なくとも40％向上することを確認できます。 これにCDNを追加すると、その割合は60％にもなります。
コンテンツ配信ネットワーク
Cloudimageは、コンテンツ配信ネットワークを活用して、世界中の画像の配信を加速します。 複数のCDNプロバイダーと協力して、画像の配信を最適化し、優れた信頼性を提供します。
CDNは、イメージの高速化に加えて、DDoS（Distributed Denial of Service）保護を提供します。これは、サーバーのシールドとして機能し、ダウンタイムを回避します。
CDNは通常、画像がエンドユーザーから要求されている限り、画像をキャッシュします。
数分で実装
Cloudimageを非常にユニークなものにしているのは、そのサービスを非常に高速に実装できることです。
ウェブサイトでトラフィックのピークが発生している場合は、いつでもcloudimageにアクセスして画像を最適化し、それらのピークが即座に吸収されるようにすることができます。
これにより、さまざまなデバイス間で完璧なパフォーマンスと高速なページ読み込み速度が得られます。
さらに、実装は非常に簡単であり、チーム（コンテンツの作成から投稿および監視までのWebサイトを担当するチーム）間のコラボレーションのプロセスが単純かつ効率的になります。
これは、私たちのほとんどが次の期間にホームオフィスを使用することを余儀なくされる場合に特に重要です。
Cloudimageサービスの仕組みの詳細については、cloudimage.ioにアクセスしてください。