Lightboxのような画像リンクにwebpを対応させる方法 - Qiita

webp対応したときに、Lightbox系の画像にaリンクが必要な実装をした場合、対応ブラウザの可否で .webp と .png を書き換えなければいけなかったのでメモ。 前提：webp対応はModernizrを使用 ここでは前提として、JavaScriptライブラリ「Modernizr」を利用して、webpのブラウザ機能のサポート状況を自動的に検出してもらいます。 Modernizr 導入方法は割愛。（以下参考） 例：スライダーなどんお画像リストにaリンクのポップアップなどがある時 <ul class="gallery"> <li> <a href="img/sample1.webp"> <picture> <source srcset="img/sample1.webp" type="image/webp"> <img src="img/sample1.png" alt="サンプル">