srcsetと圧縮を使用したJoomlaレスポンシブ画像

最適化？チェック。Lazy loadingsrcset役立ちます。

Joomla! ブログで高画質の画像を使用しているのに、削除できない、あるいは削除したくないという方もいらっしゃるかもしれません。ご心配なく。Joomla! の Droppics プラグインを使えば、画像に一般的な最適化を適用するだけでなく、ユーザーのデバイスに応じて異なるファイルを提供することができます。.

HTML srcset を使用したレスポンシブ画像

（ src ）で定義されることをご存知でしょう。画像のソースとは、ブラウザがJoomla!ユーザーに表示する画像を読み込む場所です。特定の画像に一貫したソースを使用する場合の問題は、ファイルのサイズに関わらず、常に同じファイルが読み込まれてしまうことです。

例えば、記事上部にヒーローバナーがある場合、すべてのデバイスで同じ画像が読み込まれます。ブラウザは画像をダウンロードした後、サイズを大幅に縮小します。特にモバイルデバイスでは、サイズが大幅に縮小されることがあります。最新のブラウザでは、画像のソースだけでなく、ソースセット（ srcset）。

名前が示すように、ソースセットは単一のソースではなく、ソースのリストです。各ソースはブラウザの幅に関連付けられているため、モバイルデバイスでは小さな画像がダウンロードされ、デスクトップからJoomla!ブログにアクセスするユーザーはフル解像度の画像をダウンロードします。つまり、画像ソースセットは画像をレスポンシブ画像に変換します。.

ソースセットを使用すると、読み込み時間が短縮されるだけでなく、SEOスコアも向上します。ただし、同じ画像の異なる解像度のコピーをユーザーが必要な時にすぐに利用できるという、わずかなメリットがあります。srcset属性やソースセットに関するその他の詳細は、こちらでご覧いただけます。Joomla !ブログですぐに使い始めたいという方は、このまま読み進めてください。

Droppicsを使ってJoomla!で拡大縮小した画像を提供する

Droppics は Joomla! のギャラリー管理拡張機能としてご存じかもしれませんが、実際には多くの機能が裏で動作しており、その仕組みは皆さんの知らないところにあるかもしれません。例えば、Droppics は現在、ソースセットを使用してユーザーに最適な画像を読み込みます。この機能にご存じない方は、もしかしたらあなたもこの機能を活用していないのかもしれません。.

メインパラメータタブを開きレスポンシブ画像。変更を保存して、新しい設定を確定してください。

レスポンシブ画像ように、この設定を有効にすると、DroppicsはJoomla!の画像ごとに2つの新しいサムネイルを作成します。これらのサムネイルはレスポンシブ画像そのものであり、Joomla!ブログにアクセスするデバイスに応じて表示されます。

投稿を作成してDroppics画像を挿入すると、拡張機能が自動的にsrcsetを。信じられないですか？フロントエンドのHTMLを調べてみると、デバイスサイズごとに複数のソースがあることがわかります。

一般的な最適化や lazy loading確かに有効ですが、それだけでは限界があります。場合によっては、単一のソースではなく、画像ソースセットを提供するという最新のHTMLテクニックを用いることで、読み込み時間の遅延を克服できるかもしれません。.

でも、待ってください。それだけではありません。パズルにはまだ欠けているピースがあります。.

Joomla! で srcset 画像を圧縮する

同じ画像を複数コピーする価値があるのか​​疑問に思う方もいるかもしれません。サーバーの容量を節約したい、あるいは新しい画像が大量に保存されてしまうのが心配なのかもしれません。ソースセットを使用しているからといって、圧縮などの他の最適化手法と組み合わせることができないわけではありません。.

ImageRecycleはJoomla!でも利用可能で、Droppicsとシームレスに統合できます。Joomla!のソースセット画像が生成されるとすぐに自動的に圧縮するように設定することも可能です。ロスレス圧縮（最適な保存方法）では最大80%、ロスレス圧縮（元の画像のまま保存する方法）では最大20%のファイルサイズを節約できます。違いについて詳しくは、こちらを。

Joomla! の拡張機能設定で、 ImageRecycle設定できます。「詳細設定」タブに移動し、 「保存時にメディアを最適化」を ImageRecycleのインターフェースから、最適化する画像を手動で選択することもできます

読み込み時間は多面的な問題です。画質を維持しながらファイルサイズを最小限に抑え、ストレージ容量を節約する必要があります。Droppicsの魔法のようなソースセットと ImageRecycleの圧縮技術を活用すれば、これらすべてが実現できるだけでなく、簡単かつ自動化されたプロセスになります。.