How to Configure the WP Retina 2x Advanced Settings

Posted OnJul 12, 2015     CategoryImages, Plugins     CommentsNo comment

In this guide to WP Retina 2x, we will show you how to configure the Advanced Settings, including picture replacement technique, image quality, and more.

Step 1) Login to the WordPress Dashboard.

Step 2) From the left-hand sidebar of the Dashboard, navigate to Settings -> Retina.

Step 3) Click on the Advanced tab.

km-retina-advanced-01

Step 4) Complete the fields as shown below:

A. Method Select the appropriate Method that works best in your situation.

  • The PictureFill method rewrites the HTML on-the-fly in order to use the new srcset. Since it is not supported by the browsers yet, the JS polyfill PictureFill is used to load the images. It is now the recommended method.
  • The Retina JS method is a 100% JS solution. The HTML loads the normal images, then if a retina device is detected, the retina images will be loaded. It is fail-safe but not efficient (images are loaded twice).
  • The IMG Rewrite method rewrites IMG’s SRC tags on-the-fly with the retina images directly if the device supports them. This method does not work with most caching solutions.
  • The Retina-Images method uses a server handler: the images will be loaded through the Retina-Images PHP handler. Your .htaccess will be modified automatically.
B. Quality Enter the Image Compression quality in the textbox.
The default value is 90.

The Image Compression quality doesn’t always work. It is dependant on your hosting service.
C. Debug Mode Place a checkmark in this checkbox if you want the client to always be served Retina images.

This should be used for testing purposes only. When checked, a log file is created in the plugin folder.
D. Custom CDN Domain (Pro) If not empty, your site domain will be replaced with this CDN domain (PictureFill and HTML Rewrite only). This option is only available in the Pro version (paid plugin).

km-retina-advanced-02

E. Keep IMG SRC (Pro) Place a checkmark in this checkbox so that PictureFill src tags are replaced by src-set tags and consequently search engines might not be able to find and reference those images. Keeping it will load images twice for retina devices on old browsers. This option is only available in the Pro version (paid plugin).
F. Use Lazysizes (Pro) Place a checkmark in this checkbox so that HTML will be rewritten to support the lazysizes and the script will be also loaded. The images will be loaded in a lazy way (when the visitor is getting close to them). This option is only available in the Pro version (paid plugin).
G. No PictureFill Script Place a checkmark in this checkbox so that the script for PictureFill will not be loaded. Only the browsers with src-set support (e.g. Chrome) will display images. You can also load the PictureFillscript manually.
H. Hide ‘Retina’ column Place a checkmark in this checkbox to hide the Retina Column from the Media Library.
I. Hide Retina Dashboard Place a checkmark in this checkbox to hide the Retina Dashboard menu and tools.
J. Admin in Retina Place a checkmark in this checkbox so that the WordPress Admin will also be Retina. Some plugins (like NextGen) do not like Retina enabled in the admin.
K. Ignore Mobile Place a checkmark in this checkbox to disallow the delivery of Retina images to mobiles devices. This option is not supported by PictureFill and may prevent it from working.

km-retina-advanced-03

Step 5) Click the Save Changes button to save any changes.

The next step of the guide will focus on How to Configure the WP Retina 2x Pro Settings.

 


Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend