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

最適化？よし。 Lazy loading？これもよし。それでも、Joomla! ウェブサイトは動作が重く、モバイル デバイスや低速回線では読み込みに時間がかかりすぎる。でも、諦める必要はありません。そんな時にこそ HTML 構造が役立ちます。具体的には、画像ソース セット、つまり srcset 属性です。

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

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

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

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

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

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

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

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

Joomla!ブログでsrcset属性を使用するには、まずDroppicsの設定で有効にする必要があります。Droppics メインパラメータ タブに移動し、 レスポンシブ画像 。変更を保存して、新しい設定を確定します。

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

投稿を作成してDroppicsの画像を挿入すると、拡張機能が自動的に srcsetを 。信じられないですか？フロントエンドでHTMLを検証してみてください。さまざまなデバイスサイズに対応した複数のソースが見つかるはずです。

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

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

Joomla! で srcset 画像を圧縮する

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

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

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

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