I have a div tag on my site that uses a background image. When we make a tiny text change in that image and ftp it back to the server, it continues to serve it as 304 not modified and uses the cached version. Only until we force a browser refresh does it fetch the new image.
I've read where you can set Cache-Control to no-cache in the HTTP Response Headers (I'm using IIS 7.5), but that still does nothing, still uses the cached image and sends back a 304. My workaround was to rename the image and also change the div's css and that does work, but I'm looking for a better way. Ideally, we want this single image to be dynamic so we can change it often, but we don't want our customers to have to know to refresh their browsers.
Is there a solution?
Changing url is most common workaround.
In my case, when I've experienced such issue, I've moved image in separate controller(or it may be page, or even hadler), and was adding little url param, which was generated by datetime class, e.g.:
http:\\mysite.com\myimage\dynamic.jpg?bla=20121119184001
Related
I am having some problems with browsers displaying images correctly. Most of the browsers are affected except Chrome.
The problem here seems to be the caching problem of images. I am not very sure if this is the case, so I will tell you guys what I did.
My page allows users to upload their photos. So these uploaded photos will be saved into a folder. The user will then use the crop tool to crop their images to their preference, and saved them back to the same folder again. If they chose to use the same name, the image will be overwritten.
Here comes the problem. In Chrome, the browser will show the new cropped images, but not for the other browsers. If the image was renamed, then this won't happen either. Is there anyway to solve this?
Try to add a new guid at the end of the filenames as image.jpg?id=asdf
Change the file name each time you save. You really need caching, but you don't want it to happen at the wrong times. Adding a random number will prevent browsers from caching images at all, prevent http.sys level caching, and prevent any edge caching you implement from working.
Is there a way to "cache" background image.
For example..
Background image is 3x3px and it's set like this:
body {
background: #000 url(bg.png);
}
When refresh happens, background image "flickers" for second.
Is there a cross-browser solution? (for Apache/PHP server if that is relevant)
If you go to seo.hr and browse navigation,... you can see what I'm trying to do.
http://www.seo.hr/
http://www.seo.hr/usluge/izrada-stranica
http://www.seo.hr/usluge/optimizacija-za-trazilice
I think you need to determine first if the issue actually is a caching issue or if it's caused by the size of your image. You could use a program like Wireshark or Fiddler to do this, but to be honest it's overkill for your need and you probably already have a browser with developer tools.
Here's how you determine where an image is coming from in Chrome (the other browsers are similar).
Open your developer tools and go to the "Network" tab.
Find "bg.png" in the list of network requests and click on it's name. Below is an example of having selected a stack overflow image from this page.
Notice that it says status 200 (from cache). The browser didn't need to go out to the server and rerequire that resource. It used the cache. If that "from cache" text wasn't there it wasn't reusing cached resources.
There is also the potential that you'll get a status code of 304. That means that the server said the image wasn't modified since the last request that you made. You do make the server trip in that case.
Ok, so my image wasn't in cache... now what?
There are a few reasons that this could occur.
You're request headers aren't set to tell the browser to cache the image (also found in that same "Headers" tab that you would have seen that Status Code if the browser actually went to the server for the image). You'll want to set cache-control and expires to something that makes sense for you. Cache headers can get a bit complicated you may want to browse through this caching tutorial document.
Is it SSL? If so not all browsers cache this but most modern browsers do. Set cache-control: public on these images (and also expires).
The real question here is how do you fix this? Unfortunately, that's entirely dependent on the server and/or the framework that you are using. As the OP is using Apache, they can find great documentation on the Apache module mod_expires to figure out how to tweak caching for their site.
Yes!
You should decide whats more suitable for you, but at this time we have some methods, like:
Pure HTML/CSS
Javascript Only
Mixed HTML/CSS/Javascript
Using base64 to encode the image somewhere on the source code
At this point I recommend a mixed solution, using javascript. This will make it work on many browsers as possible.
There is a good tutorial at:
http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
Having several images in one can take you a step beyond that, so check this sprites article:
http://www.alistapart.com/articles/sprites/
You can try to encode your image in base64 and put it directly into CSS source code. I found a question about pros and cons over here.
Make your tiled image much much larger, when the browser engine renders the page it has to multiply each tile to cover the entire width and length of your object, which results in bad performance with small tiles on large objects.
Small tiles -> more repetitions -> slower performance
Does anyone know how images are loaded per browser? For inline images, do two calls to the same image trigger two server requests or just one? How are subsequent calls to an image that has been downloaded handled?
For CSS images, are all images called within your CSS loaded when the CSS file is called or is it when individual classes calling the images are used? As an extreme example, if I have a CSS file that calls 200 separate images but only one of those images is called on the first page load, do all 200 get called or just the one? How does loading differ by browser if any?
Image urls should cause only one hit on the server PER PAGE. For that one page's hit, the browser can assume that the image will be unchanged, even if the image appears multiple times on the page
For the next page, the browser will tend to do a "if-modified-since" request for the image, and only get a new image if it has been modified since that last night. But again, it'll only do it ONCE per page.
Once the image has been downloaded and cached, you'll most likely see only 200 get requests and 304 not-modified responses until the image falls out of the cache.
You actually make a call for every image, that's why it is advised to use CSS sprites when appropriate
I have written a small picture script which shows a directory listing with thumbnails and also previews of the pictures.
Directory listing example
Image preview example
Source code
In some cases, when you click through several image previews (you can also use the arrow keys left/right to do that faster), some images don't fully load (and they are only shown partly then).
I think this has started to appear more often since I am preloading the next few pictures but it also has appeared before. This also occurs most often if you switch the images very fast.
I wonder why this appears and how I can avoid this. I guess that the browser somehow looses some connection to the server (or the server closes it unexpectedly for some reason). Thus I tried to work around this by setting Content-Length (and I was hoping that the browser would reconnect automatically if the file was not received fully) but that didn't helped.
Also, in the browser, a normal reload of the page doesn't help, I have to force a full reload.
Is it possible to edit images using a javascript library and then send the edited image to the server for saving.
Edits will be in real time, means the user can see the edit result in the same time he is editing without the need to refresh the page.
I want a javascript library to do some edits on an image on a webpage 'such as crop, resize, rotate,...' and send send the edited result to the server.
How this can be done or if there any smart work around to something like this.
The libraries mentioned don't seem to be fully cross browser. As far as I know there is no fully cross browser compliant way to edit pixel data on the client.
The current best approach would be to do these manipulations on the server. You can still do this real time using a web service.
As an example see the image editor in TinyMCE which supports crop, rotate, resize, flip, all from the client without a page refresh.
Pixastic is an image manipulation library; once you've modified the image, some sort of post back / upload call from the script will be able to upload the image provided you've implemented the needed functionality to do so.
An incomplete list to be sure, but these are two that come to mind which allow you do a wide variety of editing on the client side and push back to the server.
PIxastic
AIE
And there are numerous less complete image editing tools for simply cropping or adjusting contrast as well.
jcrop is what you are looking for .