retina.js produces 404 errors for every image @2x.png

Question

I am running retina.js in my site, per suggestion that it would benefit me in the long run since more and more people are using retina displays. But apparently, retina.js scans the root for all images and attaches a @2x.png at the end of it. But it doesn't really reproduce the image itself. So when the browser goes looking for it. Nothing, Nada, Zilch, NO-Can-Do.

Quite frankly, I don't know if the retina.js is really worth the trouble or if the 404s are also worth the worry. But as a UI/UX engineer, the OCD is eating me alive. lol.

Anyway, is this a known issue? Is there a jquery/javascript workaround that doesn't include making copies of the images manually and loading them up to the server? That would be very cumbersome.

I wish I could show you some code but what could I possibly share here? The reference to retina.js in my <head>? :)

Here is the dev tools showing the culprit

Thanks

I think you want something like this maybe? A PHP script that will recreate your images on the fly as requested? https://gist.github.com/davejamesmiller/3236415 — dmgig, Mar 14 '16 at 15:30
`retina.js scans the root for all images and reproduces a copy of that image and attaches a @2x.png at the end of it.` I can't believe that. Javascript is not allowed to change the filesystem. The correct behaviour should be that script puts `@2x.png` only in code, but you need to have the images stored in the folder previously. — Marcos Pérez Gude, Mar 14 '16 at 15:31
Retina.js will check each of the images in any page it's included in, and look to see if there is a `@2x.png` version. The only way it can do that is to try and load it. You *will* get a 404 error for every image that you have not created a high res version of, using that naming convention. — Reinstate Monica Cellio, Mar 14 '16 at 15:36
@MarcosPérezGude You are absolutely correct. That's what I meant. Hence why I also said "But it doesn't really reproduce the image itself" Poor choice of words. I'll update the question so I don't sound like a douche :) — LOTUSMS, Mar 14 '16 at 15:36
OK, well, that's a misunderstanding in my side. Sorry. I don't know why retina.js works like this, but I think it is searching in filesystem by the images that doesn't exists, it's because all 404 errors that you see in console. Documentation say: `When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server.`. So that's the correct behaviour. It's tedious make this things client side. Maybe it's better a server-side solution combined with AJAX — Marcos Pérez Gude, Mar 14 '16 at 15:39
@dgig My pages are not in PHP. It's an angular/json site. The only PHP pages I have handle mail sender only. Would this be feasible in angular? — LOTUSMS, Mar 14 '16 at 15:39
Yeah, but I don't think that is possible in angular because javascript cannot create files on the client side. I think as you mentioned, you need something server side to create these images. — dmgig, Mar 14 '16 at 15:41
@MarcosPérezGude Agreed! I'm running this site in Angular/json. Barely any PHP (mailSender pages only). Not sure if you are experienced in angular, but if you are, do you think angular would offer a directive to solve this? — LOTUSMS, Mar 14 '16 at 15:42
It's merely a way to show the high res images that you put there, when viewing on high res displays. It doesn't make any images for you, and the 404 errors are irrelevant since they are nothing more than a request and a status response. — Reinstate Monica Cellio, Mar 14 '16 at 15:42
You probably saw this? http://stackoverflow.com/questions/13704317/supressing-404s-in-retina-js-library?rq=1 — dmgig, Mar 14 '16 at 15:43
@dgig That's a bummer. I maintain this site myself, so I guess I could bite the bullet and do this manually, but it certainly is a pain in the hind — LOTUSMS, Mar 14 '16 at 15:43
@Archer Do you think this is really worth all this trouble? Having retina.js I mean. How much high res could an image have that is not already in it? If I make a photoshop image and it's clear and high res, it will show that way regardless of retina.js, am I right? It's not like font-aliasing, where it actually cleans the fonts. Retina.js is not really "fixing the images" and making them Hi-Res — LOTUSMS, Mar 14 '16 at 15:46
Exactly. I personally see it as a bit of a pretentious buzz word. What you should really be doing is always having high res images, but then alternatively create (on the fly) and show lower res images for smaller display devices (or lower resolution). That would work without any need for you to manually do anything. — Reinstate Monica Cellio, Mar 14 '16 at 15:48
@dgig I like that link you suggested. I'll dig deeper into that. It looks like something I can do within my environment/technology used in this site.Thanks — LOTUSMS, Mar 14 '16 at 15:48
PHP, but mainly for mail service. Everything else I need angular can support client side and I don't need a large database so a simple angular control with an array gets me through just fine — LOTUSMS, Mar 14 '16 at 16:10
UPDATE - Upon further consideration, your input, and a comparison between the way the pages render with and without retina, I proceeded to remove retina.js. Not really worth the trouble. Until retina.js really start putting out some "must-have" technology, it is a "feel-good" product at best. It makes you feel good you have it but it's as usefull as the white crayon in the crayola box. Thanks ya'll for your input. If this question doesn't generate any popularity, interest, or +1s in 24 hrs, I'll take it down. Thanks again — LOTUSMS, Mar 14 '16 at 16:14

score 0 · Answer 1 · answered Aug 01 '22 at 14:25

Add this to the .htaccess

This is to short circuit non existent Retina image requests generated by retina.js

without this, the whole wordpress 404 stack will be executed which is very expensive

We simply redirect the request to the non @2x version of the file, if one exists, otherwise, send a 404 status

  <IfModule rewrite_module>
    RewriteEngine on
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} @2x\.[a-z]+$
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)@2x(.*)$ $1$2 [E=NORETINA:1]
    RewriteCond %{ENV:NORETINA} 1
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule .* - [L,R=404]
 </IfModule>

retina.js produces 404 errors for every image @2x.png

1 Answers1