Wordpress プラグイン

WP Retina Image

説明

ファイル名に@2xが付いた画像をアップロードすると「1xのサイズ」と「2xのサイズ」を作ってくれます。このプラグインを使用してアップロードした画像は、Retinaディスプレイ対応、レスポンシブルなsrcset,sizesを自動で設定し投稿してくれます。

使い方

  1. ファイル名に@2xのついた画像(jpg,png,gif)をアップロード
  2. 1x sizeを選択し「投稿に挿入」ボタンを押して終了

 

上のムービーでは幅800pxの画像をアップロードし、投稿画面では400pxの表示になる様子です。

生成されるIMGタグ

1xのサイズが718pxの場合

<img class="size-1x wp-image-***" 
src="***/banner@2x-718x233.jpg" 
width="718" height="233" 
srcset= "***/banner@2x-718x233.jpg 718w,
***/banner@2x-300x97.jpg 300w,
***/banner@2x-768x249.jpg 768w,
***/banner@2x-1024x332.jpg 1024w,
***/banner@2x.jpg 1440w"
sizes="(max-width: 718px) 100vw, 718px">

インストール

 

なぜかまだ検索しても出てこないので

WordPressの管理画面「プラグイン」ページから作成者検索で「wadadanet」と検索し「WP Retina Image」をインストールしてください。

手動でインストールする方はダウンロードは下記からお願いします。

WP Retina Image

開発者支援

コーディング代行

高品質なソースコードをお約束いたします。

詳しくはこちら
背景はFreepikによるデザイン

Blog

information

お問い合わせ