BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» レスポンシブサイトに使えるサイズ違いの画像を自動で作成してくれるツール

このエントリーをはてなブックマークに追加

レスポンシブサイトに使えるサイズ違いの画像を自動で作成してくれるツール

   投稿日: 2018/05/05    投稿者:webコラム

レスポンシブでサイトを作成するときは、画像の最適化が必須です。

ですが、スマホ・タブレット・デスクトップ用として
それぞれ表示する画像を手動で準備するのは大変な作業です。


今回は、そんなときに便利なツール「Responsive Image Breakpoints Generator」を紹介します。

20180505_IMG0000.JPG

このツールを使えば、レスポンシブイメージの複数画像の作成と、
HTMLの記述を自動で生成することが可能です。

サイズ違いの画像を作成すると言っても、
単なるリサイズやトリミングではなく、
アートディレクションも自動化してくれます。
(必ずしも意図する位置で切り取られるとは限りませんが、、、)

では、簡単な説明を交えてご紹介して行きます。


<目次>
・レスポンシブイメージの使い方
・アートディレクションを入れる場合
・自動生成ツールの使い方
・まとめ

<レスポンシブイメージの使い方>

サイズの切り替え
imgタグにsrcsetとsizes属性を使います。
スマホでは375px、タブレットでは768px、デスクトップでは1280pxの画像を表示する場合、
sizes属性では1280px以下のスクリーンではViewportの100%(vwはviewport widthの略)で、
それより大きい画面では1280pxで画像を表示するように指定しています。
具体的には、以下のようなHTMLになります。

<img
srcset="
images/375w.png 375w,
images/768w.png 768w,
images/1280w.png 1280w"
sizes="(max-width: 1280px) 100vw, 1280px">

<アートディレクションを入れる場合>

例えば、スマホ(767px以下の画面)では違った画像の切り抜き方をして表示させたい場合は、
picture要素を使って以下のような記述をすることになります。
HTMLだけで画像の切り替えができるのはとても便利です。

<picture>
<source
media="(max-width: 767px)"
sizes="(max-width: 768px) 100vw, 767px"
srcset="images/square-767w.png 767w">
<img
srcset="
images/768w.png 768w,
images/1280w.png 1280w"
sizes="(max-width: 1280px) 100vw, 1280px">
</picture>

<自動生成ツールの使い方>

Responsive Image Breakpoints Generator」を使うと、
以下の情報を指定するだけでレスポンシブイメージ用として、
異なるサイズの画像とHTMLを生成してくれます。

・画像幅の下限と上限
・ファイルサイズの間隔
・作成する画像の数
・Retina対応するか・しないか
・アートディレクション

サンプル画像を使い、下記の設定で画像を書き出してみます。

20180505_IMG0001.jpg

・375〜1280px
・20KB間隔
・最大3個
・Retina対応なし
・アートディレクションなし

サイズ違いの画像を一括で生成してくれます。

<まとめ>

レスポンシブサイトの画像処理は、工数も増えるので手間がかかり大変ですが、
このようなツールを使うことによって作業効率化ができるのでどんどん使っていきたいと思います。

画像の最適化はページ全体の最適化の大きな範囲を占めるので重要な部分になります。
picture と srcset要素のブラウザサポート状況は確認する必要がありますが、
次々に対応してきているようですので、積極的に使っても良いのではないでしょうか?

カテゴリ:

TOPへ