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

WordPressまたはJoomlaブログで画像を撮ります。 品質を評価すると、モバイルデバイスはもちろん、読者のデスクトップデバイスに合わせて縮小する必要があるほど画像が大きくなる可能性があります。 品質はすべて良好ですが、このようなケースは高額になります。

1つの画像で可能な限り多くの異なるディスプレイに対応するには、大きな画像を使用する必要があります。 言い換えると、それは、小さなデバイスであっても全体をダウンロードする必要がある大きなファイルに変換されます。 解決策があります。デスクトップ、タブレット、モバイルのいずれのディスプレイデバイスに応じてスケーリングされた画像を提供します。

CSSを使用してWordPressおよびJoomlaでスケーリングされた画像を提供する

Webページで画像はどのくらいのスペースをとりますか？ 厳密な規則はありませんが、その重要性と遍在性を考慮すると、答えは間違いなくたくさんあります。 とにかく再スケーリングする画像を提供する場合、経済的であり、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の再スケーリングと最適化をよりスマートに使用することで、読者のデバイスに適応する高品質の画像を作成できます。