Where do I start?
Did you read the tutorial about this plugin already? If not, I suggest you to read it first.
What does this plugin do?
It creates the image files required by the Retina devices. In the case the resolution of the original images are not high enough, you will see a warning in the Media Library where you will be able to re-upload bigger images. The plugin then recognizes different devices and send the images required accordingly.
What actually are Image Sizes in WordPress?
Have a look at this article: https://rudrastyh.com/wordpress/image-sizes.html
What are those new images?
The new images use the same name as your original files, with an “@2x” string added right before the extension. For example, if you have a Gundam-150×150.jpg file, a new Gundam-150×[email protected]
will be created. Its size will be doubled. This naming convention actually comes from Apple.
Can I create all the Retina images at once for my whole Media Library?
Yes, check the Retina Dashboard screen (under the Media menu).
Can I crop my images and they will be cropped the same in retina?
Yes, but I suggest you strongly to use the YoImages
plugin to crop your images.
Will the images be optimized? (EWWW, SmushIt)
I will be honest here. WPMU (SmushIt) is very good at marketing and writing articles to promote their stuff but they aren’t good at collaboration with other developers out there. Well, they only care about themselves and about making money. EWWW works with Retina and at the contrary of WPMU, you will be able to chat with a real human (and a real developer) if you have an issue or a question. Go for it 🙂 I optimize my Retina images with EWWW as well.
Does it work with Amazon S3 and CDNs?
Does it work for other High-DPI devices?
I tried it on a few High-DPI mobile devices and it works fine.
Most issues are related to the sizes of your media. The first thing is to check if the retina image has been generated. Take the URL of your image, add @2x at the end, and load it directly in your browser (if you image is cat-200×200.jpg try to loadcat-200×[email protected]). If it is not found, go in the Retina Dashboard. Click Generate. Is this specific image size is still red, the plugin cannot generate it because the full-size image is too small.
If the retina image is present, then switch between the methods (particularly try PictureFill and Retina.js). Did you clear your cache? If you contact me, please share with me your URL, a screenshot of your dashboard and if possible, a screenshot of your “Details” screen.
It doesn’t work with PictureFill but works with Retina.js, why?
Maybe you are using a plugin that blocks the modification from being made. If you use a SEO plugin with a feature like Rewrite Post Title that might be it. Check this feature off and it will work.
The logo or icons of my theme are not displayed as Retina, why?
The plugin can transform the images that go through the WordPress API and the ‘Image Sizes’ properly (which means that they are part of the Media Library). Themes often uses a one-time customized size for the logo, and for that reason the image wouldn’t be taken care of by the plugin. The easiest way to go around this is to create the Retina image by yourself. For example, if you are logo is 200×100 and named ‘logo.png’, upload a 400×200 version of that logo named ‘[email protected]
’ next to the other one. It will work immediately.
My logo / images appeared twice bigger on Retina.
Let’s say you have a logo which is 200×400. The retina logo would be 400*800, but it should STILL be shown as a 200×400 image relatively to the rest of your website. The workaround is to keep it simple and neat: always set the (normal) width and the height for all your images (in HTML directly or via CSS).
I have issues with images in my slideshows / sliders.
That is unfortunately the most infamous issue to expect with this “Retina” technology. A lot of developers ignore it, sometimes don’t code properly, think that what they did is “enough”. You should ask the developer to do something about it, and if he cares, he will do it. You can also do it by yourself, check the next question.
I have issues with images loaded on the fly / asynchronously.
This is very tricky. The simple answer would be to ask yourself a developer or ask a good and very geeky friend. This is not a simple matter.
If you are using Retina.js method, you can see how to resolve this issue on this Github discussion.
I have an issue with WP Engine + CDN.
You could try using a re-writing rule in your WP Engine settings (HTML Post Processing). This regex would do the job:
`#http://www.yourwebsite.com/(\S*.(?:jpe?g|png|gif|ttf|otf|svg|woff|js|css))# => http://cdn.yourwebsite.com/$1`
Sometimes, themes and plugins developers will need to add support for the Retina. Using WP Retina 2x, it should be easy, I created functions, filters and actions for them. Please find about this API here: https://wordpress.org/plugins/wp-retina-2x/faq/.
WordPress stops responding when…
Maybe you don’t have enough memory allocated to PHP or the script takes longer than the maximum execution time limit. You can change those values using the PHP Configuration File (php.ini):
* php_value memory_limit = “128M”;
* max_execution_time = 360;
… or by modifying the WordPress PHP files (wp-settings.php ideally):
* ini_set(‘memory_limit’, ‘512M’);
* ini_set(‘max_execution_time’, 300);
Please note that it doesn’t work with some cheap web hosts, as they don’t want you do to that instead. The real issue can also be tracked in the PHP error logs.
I am using CSS3 filters and the Retina images look blurry.
It is a known issue and it is not related to the plugin. You can find the answer on this post: http://matthewhappen.com/fixing-css3-filter-blur-on-retina-displays/
The retina images are too heavy, how can I optimize their size?
Give a try to the EWWW Image Optimizer plugin. It will do the job.
I am a developer and I want to use functions, filters and actions in your plugin.
Sometimes, themes and plugins developers will need to add support for the Retina. Using WP Retina 2x, it should be easy, I created functions, filters and actions for them. Please find about this API here: https://wordpress.org/plugins/wp-retina-2x/faq/
I still don’t understand a thing!
Please check my tutorial and introduction
to Retina Displays. You should also have a look at the WordPress forums. Ask a friend to help you.
It still doesn’t work!
Create a new support thread here
. I always look at the new tickets. However, I only reply if it seems there is a bug in the plugin and I will always try my best to resolve it.
I love this plugin!
This plugin is great, how can I thank you?
Thanks for asking, since we, developers, get usually 10x more complains than thanks! I don’t blame anyone, I personally don’t say thank you to every single developer of all the software I am using. But if you are happy, please write a nice review here