IMG Rewrite setup

I’d like to try this method but not entirely sure from the instructions how to set it up.

Nothing special, if you cash is off, it should just work. The HTML is rewritten depending on the visitor.

I have my own server so can tweak most settings and I’m using Wordfence for caching (Falcone settings). Any examples/hints on how to use ‘IMG Rewrite’ would be great.

That’s the thing. First, make sure it works with ALL your caching turned off. Then enable them and find a way to have different caches delivered depending on the cookie called “devicePixelRatio”. Then it will work 🙂 This really depends on your caching system and is really for advanced users only. WP Rocket is implementing a solution to make this work with my plugin natively.

I can’t use picture fill as it seems to mess up the imagesLoaded functions i use with masonry.

You can also try Retina.js, I use it with Masonry 🙂

Thanks – theres maybe an issue with retina.js too and I’d like to save the bandwidth by not having to load 2 versions of the same image.

I so agree with that. But I have to admit: I am still using it for my haikyo.org website.

With retina.js it seems to requests for x2 image that haven’t been created by the retina plugin butt he plugin says it can’t create them as the source is too small. Is that a bug? Should it know to send send a request for a retina size it knows it hasn’t made?

Unfortunately there is no way for retina.js to know that the image exists or not. You might see a 404 but it’s a HEAD 404, it’s not really a GET so normally you don’t get any logs or anything on your server. But yeah, there are little requests being made. HEAD, does the file exist? If yes, then GET it. That’s what it does. The official page for it is https://github.com/imulus/retinajs.

PictureFill and HTML Rewriter are “more clever” this way because they only handle Retina files if they exist.