Content

Retina Images

The plugin changes images source (src="/") for all high-resolution displays.

Download

Insert your email address. Download link will be sent to this email address.

plugin
joomla 2.5joomla 3.0joomla 3.1joomla 3.5

This Joomla! plugin makes the display of images on high-resolution displays easy. You might have noticed that on high-resolution displays such as Apple Retina Displays or any Android high-resolution device, the images are blurred or fuzzy. This plugin will change the source of the image and replace it with a high-resolution image. It applies to all high-resolution displays, Desktop (Windows, Mac, Linux), Android, iOS. 

The Retina Images plugin is inspired by Retina.js and uses BDoran`s detection of high-resolution devices.

The advantage of this plugin is that it replaces images before the user / client starts loading the page, so it does not force the user / client to download each image twice.

Version Version created Version description
1.3 2014-04-08 09:49:57 repair loading images in certain circumstances
1.2 2013-03-25 15:47:28
1.1 2013-05-31 12:45:50

How It Works

When the users load a page, plg_retinaimages plugin checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution version exists, the plugin will swap it.

There are 2 ways how to set your high-resolution image version.

Use of High-resolution HTML5 Attribute

The plugin allows you to use High-resolution attribute (data-hdsrc="/ ") to define a high-resolution image version on your server. You can change the  high-resolution attribute name in the plugin parameters to a name that suits you more.

For example, if you have an image on your page that looks like this...
{code brush: php}
    
<img src="/images/my_image.png" data-hdsrc="/images/my_high_resolution_image.png" />
    
{/code}

... the plugin will check your server to see if an alternative image exists and it will replacethe "src" for:
{code brush: php}
    
<img src="/images/my_high_resolution_image.png" width="orig_width" height="orig_height" />
    
{/code}

Use of High-resolution Modifier

The plugin assumes you use Apple`s prescribed high-resolution modifier (@2x) to denote high-resolution image versions on your server.
You can change High-resolution modifier in plugin parameters to a modifier that suits you more.

For example, if you have an image on your page that looks like this...
{code brush: php}
    
<img src="/images/my_image.png" />
    
{/code}

The plugin will check your server to see if an alternative image exists at this path:
{code brush: php}
    
<img src="/images/my_image@2x.png" width="orig_width" height="orig_height" />
    
{/code}

The high-resolution images should be in the same folder.

comments powered by Disqus

Additional information

For our products there is:

  • no warranty!
  • no support!
  • it is as it is
  • use it on your own risk!