WP Retina 2x
This plugin does two things: it creates the image files required by the High-DPI devices and it displays them to your visitors accordingly. Your website will look beautiful and crisp on every device! The retina images will be generated for you automatically (though you can also do it manually) and served to the retina devices. The concept of retina images for full-size images is also a very unique feature which is only provided by this plugin (which is why it became unique).
Retina Methods. It supports different methods to serve the images to your visitors. Why? Depending on the theme and plugins you are using (and also the way you use images in your website), not all the methods can work. Ideally, I would recommend using the Responsive Images method, then if it doesn’t work, the PictureFill method (which covers normally most cases). Retina.js should be the fallback method. There are more methods than this with their specific options.
Plug & Play. With a well-made theme and website, this plugin doesn’t require normally any specific set-up. All the defaults settings are fine. Works with multi-site and many kinds of installs.
Optimized. The plugin is very fast and optimized. It doesn’t create anything in the database.
Pro. When activated, the Pro version adds support for Retina for full-size, support for lazy-loading for your responsive images and various options. And it supports my work 🙂
Responsive Images. WP has support for Responsive Images and this plugin handles this nicely by adding the retina images in the src-set created by WordPress. The HTML for the images not handled by WP 4.4 (outside posts) will also be handled by the plugin (pick “Picturefill” method for this). The plugin also provides an option to disable the ‘Medium Large’ created by WordPress which is actually not useful (it’s a hack basically), this plugin does it better.
CSS & Background Images. The plugin cannot inject CSS to handles the images added through CSS, that’s both too dangerous and potentially very incorrect. However, in its Pro version and with PictureFill, you get an option to replace the inline CSS background image by their retina equivalent.
More information and tutorial available one https://meowapps.com/wp-retina-2x/.
Set your option (for instance, you probably don’t need retina images for every sizes set-up in your WP).
Generate the retina images (required only the first time, then images are generated automatically).
Check if it works! – if it doesn’t, read the FAQ, the tutorial, and check the forums.
Quick and easy installation:
Upload the folder
wp-retina-2x to the
Activate the plugin through the ‘Plugins’ menu in WordPress.
Check the settings of WP Retina 2x in the WordPress administration screen.
Check the Retina Dashboard.
Read the tutorial about the plugin: WP Retina 2x Tutorial.
Users, you will find the FAQ here: https://meowapps.com/wp-retina-2x/faq/.
Developers, WP Retina 2x has a little API. Here are a few filters and actions you might want to use.
wr2x_get_retina_from_url( $url ): return the URL of the retina image (empty string if not found)
wr2x_get_retina( $syspath ): return the system path of the retina image (null if not found)
wr2x_retina_file_added: called when a new retina file is created, 1st argument is $attachment_id (of the media) and second is the $retina_filepath
wr2x_retina_file_removed: called when a new retina file is removed, 1st argument is $attachment_id (of the media) and second is the $retina_filepath
wr2x_img_url: you can check and potentially override the $wr2x_img_url (normal/original image from the src) that will be used in the srcset for 1x
wr2x_img_retina_url: you can check and potentially override the $wr2x_img_retina_url (retina image) that will be used in the srcset for 2x
wr2x_img_src: you can check and potentially override the $wr2x_img_src that will be used in the img’s src (only used in Pro version)
wr2x_validate_src: the img src is passed; return it if it is valid, return null if it should be skipped