Support Center » Knowledgebase » Unix Tips » Retina.js triggers 404 errors on non existent @2x images

Retina.js triggers 404 errors on non existent @2x images

If you noticed lots of 404 errors due to requests to images that look like /something/imagename@2x.png - you have two options:
  1. Upload the proper @2x retina version of the images. This is the preferred method, or
  2. Apply the hack described here
You can simply redirect the requests for the @2x files to the corresponding non @2x files using Apache's mod_rewrite. Add this to your .htaccess file:
#This block of code needs to go above your Wordpress rules
<IfModule rewrite_module>
#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
RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} @2x\.[a-z]+$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)@2x(.*)$ $1$2 [E=QHNORETINA:1]
RewriteCond %{ENV:QHNORETINA} 1
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* - [L,R=404]

Article Details
Article ID: 222
Created On: 10 Jul 2015 09:58 AM
 Login [Lost Password] 
Remember Me:
Please note that the login and password to the support area is NOT the same as your hosting control panel login and password
 Article Options
Home | Register | Submit a Ticket | Knowledgebase | Downloads | Control Panel User's Guide | Server Status