Glossary Item Box

Squirrelcart v6.1.0

Retina Images (high pixel density)

Overview

Many smart phones, tablets, and other devices now offer screens with high pixel density displays. This makes things look sharper and more defined, and is achieved by having more pixels per square inch. Some screens have 2x the pixels, some 3x, and some even more.

 

When viewing regular images on these screens they can look blurry because the browser must enlarge them so they appear at the correct size.

 

Squirrelcart's retina image feature automatically serves larger images to devices having retina displays so that they appear sharp.

How it Works

Suppose a visitor loads a page that displays an image named "example.jpg" that is 300px X 600px in size:

<img src="sc_images/products/example.jpg" width="300" height="600" alt="" />

 

The request for the image file is directed (via .htaccess directives) to a PHP script. That script detects the capability of the device's screen to determine the pixel density. If the device has twice as many pixels as a standard display, the script will automatically serve a different image file to the device that is twice as large and has a filename ending in @2x to indicate this, such as example@2x.jpg . If the screen has three times as many pixels, an image 3 times larger is served with a filename ending in @3x.

 

These larger images are automatically created for most records in Squirrelcart when the Retina Image feature is enabled, via the Auto Size feature.

 

Requirements

 

Enabling Retina Images

  1. Open your control panel
  2. Click the Settings > Image Settings menu link

  3. Check the Auto Size checkbox at the top of the page if it is not already checked.

  4. Check the Retina Image checkbox.

  5. Click Save Changes

  6. Connect to your server using an FTP client and navigate to the folder containing your Squirrelcart folder. For many users this is also your web root folder (public_html, www, htdocs, etc...)

  7. Look for a file named ".htaccess" . If it does not exist you'll need to create it using a text editor. Add the following lines to that file and upload the changes to your server:

    # Handle hi-res retina images
    RewriteCond %{HTTP:Cookie} devicePixelRatio [NC]
    RewriteRule \.(?:jpe?g|gif|png|bmp)$ squirrelcart/lib/retina-images/retinaimages.php [NC,L]
  8. These lines will redirect all image file requests to the retina image script. Reload your store page in your browser to make sure the lines you added did not cause any issues. Modifying htaccess files incorrectly can sometimes trigger fatal errors which would be very noticeable. If you notice any errors undo the changes.
     

Testing the retina images script

Because this feature is designed to be transparent to users it can be a little tricky to tell if it's working properly. Here's an easy way to confirm that the script mentioned above is doing its job. For this test you will need to devices, one with a standard display and one with a high pixel density display (smartphone, tablet, etc...).

  1. Right-click and save this image to your computer and name it test.jpg


    Example Image 1

  2. Right-click and save this image to your computer and name it test@2x.jpg


    Example Image 2
  3. Using your FTP client upload both images to folder that contains the htaccess file you modified in step 7 above.
  4. Open a browser on a device having a regular display and type the URL location corresponding to the first example image. If your store is in the root of your website, the URL would be:
    http://www.example.com/test.jpg

    Because you are using a regular display you should see the Example Image 1 load.
  5. Open a browser on a device having a high pixel density display and type the same URL. Because you are using a high pixel density display you should see the Example Image 2 load instead. If this happens the script is working properly.

Adding Retina Images Manually

The Retina Image feature will automatically generate the necessary @2x and @3x Image files for most images in Squirrelcart such as products, categories, options, etc....

It will not automatically generate these larger images for theme images, or for any image Squirrelcart is not aware of. 

For example, if you'd like to serve larger versions of your logo to devices with high pixel density screens you can do so, but will need to create larger versions of the image and add the @2x and @3x suffix. The retina image script will work on these images as well.

 

For example, if your store logo image is 80px X 40px and is located here:
http://www.example.com/squirrelcart/themes/my-theme/images/store_logo.png 

 

1. Create a version that is twice the size (160px X 80px), put it in the same location, and name it store_logo@2x.png .

 

2. Create a version that is three times the size (240px X 120px), put it in the same location, and name it store_logo@3x.png .

 

 


© 2001-2017 Lighthouse Development. All Rights Reserved.