X3Photo Gallery Forums

Caching. Not only does your browser cache files, but there might be a CDN (like Cloudflare) that caches the images. The only effective solution for this, is renaming your images as you update them. For example "somefile.jpg" -> "somefile-a.jpg". Then delete the outdated version. Sorry, but this is just how caching works (not only in X3) so that images load fast.

ed_f wrote:does that mean that the image is actually exchanged and I just see (for while) the older version?

Yes. Keep in mind, "for a while" could be a long time period, unless you empty your browser cache.

You can review changes to an image by adding some empty parameter to the image url. For example /path/to/image.jpg and /path/to/image.jpg?test. The latter link would show the latest image, because request is not cached yet.

ed_f wrote: for anybody looking for the first time the image IS the new one?

Yes. Unless you are also using some CDN cache like Cloudflare (which I doubt you are).

ed_f wrote: when I delete it once it will be gone and only just appears to still be there?

Basically yes. Just to clarify, X3 will know immediately when it's gone, so it wouldn't display in the gallery or anything. However, if you make a direct request in browser to the image url, it could still display after it's deleted, if your browser has it cached.

In the end of the day, this is all cache-related, and I would therefore increment the file name when you make changes, so you don't need to deal with this problem. Cache for static files (like JPG) is vital for the performance of all websites, so that images are not reloaded from server for every visitor for each request. Therefore, images will cache per request path in browser, and possibly on the network (CDN etc).

ed_f wrote: edit: hours later the changes (without another cache-delete!) appear. my hoster, probably?

Would be unusual, unless you are unknowingly using some CDN service through your hosting, and I can't say from here without diagnosing. Besides, it doesn't really matter if it's browser or network, because this is the issues you will deal with when replacing images without updating the name.

I was wondering if there is a way to let the client know that a cached item is no longer up to date and I stumbled upon the ETag. With my not so deep understanding of web technology this seems to be a possible solution for the issue. Am I missing something?

metallissimus wrote:I was wondering if there is a way to let the client know that a cached item is no longer up to date and I stumbled upon the ETag. With my not so deep understanding of web technology this seems to be a possible solution for the issue. Am I missing something?

The Etag is kinda useless. Client must contact origin server first "hey, do you have an update for this image"? Server replies "yup I do", client must then load entire image ... This is even slower than simply loading the image without communicating with server first. In case the browsers cache is valid, it might be a tiny bit faster, but the client still needs to make a request to origin server just to check if the current cached image is still valid. This is not very fast, and perhaps not much faster than just loading the image (which is normally quite fast these days). So this caching method is simply inferior to using Expires and Cache-Control headers for static assets like images. Etag might be more useful for example for documents (html), depending on the website and scenario where the strategy is worthwhile.

I think everyone does it like this, and even services like Facebook, Instagram and Google, they use naming conventions "sdf78y.css" "njksdfg89u.jpg" for assets (which is managed by their system), so that names get updated when the assets gets updated.

Let's pretend for a second that X3 was a database application. If so, it would have hash-based image names like sdfgsdfg87tdsf.jpg managed by the database. As soon as you replace an image with another, internally the new image would have a new hash name, thus avoiding the cache problem. And in conclusion, you must rename files to avoid caching.

Thanks for the explanation. 

And in conclusion, you must rename files to avoid caching.

I find it quite fascinating that such an ugly method seems to be the best solution (this is not meant as criticism towards you, rather at "the internet" – whoever that might be). This might be technically straight forward, but I think renaming something that is basically the same (the same image updated, e.g. resized or with better compression etc.) doesn't make any sense at all from a user perspective.

metallissimus wrote: Thanks for the explanation. 

And in conclusion, you must rename files to avoid caching.

I find it quite fascinating that such an ugly method seems to be the best solution (this is not meant as criticism towards you, rather at "the internet" – whoever that might be). This might be technically straight forward, but I think renaming something that is basically the same (the same image updated, e.g. resized or with better compression etc.) doesn't make any sense at all from a user perspective.

True that, but it is what it is. And since "performance" is such an important internet feature, the likes of cache has been implemented aggressively. It's not useful to rename a "page" mypage.html or /subdir/, and that's why html pages are never cached, to make sure latest page is always displayed. Most images on the other hand, will never change, and can be cached effectively. Even when an image changes, it is mostly embedded on a page, and the image name can be modified in the document source without the user even knowing (or caring).

Thats why I mentioned other apps (Google, Facebook etc), and X3 if it was a database app. In most cases, the visitor of a website will never see the file name anyway, so why would they care about this anyway? That's why Google and most other apps will always have hash-based file names for everything, so they can control the resource. See screenshot from Facebook, JSON, images, CSS, javascript, all hash-based without meaning ... And who cares? The user doesn't see the file names in browser.



Ugly perhaps, but this keeps the internet fast. You could disable image caching from your own server (.htaccess), but I'm not sure you would want to do that.

mjau-mjau wrote:Even when an image changes, it is mostly embedded on a page, and the image name can be modified in the document source without the user even knowing (or caring).

As I mention this, we could perhaps add some mechanism in X3 also. For example <img src="image.jpg?IMAGE-MODIFIED-DATE" ... By appending the date, it would bypass cache if the ?date changes, but will still get cached when the date remains the same. Keep in mind, this would work correctly when viewing images inside X3 website, but you would still get old cache results if trying to access /path/to/image.jpg directly in browser without any ?parameter.

ed_f wrote: that sounds like a solution! give it a try, karl!

:heavy_check_mark:Yes