0

I have a portfolio website which consist of an Express back-end and in the front an Angular 7 app. To access my pictures, I use an API which consist of pictures that can be accessed this way :

Returns a JSON containing the list of all albums and their pictures name as well as other metadata

https://example.com/public/photo

Returns base64 encoded images

https://example.com/public/photo?album=test&photo=1.jpg

The thing is, when you navigate the website, the process of retrieving the images is done all the time, making some pictures being downloaded a lot and thus diminishing the user experience, especially on slow networks.

I'm trying to implement a caching system which would allow images to be downloaded 'once and for all' during a user's visit. After browsing Google and StackOverflow I've seen a lot of methods being used but I'm unsure which one is the best in my specific scenario.

Here is what I've thought about so far :

Storage of pictures

LocalStorage

To store my images, I'm so far using the LocalStorage feature to store the base64 encoded images that have been already retrieved. However, I'm unsure if this is the best place to store this kind of data and if not where should I put it?

Methods of verification

ETags

Since I use a JSON to retrieve all the albums metadata during the initial page loading, I could calculate an ETag on it to make sure the album list and the associated pictures name are the same.

Pro

  • Just one Etag to calculate, not a long of computational strain

Con

  • Since the pictures are just numbered (1.jpg, 2.jpg), changing a picture won't change the ETag.
  • Adding just one picture would change the hash and invalidate all the albums

If-Modified-Since

I could add to my API calls a If-Modified-Since header with an arbitrary period to make sure the pictures are not reloaded. The initial call would store the image of course, if not I would have a 304 from the first call and never retrieve the images.

Pro

  • No ETag calculation

Con

  • If some images are modified during the client's visit, he won't see them if the If-Modified-Since is not adequately set
  • Need to add a date of modification to each album ?

I'm twisting the ideas in my head for a while so maybe my judgmeent is a bit clouded in that matter. If you could help me choose the best techniques is would be much appreciated, especially on the LocalStorage feature, I'm feeling like it's not the best one.

This is my first question here so I hope I adhere to all the rules of this website.

Thanks in advance.

Alterock
  • 3
  • 1

1 Answers1

0

The good news is that you don't have to worry about local storage - browsers have caching baked in already.

This article explains the process as clearly as any I've seen. It boils down to:

  • Set a cache period for your images. For a portfolio site, that period is almost certainly days or weeks, rather than seconds.
  • Calculate an eTag for each image; Express can do this for you.

It's worth noting that web browsers are very accommodating - if you set a cache directive, they'll assume you want the asset to be cached, even if you don't set all the other headers. So you don't have to set an eTag, but not doing so means the browser will not be able to ask whether the asset has changed since it cached it, and will therefore download it again.

Neville Kuyt
  • 29,247
  • 1
  • 37
  • 52
  • Hi, thanks for your answer ! So I am now sending 'Cache-Control : private, max-age=31557600' from my server and indeed the images are cached ! Thanks ! But with or without the ETag being sent by the server, the value seems to be cached, is it normal? – Alterock Nov 18 '19 at 12:45
  • I've updated the answer - yes, it's normal, but without an eTag, the browser will probably download again after the cache expires. – Neville Kuyt Nov 18 '19 at 13:18
  • Great, I've now added both, I'll have to run test to see how it reacts when I modify one of the cached file. Thanks a lot ! – Alterock Nov 18 '19 at 14:12