Magento 2での画像の最適化：ベストプラクティス

パフォーマンスは収益に直接影響します。画像はWeb上で最も頻繁に要求されるタイプのリソースであるため、画像の最適化は、Magentoストアのコンバージョン率を向上させる際に考慮すべき最初のステップです。

このチュートリアルでは、Magentoストアの画像を最適化する方法を紹介します。

ワンサイズですべての商品画像

/ media / catalog / product /内の画像ファイルに対して圧縮を実行することにより、製品画像を一括で最適化できます。

使用する必要のあるツールは次のとおりです： GIFSicle 、 JPEGTran 、 OptiPNG 。 これらのコマンドラインは、ファイル名を変更せずに、現在の画像を最適化されたバージョンに書き換えます。 キャッシュを更新する必要がない間、キャッシュされたすべての画像も最適化されます。

• PNG画像： OptiPNGの使用

  optipng -o7 -strip all media / catalog / product/*。png

• JPEG画像： JPEGTranの使用

  find media / catalog / product / -name "* .jpg" -type f -exec jpegtran -copy none -optimize -outfile {} {} \;

• GIF画像： GIFSicleの使用

  gifsicle --batch --optimize = 3 media / catalog / product/*。gif

適切な画像形式を使用する

適切な画像形式を使用すると、画像のファイルサイズを小さくすることもできます。 たとえば、JPEGやPNGなどの一部の画像形式は、写真やWeb画像に最適ですが、GIFやBMPなどの限られた（256）色の画像形式は、ロゴ、ボタン、アイコンなどの小さな解像度のファイルに適しています。

画像のニーズに使用する画像形式をよりよく理解するには、以下の表を参照してください。

GIFをビデオに置き換える

GIFは、コンテンツをより魅力的にするための優れた方法ですが、ページの読み込み速度を最適化する場合は、最適なオプションではない可能性があります。 では、別の方法は何ですか？

動画付き！

GIFをMP4またはWebMビデオに変換できます。 ただし、Googleの灯台を使用してそれが可能かどうかを確認する必要があります。 変換できるGIFがある場合は、「アニメーションコンテンツにビデオ形式を使用する」という提案が表示されます。

次のステップはGIFを変換することです。 MP4ビデオを取得するには、FFmpegを使用することをお勧めします。 コンソールで次のコマンドを実行します。

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

これはFFmpegに、 -iフラグで示されるmy-animation.gifを入力として受け取り、それをmy-animation.mp4というビデオに変換するように指示します。

GIFのサイズが奇数の場合は、次のようなクロップフィルターを含めます。

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

WebMビデオの場合、コンソールで次のコマンドを実行します。

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

*注：WebMビデオはMP4ビデオよりも小さいですが、比較的新しいため、すべてのブラウザーがこの形式をサポートしているわけではありません。

画像をWebPに変換する

WebPは、ファイルサイズに対する画質の比が非常に優れた次世代の画像形式です。 JPGやPNGと比較すると、WebP画像は平均25〜35％小さく、画質の低下はほぼゼロです。

ただし、画像形式はまだ比較的新しいため、Magento 2ではサポートされておらず、Safariなどのブラウザではサポートが制限されています。 MagentoストアでWebPを使用するには、Magento 2 Convert Images to WebPなどの拡張機能を使用して、すべての画像をWebPに自動変換できるようにする必要があります。

レスポンシブ画像を使用する

最高のページパフォーマンスが必要な場合は、「万能」アプローチで妥協しないでください。 代わりに、デバイスごとに異なる画像サイズを提供してみてください。

タスクを支援するツールはいくつかありますが、sharpnpmパッケージとImageMagickCLIツールがおそらく最も人気があります。

シャープ（自動サイズ変更用）

シャープをノードスクリプトとして使用するには、このコードをプロジェクトに別のスクリプトとして保存し、それを実行して画像を変換します。

 const sharp = require('sharp'); const fs = require('fs'); const directory = './images'; fs.readdirSync(directory).forEach(file => { sharp(`${directory}/${file}`) .resize(200, 100) // width, height .toFile(`${directory}/${file}-small.jpg`); });

ImageMagick （1回限りの画像サイズ変更用）

画像のサイズを元のサイズの54％に変更するには、端末で次のコマンドを実行します。

変換-サイズ変更54％picture.jpg picture-small.jpg

幅500px、高さ300pxの範囲内に収まるように画像のサイズを変更するには、次のコマンドを実行します。

 # macOS/Linux convert picture.jpg -resize 500x300 picture-small.jpg # Windows magick convert picture.jpg -resize 500x300 picture-small.jpg

*注：推奨される画像サイズの数は3〜5です。 もちろん、作成するサイズが多いほど、デバイスでの表示は向上しますが、サーバー上でより多くのスペースを占める可能性があります。

CDNを使用する

CDNは、ソース画像を改ざんすることなく、オンザフライで画像を最適化するもう1つの方法です。 Magentoの場合、公式の推奨事項はFastlyです。これは、Magentoと緊密に統合されており、フルページのキャッシュソリューションとともにセキュリティ上の利点が追加されているためです。

サードパーティの拡張機能を統合する

画像を最適化するもう1つの方法は、Magento拡張機能を使用することです。 拡張機能は、画像がページの読み込み速度を低下させないようにするための作業を行います。

Magentoストアに適した便利な拡張機能を次に示します。

MageplazaによるMagento2の画像オプティマイザー

この拡張機能は、ストア管理者がPNG、JPG、GIF、TIF、BMPなどのさまざまな種類の画像を圧縮することをサポートし、圧縮レベルを設定することもできます。 また、圧縮は頻繁にアクティブ化できるため、心配する必要はありません。

AmastyによるMagento2の遅延読み込み

Lazy Load拡張機能を使用すると、ユーザーがページを下にスクロールしたときにのみ製品情報が入力されるため、最初のページレンダリングが高速化されます。 また、最高のページパフォーマンスを提供するための画像圧縮とコード構造の最適化という追加の最適化ツールもあります。

お役に立てれば！