技術Labo

気になったことやちょっとした作業の覚書

webp非対応のブラウザに画像を表示

両方記述して自動的に表示切り替え

<picture>
  <source type="image/webp" srcset="https://fs-create.net/wp-content/themes/fstyle_tpl/profile.png">
  <img src="https://fs-create.net/wp-content/themes/fstyle_tpl/profile.png">
</picture>

上記のHTMLを記述すればブラウザにあわせて自動的に表示を切り替えてくれます

Googleが開発した画像形式。圧縮率が高くサイトの表示が早くなります

関連記事

フリースタイル
WEBシステムエンジニア
制作作業の合間に、情報の整理。ポートフォリオ用まとめサイト
Lancersにてお仕事中

運用サイト

Amazon Pickup List

Amazon Pickup List
アマゾン関連情報まとめ