こんにちは！_←これの名称はアンダースコア派、Mizutani(@sirycity)です。アンダーバーでも全然いいんだけどな。

今日は画像に半角スペースがやばいって話です。

結論

画像に半角スペース入れるとsourceのsrcsetでエラー出るからやめよう、そしてimgのsrcは普通に通るので見落としやすい

画像最適化でよくやるやつ

こういうやつ。avifで3種類くらい作っといてスマホ、タブレット、PCで出し分けかつ非対応ブラウザ用にjpegでフォールバック。

 <picture>
  <source srcset="foo3.avif" media="(min-width: 1024px)">
  <source srcset="foo2.avif" media="(min-width: 640px)">
  <source srcset="foo1.avif" media="(min-width: 320px)">
  <img src="foo1.jpeg">
</picture>

まあよくやるやつです。

ファイル名の罠

ところでsourceのsrcset属性ですが、こいつは複数個設定ができます。なんと半角スペース区切りで。これはまあ歴史的経緯からやむを得ないです。にしても気持ち悪いですね。

ただしこの仕様のせいで罠が1つ発生し画像のファイル名に半角スペースが入っていると2つのパラメータだとみなされることになります。平たく言えばファイル名に半スペ入るとバグるわけです。

そして更にたちが悪いのはimgのsrcは別に普通に機能する点で一見すると不具合に気づきにくいです。というかavif非対応端末ならそもそも分かりません。画像によっては視覚的に気付きますが、これはまじで画像によります。画像のパスをcms等外部APIから取得している場合はさらに気付きにくい。もう駄目です。

対策

別に気づいちゃえばどうとでもできます。アップロード時にファイル名にバリデーションかけるとか、取得時にファイル名特殊文字にするとか。気づくまでが勝負です。自分の時はなんか画像重くね？&荒くね？で気付きました。

結論

伏線回収ですがファイル名に空白は付けず意味の区切りは_を付けるってのが大事ですね。アンダースコアがもっと普通の記号になりますように。市民権を得ますように。クエスチョンくらいに。以上。