WordPressまたはJoomlaのウェブサイトで適切なサイズの画像を提供する

WordPressやJoomlaのブログにある画像を例に挙げてみましょう。画質を重視する場合、その画像は読者のデスクトップ端末に収まるように縮小する必要があるほど大きいことがほとんどです。ましてやモバイル端末ではなおさらです。画質が良いのは当然ですが、今回のようなケースでは大きな代償を伴います。.

1枚の画像でできるだけ多くの異なるディスプレイに対応するには、大きな画像を使用する必要があります。その結果、小さなデバイスであってもファイルサイズが大きくなり、全体をダウンロードする必要が生じます。解決策があります。デスクトップ、タブレット、モバイルなど、ディスプレイデバイスに応じて画像のサイズを調整して提供するのです。.

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

ウェブページで画像はどれくらいのスペースを占めるのでしょうか？ 明確なルールはありませんが、その重要性と普遍性を考えると、答えは間違いなく「かなり」です。いずれサイズ調整が必要になる画像を提供する場合は、ウェブサイトの読み込み時間を短縮するために、WordPressやJoomlaのユーザーには縮小済みの画像を提供するのが賢明です。.

CSSは、あまり知られていないものの、非常に価値のある属性のセット、つまりsrcset 、 sizes 、 media。これらの属性は、ほとんどの最新のウェブブラウザでサポートされており、ビューポートのサイズに応じて、どの画像バージョンを表示するかを指定できます。

srcsetは通常のsrcタブを補完するものです。属性名が示すように、単一の画像を指定する代わりに、スケールされた画像のリストと、各画像を表示する際の幅を指定します。これと併用するsizes属性では、ビューポートの幅に基づいて画像を表示するタイミングを定義できます。

こちらをご覧ください。ここ数年、WordPressは画像を自動的にリサイズし、読者層に適したサイズで表示するようになりました。その結果は驚くべきもので、511KBの縦向き画像がモバイルデバイスでは42KBにまで縮小されます。

ImageRecycleによる自動再スケーリングと最適化

画像サイズに関しては、画質が損なわれない限り、小さいほど良いです。WordPressではsrcset、画像のサイズを小さくするためには、画像のサイズ変更や圧縮など、他にもできることがたくさんあります。

ImageRecycle 、画像のサイズ変更と圧縮を同時に行うことができるプラグインで、WordPressとJoomlaの両方で利用できます。何より素晴らしいのは、 ImageRecycle を使うと画像のサイズ変更と圧縮を自動で行うことができることです。.

WordPressやJoomlaのブログでストック画像を使用している場合、特にリサイズ機能が便利です。これらの画像は、印刷媒体を含むあらゆる用途を考慮すると、不釣り合いに大きいことがよくあります。ウェブ上では、その解像度全体を使用する必要はほとんどありません。ImageRecycle ImageRecycle使えば、アップロード時に大きな画像を自動的に最大の高さまたは幅に縮小できます。.

再スケーリングを補完するのが圧縮です。圧縮は画質を犠牲にすることなく画像サイズを最適化します。非可逆圧縮では、画像容量を最大80%削減できます。これは元の画像だけでなく、WordPressによって再スケーリングされた画像にも当てはまります。ImageRecycle ImageRecycle 、この処理を自動で実行します。.

数キロバイトの増加に見えるかもしれませんが、読者にとっては貴重な時間のロスにつながる可能性があります。朗報です。読み込み時間のために画質を犠牲にする必要はありません。CSSと ImageRecycleの再スケーリングと最適化を賢く活用すれば、読者のデバイスに合わせて最適化された高品質な画像を作成できます。.