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

最適化？ 小切手。 Lazy loading？ もう一度チェック。 それでも、あなたのJoomla！ ウェブサイトが不格好で、モバイルデバイスへの読み込みに時間がかかりすぎて接続が遅くなります。 絶望しないでください。これは、HTML構造が役立つ場合です。 より正確には、画像ソースセット、またはsrcset属性。

おそらくあなたのJoomla！ ブログは高品質の画像を使用しており、それらを排除することはできません（またはしたくありません）。 それは心配の理由ではありません。 Joomla！のDroppicsプラグインを使用すると、単に画像の一般的な最適化を適用するだけでなく、ユーザーのデバイスに応じて異なるファイルを提供できます。

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

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

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

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

ソースセットを使用すると、読み込み時間が短縮されるだけでなく、SEOスコアも向上します。 これらはすべて、同じ画像のコピーを異なる解像度で使用できるという低価格で提供され、ユーザーが必要なときにすぐに利用できます。 あなたは、詳細については読むことができますsrcsetのソース・セットに関連する属性と他のすべてここに、しかし、あなたはせっかちであれば、あなたのJoomlaにそれらの使用を開始します！ ブログ、読み続けてください。

Joomlaでスケーリングされた画像を提供！ Droppicsを使って

Droppicsは単なるJoomlaとして知られているかもしれません！ ギャラリーマネージャーの拡張機能ですが、気づかないうちに内部で発生することがたくさんあります。 適例：Droppicsは現在、ユーザーに適した画像を読み込むためにソースセットを使用しています。 この機能に気付いていない場合は、悪用していない可能性もあります。

Joomla！でsrcset属性を使用するには ブログでは、最初にDroppics構成を介してアクティブ化する必要があります。 Droppicsメインパラメータレスポンシブ画像を有効にします。 変更を保存して、新しい設定をコミットします。

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

投稿を作成してDroppics画像を挿入すると、拡張機能によってsrcsetされます。 私たちを信じていないのですか？ フロントエンドのHTMLを調べると、デバイスサイズが異なる複数のソースが見つかります。

lazy loadingと同様に、一般的な最適化はすべてうまく機能しますが、実行できることはそれほど多くない場合もあります。

しかし、待ってください、それだけではありません。 パズルにはまだ欠けている部分があります。

Joomlaでsrcset画像を圧縮してください！

同じイメージの複数のコピーを作成する価値があるかどうか疑問に思うかもしれません。 おそらくサーバースペースを節約したいか、新しいイメージが積み重なるのではないかと心配しています。 ソースセットを使用しているからといって、それを圧縮などの他の最適化手法と組み合わせることができないという意味ではありません。

ImageRecycleはJoomla！でも利用できます。 Droppicsとシームレスに統合できます。

Joomla！の拡張機能の構成に移動することで、画像を自動的に圧縮するようにImageRecycle設定でき そこから、 詳細設定]タブにし、保存時にメディアを最適化。 ImageRecycleを使用して、最適化する画像を手動で選択することもできます。

読み込み時間は多面的な問題です。 品質を維持し、ストレージスペースを節約しながら、同時にファイルサイズを最小化する必要があります。 魔法のDroppicsのソースセットとImageRecycleの圧縮により、これがすべて可能になるだけでなく、簡単で自動化されたプロセスになります。