Sub-Zero is a visually-driven template with the ability to display lots of images in different sizes. To ensure your website is presented at its best, we have included a guide of recommended screen resolutions and file sizes for images.

Recommended Image Sizes

Pixel dimensions measure the total number of pixels along an image’s width and height. Resolution is the fineness of detail in an image and is measured in pixels per inch (ppi). There are two resolutions that you can use – non-retina (standard resolution) and retina (double resolution). Using retina is entirely optional and not required for Sub-Zero.

The placeholder images are sized to the recommended dimensions for each image type. You can use these as references for sizing your images appropriately for Sub-Zero. Here is a list of recommended sizes for non-retina and retina displays:

Recommended File Sizes

The file size of an image is the digital size of the image file, measured in kilobytes (K), megabytes (MB), or gigabytes (GB). File size is proportional to the pixel dimensions of the image. Images with more pixels may produce more detail. Thus, image resolution becomes a compromise between image quality and file size.

Another factor that affects file size is file format. Because of the varying compression methods used by .gif, .jpg, .png, and .tiff file formats, file sizes can vary considerably for the same pixel dimensions.

We recommend that you keep your file sizes as small as possible to reduce loading time. Images that are large in file size will slow down your site. The smaller the file size, the better. The faster the site, the easier to visit and index a page.

Google has indicated site speed (and as a result, page speed) is one of the signals used by its algorithm to rank pages. Pages with a longer load time tend to have higher bounce rates and lower average time on page. Longer load times have also been shown to negatively affect conversions.

We recommend using tools like ImageOptim or websites like JPEGMini or CloudConvert to reduce the file sizes.

By compressing your images for the web and keeping them in the right file format, you can dramatically increase your page speed. Many have found that faster pages both rank and convert better.

Using Retina-Ready Images

When naming retina-ready images, add a @2x at the end of your file name. This will provide the double resolution on retina displays.

Here is the code which you need to modify to add a retina-ready image:

<div class="header" style="background-image: url('include/images/image@2x.jpg')">

If your retina images are not visible on your server, you will need to edit your .htaccess file. To learn more about .htaccess, please visit Apache HTTP Server.

Configuring the .htaccess File for Retina Images

If this template will be hosted in the root directory/folder of your site, upload all files to that directory. However, if it will be hosted in a subdirectory other than the root directory, follow these steps:

• Download and open your server’s .htaccess file with a code editor.
• Search for the following lines in the .htaccess file:

# Original Version
# Use this option if your website will be hosted in the root directory of your domain.
# Example: http://yourdomain.com/index.html
RewriteBase /
RewriteCond %{HTTP:Cookie} devicePixelRatio [NC]
RewriteRule \.(?:jpe?g|gif|png|bmp)$ /retinaImages.php [NC,L]

• Comment out the code (place a # symbol) before RewriteBase, RewriteCond, and RewriteRule.

# Original Version
# Use this option if your website will be hosted in the root directory of your domain.
# Example: http://yourdomain.com/index.html
# RewriteBase /
# RewriteCond %{HTTP:Cookie} devicePixelRatio [NC]
# RewriteRule \.(?:jpe?g|gif|png|bmp)$ /retinaImages.php [NC,L]

• Add the following below the code in option 1:

# Revised Version
# Use this option if your website will be hosted in a subdirectory of your domain.
# Example: http://yourdomain.com/website/subfolder
# RewriteBase /
# RewriteCond %{HTTP:Cookie} devicePixelRatio [NC]
# RewriteRule \.(?:jpe?g|gif|png|bmp)$ /retinaImages.php [NC,L]

RewriteBase /website/subfolder
RewriteCond %{HTTP:Cookie} devicePixelRatio [NC]
RewriteRule \.(?:jpe?g|gif|png|bmp)$ /website/subfolder/retinaImages.php [NC,L]

• Save the .htaccess file and upload it to the appropriate folder/directory on your server.