[WP]表示速度をUP!Noプラグインで画像の後読み

data-*属性とJSを利用して、画像を後読み(lazyload)します。更にimg srcsetを利用してRetina対応をしましょう。Retina画像はプラグインを利用して画像アップロード時に自動で対応サイズを生成させます。画像にはできるだけ圧縮をかけましょう。

DIVタグにdata-imgを追加

画面内のスクロールイベントを感知して画像の近くに来たらimgタグに変更

Retinaはsrcset属性の追加で対応

media_widthとmedia_heightでサイズを取得して指定

編集画面のメディアを追加で追加されるタグ自体を書き換える

Retina画像を生成するプラグイン

画像圧縮するプラグイン

しば に更新 718文字 217view
※この記事は2年前の記事です。内容が古い可能性があります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください