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

寄付

1Lmbf9bbBMst1tRLCRktHHDnwEhgiMJwcM

手数料が少ないBitcoin寄付でお願い致します。