【HTML】画像のキャッシュバスターで変更時の自動更新!日付を入れるだけ!

この記事からわかること

  • 画像キャッシュバスターとは?
  • 画像変更時に自動更新させる方法
  • HTMLへの組み込み方とパスの記載の仕方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Webサイトに画像を表示する際、キャッシュが残っていると元画像が変更されても表示が変わらないことがあります。例えばユーザーのプロフィール画像などが更新されたのに切り替わらないとユーザビリティの低いサイトと見られてしまう可能性があります。

今回は画像が変更された時にすぐ切り替わるようにする方法とその仕組みをまとめていきたいと思います。

画像はキャッシュが残る

そもそもWebサイト(ブラウザ)は表示速度を早めるためにキャッシュと呼ばれる機能を持っています。キャッシュは容量の大きい画像データやCSSファイルなどを最初に読み込んだ際に内容を蓄えておき、それ以降にアクセスされた時にその蓄えを再利用することで再度読み込みしなくても表示できるようにする仕組みです。

Webサイトの中でプロフィール画像を変更したのに、画像が変わらない場合はこのキャッシュがブラウザ上に残っているため更新されません

なのでブラウザのキャッシュをユーザー側に削除して貰えば更新はされますがユーザビリティの高いサイトとは言えなくなってしまいます。

キャッシュバスターで自動更新

キャッシュバスターを使用して画像を常に自動更新させている様子

変更時に自動更新させるにはブラウザ上の画像のキャッシュを再利用しないようにすれば解決できます。

方法は至ってシンプルで、画像のパス部分に重複しないクエリ文字列(?=)を渡すだけです。これでブラウザは別の画像パスと認識してくれるのでキャッシュを再利用せず新しい画像パスとして読み込みます。

src="image/person.png?=2022/3/10 11:59:4"

クエリ文字列として渡すのは日時がオススメです。重複せず、常に一意の値であり続けるので特に意識せずとも自動更新してくれます。

またこの方法はもちろん画像だけでなくCSSファイルなどでも使用可能です。

JavaScriptで日付情報作成

JavaScriptで日付情報のクエリパラメータを作成する方法をご紹介します。現在日時で"2022/3/10 11:59:4"形式の文字列を作成しています。

let now = new Date(),
YYYY = now.getUTCFullYear(),
MM = now.getUTCMonth() + 1,
DD = now.getUTCDate(),
hh = now.getUTCHours(),
mm = now.getUTCMinutes(),
ss = now.getUTCSeconds();

let todayQuery =YYYY + "/" + MM + "/" + DD + " " + hh + ":" + mm + ":" + ss;

あとはこれをimg要素のsrc属性の画像パス末尾にくっつけてあげればOKです。

<img class="c-user_icon" :src="image/person.png +'?=' + todayQuery" 

上記はVue.jsを使ったテンプレート内に埋め込んでいる様子です。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index