静的サイトにおけるレスポンシブ画像の最適化および検証ツール：Resp Image Lint

この記事では、レスポンシブ画像の最適化および検証ツールとして活用している、Resp Image Lintのブックマークレットを紹介したいと思います。

Responsive画像の最適化

Resp Image Lintについてお話しする前に、レスポンシブ画像のマークアップについて触れておきます。レスポンシブ画像を正しくマークアップするには、次の4つのキーワードについて正しく理解しておく必要があります。

1. 画像サイズの変更（sizes）
2. 解像度の変更（dpi）
3. マイムタイプの変更（mime）
4. アートディレクション（art）

上記4つのユースケースの全ての組み合わせを網羅した記事がDev.Operaで紹介されており、いつも参考にしています。更に詳しく知りたい方は、CloudfourのResponsive Images 101 Seriseや、Responsive Images the Simple Wayの記事も参照される事をお勧めします。

マークアップの問題点

上記の記事を参考にマークアップした後、正しくマークアップできているか、どのように品質を担保すれば良いのでしょうか？

特に、sizes属性の値の単位はビューポートユニットであるvwを使用することが多いので、画像が固定幅のpxや画面幅いっぱいの100vwの画像であれば問題はありませんが、コンテナ内に画像が配置されている場合などは、正しく導出するのに時間がかかり、果たして本当に正しい値なのか心配になる事があります。

そんな不安を解消してくれるツールが、次のセクションで紹介するResp Image Lintになります。

Resp Image Lintの概要

Resp Image Lintの作者は、オーストリアのザルツブルグにあるウェブ制作やフレームワークを提供している会社 "MADE/YOUR/DAY" のウェブデベロッパーのMartin Auswögerです。

Resp Image Lintは、画像に関するマークアップを解析し、18項目の厳密なチェックを行ってくれます。ドキュメントには、Correct/Incorrectの具体例も掲載されていますので、一度軽く目を通しおくと良いと思います。

1. Descriptors must be unique
2. Malformed descriptor
3. X and W descriptors must not be mixed in one srcset attribute
4. Sizes attribute must be set if W descriptors are used
5. W descriptor doesn’t match the image size
6. X descriptor doesn’t match the image size
7. X descriptor must not be used if sizes attribute is set
8. Missing src attribute
9. Images in srcset attribute must not be different
10. Images in srcset attribute must not have different aspect ratios
11. A fitting image source should be available for all screen sizes
12. Images in different <source> elements shouldn’t be the same
13. The sizes attribute has to match the width of the image
14. Multiple <img> elements are not allowed
15. Only <source> and <img> tags are allowed inside of <picture>
16. The <img> element must not be omitted inside of <picture>
17. The src attribute has no effect on a <source> element
18. The <source> element must not appear after an <img> element

Resp Image Lintの注目の機能

2017年4月に注目すべき機能が追加されました。レスポンシブ画像の<source>や<img>タグのsizes属性の値が正しくない、もしくは欠落している場合、コピーペースト可能なsizes属性を自動的に生成して、デベロッパーに提案してくれる機能になります。

この機能が追加された時の、作者のTweetが下記になります。

ただ1つ留意する点があるとすれば、メディアクエリの解析は20px単位で実行されます。しかし、これまで使用してきた経験から、大勢に影響はない小さなレベルの問題と考えています。

Resp Image Lintの使い方

使い方はとても簡単で、次の4ステップになります。

1. こちらの公式ページに移動して、Lint Imagesのボタンをブックマークバーにドラッグするか、Chromeであればショートカットの⌘Dでブックマーク登録します。
2. 検証したいサイトのページに移動して、先ほどブックマークしたResp Image Lintのアイコンをクリックします。
3. ツールが起動され、さまざまなビューポートサイズとピクセル密度でページが自動的にスキャンされます。
4. レポートが作成され、問題があった箇所を修正して完了です（sizes属性に関する問題があった場合のみ、Resp Image Lintは最適な値を提案してくれます）。

このような機能は些細かもしれませんが、本当に助かります。

Resp Image Lintの紹介事例

この便利なツールは、CSS-TricksやSmashing Magazine、そしてデベロッパーであるSia Karamalegosのブログの中でも紹介されています。

https://sia.codes/posts/eleventy-and-cloudinary-images/#use-srcset-and-sizes-so-the-browser-can-pick-the-best-image

素晴らしいメディアやデベロッパー達が紹介しているので、信頼もできるのではないでしょうか。

最後に

静的サイトのレスポンシブ画像の最適化に、Resp Image Lintを使用する事で、効率と品質を向上させる事ができます。

このような素晴らしいツールを作成してくれたMartinさんに感謝いたします。

皆さんも是非試してみてください。