静的サイトにおけるレスポンシブ画像の最適化および検証ツール：Resp Image Lint
この記事では、レスポンシブ画像の最適化および検証ツールとして活用している、Resp Image Lintのブックマークレットを紹介したいと思います。
Responsive画像の最適化
Resp Image Lintについてお話しする前に、レスポンシブ画像のマークアップについて触れておきます。レスポンシブ画像を正しくマークアップするには、次の4つのキーワードについて正しく理解しておく必要があります。
- 画像サイズの変更（sizes）
- 解像度の変更（dpi）
- マイムタイプの変更（mime）
- アートディレクション（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の具体例も掲載されていますので、一度軽く目を通しおくと良いと思います。
- Descriptors must be unique
- Malformed descriptor
- X and W descriptors must not be mixed in one srcset attribute
- Sizes attribute must be set if W descriptors are used
- W descriptor doesn’t match the image size
- X descriptor doesn’t match the image size
- X descriptor must not be used if sizes attribute is set
- Missing
srcattribute - Images in
srcsetattribute must not be different - Images in
srcsetattribute must not have different aspect ratios - A fitting image source should be available for all screen sizes
- Images in different
<source>elements shouldn’t be the same - The
sizesattribute has to match the width of the image - Multiple
<img>elements are not allowed - Only
<source>and<img>tags are allowed inside of<picture> - The
<img>element must not be omitted inside of<picture> - The
srcattribute has no effect on a<source>element - The
<source>element must not appear after an<img>element
Resp Image Lintの注目の機能
2017年4月に注目すべき機能が追加されました。レスポンシブ画像の<source>や<img>タグのsizes属性の値が正しくない、もしくは欠落している場合、コピーペースト可能なsizes属性を自動的に生成して、デベロッパーに提案してくれる機能になります。
この機能が追加された時の、作者のTweetが下記になります。
Resp Image Lintの使い方
使い方はとても簡単で、次の4ステップになります。
-
こちらの公式ページに移動して、
Lint Imagesのボタンをブックマークバーにドラッグするか、Chromeであればショートカットの⌘Dでブックマーク登録します。 - 検証したいサイトのページに移動して、先ほどブックマークした
Resp Image Lintのアイコンをクリックします。 - ツールが起動され、さまざまなビューポートサイズとピクセル密度でページが自動的にスキャンされます。
- レポートが作成され、問題があった箇所を修正して完了です（
sizes属性に関する問題があった場合のみ、Resp Image Lintは最適な値を提案してくれます）。
このような機能は些細かもしれませんが、本当に助かります。
Resp Image Lintの紹介事例
この便利なツールは、CSS-TricksやSmashing Magazine、そしてデベロッパーであるSia Karamalegosのブログの中でも紹介されています。
素晴らしいメディアやデベロッパー達が紹介しているので、信頼もできるのではないでしょうか。
最後に
静的サイトのレスポンシブ画像の最適化に、Resp Image Lintを使用する事で、効率と品質を向上させる事ができます。
このような素晴らしいツールを作成してくれたMartinさんに感謝いたします。
皆さんも是非試してみてください。
Discussion