WordPressまたはJoomla Webサイトで適切にスケーリングされた画像を提供する

WordPress または Joomla ブログで任意の画像を撮影します。 品質を評価する場合、画像が十分に大きいため、モバイル デバイスはおろか、読者のデスクトップ デバイスに合わせて縮小する必要がある可能性があります。 品質はすべて良好ですが、このようなケースは高価です。

1 つの画像でできるだけ多くの異なるディスプレイに対応するには、大きな画像を使用する必要があります。 その結果、小さなデバイスでもファイル全体をダウンロードする必要がある大きなファイルになります。 解決策は、デスクトップ、タブレット、モバイルなどの表示デバイスに応じて拡大縮小された画像を提供することです。

CSS を使用して WordPress と Joomla で拡大縮小された画像を提供する

Web ページ内で画像が占めるスペースはどれくらいですか? 厳格なルールはありませんが、その重要性と遍在性を考慮すると、答えは間違いなくたくさんあります。 いずれにせよ再スケールすることになる画像を提供している場合は、ウェブサイトの読み込み時間を短縮するためにすでに縮小された画像を WordPress または Joomla ユーザーに経済的に提供することが理にかなっています。

CSS は、比較的知られていないが貴重な一連の属性 ( srcset 、 sizes 、 media )。 これらの属性はすべて最新の Web ブラウザでサポートされており、ビューポートのサイズに応じて、どの画像バージョンを提供するかを指定できます。

srcsetは通常の補完のsrc ]タブを。

これらの属性の詳細については、こちらをご覧ください。ただし、過去数年間、WordPressは画像を自動的に再スケーリングし、読者に適切なサイズを提供します。 その結果は驚異的です。モバイルデバイスでは、511Kbのポートレート画像が42Kbに削減されます。

ImageRecycle自動ImageRecycleと最適化

WordPressはsrcsetを使用することで役立ちますが、特に画像の再スケーリングと圧縮によって、画像サイズを最小化するためにできることは他にもあります。

ImageRecycleは、画像の再スケーリングと圧縮を同時に行うことができるプラグインであり、WordPressとJoomlaの両方で利用できます。

Webでは、解像度全体を使用する必要が生じる可能性はほとんどありません。 ImageRecycle使用すると、アップロード時に大きな画像を最大の高さまたは幅に自動的に再ImageRecycleできます。

再スケーリングを補完するのは圧縮です。これは、品質を犠牲にすることなく画像サイズを最適化します。 非可逆圧縮を使用すると、画像スペースを最大80％削減できます。 これは、元の画像だけでなく、WordPressによって再スケーリングされた画像にも当てはまります。 もう一度、 ImageRecycleはこれを自動的に行うことができます。

数キロバイトの余分に見えるものでも、読者にとっては貴重な時間が失われる可能性があります。 幸いなことに、読み込み時間のために品質を犠牲にする必要はありません。 CSS とImageRecycleの再スケーリングと最適化をより賢く使用することで、読者のデバイスに適応する高品質の画像を作成できます。