HTMLで画像が貼れなかった話

こんにちは！あいりすです。

ずっと前からある1つの成果物をHTML、CSSで作成しているのですが、
ある時、

URLは絶対に合っているはずなのに、なぜか画像が反映されないということが起こりました。

このときの条件は以下。

・iPhoneで撮った写真なのでairdropでMacBookに画像を送っていた

・ポートレートで撮ったものと、LIVEモード？（なんか動くやつ）で撮ったものが混ざっていた

画像を貼っていってその都度確認していたのですが、一枚だけどうしてもエラーのようになってしまって反映されない状態でした。

名前も合っているし、ファイルの指定パスも合っているはずなのになんで表示されないんだろうと悩んでいました。

そこで見つけたのがHEICという拡張子。

この拡張子はiPhoneで撮影した写真にたまに付いてしまうらしいです。（詳しくはお調べくださいｗ）

なのでわたしは、「名前を変更」から拡張子をpngに変更しました。

拡張子をpngに変更しますか？と出てくるので、「はい」を選択して拡張子を変更できたつもりでいました。

ところが…

また画像が貼れない！

名前も合ってるのに！なんで！

そこで、もうさすがにわからないので仲の良いエンジニアの方にお聞きしました。

コードも見せました。

そしたら、表面上はHEIC拡張子からpngに変更されてるけど本当はHEICのままじゃん！とご指摘を受けました。

このような場合は、きちんと拡張子変換ツールを使用して拡張子を変更しなければいけないようです。

拡張子変換ツールには、たとえばこのようなものがあります。
www.iloveimg.com

わたしはこのサイトのツールを使用しました。

使い方も簡単なのでぜひ使ってみてください。

もし画像が貼れない！となった時にこの記事を思い出していただけたら嬉しいです！

次回の記事もぜひ読んでください♪

あいりす