Starting with version 31.2, Infradox websites have support for High Density Displays (e.g. Apple Retina) built-in. The goal of such displays is to make the display of text and images extremely crisp, so pixels are not visible to the naked eye. Without HDD support enabled, images are stretched to fit, and may therefor appear unsharp. High Density Displays require images to be twice the size of the size that you want to display. E.g. a 375 pixels wide thumbnail should actually be 750 pixels wide. It will display as 375 pixels regardless, but it will be much sharper looking. We have also added “Dynamic thumbnail loading” which is a setting that you can use with or without High Density support enabled.
What you should know
There are a few things that you need to know before you decide to use the High Density support option.
- High Density display support is a paid update.
- High Density display support requires us to generate all the new images, to change the ingestion procedures and to make changes to the web server setup.
- Thumbnails and previews will be generated and stored using both the normal sizes (for normal displays) and twice as large (for HD displays).
- Thumbnail sizes 170 pixels and 300 pixels are not available if you enable High Density support. The normal thumbnails will be 210 and 420 pixels, and the larger thumbnails will be 375 and 750 pixels. The 420 pixels and 750 pixels versions are the images that your browser will load if you have a High Density display. Web browsers will automatically load the images in the size that best suits the user’s display (i.e. normal density or high density).
- Preview images are not available as 500 pixel versions, you can only select 700 pixels. A 1400 pixel version will be generated for High Density displays.
- Your storage requirements increase because of the larger files.
- Page load times will be longer because of the larger images and your website will consume more bandwidth.
- To minimize load times, you can enable “Dynamic thumbnail loading” – this is explained in the following paragraphs.
- Thumbnail images have no watermarks, so note that larger unmarked images are available to website visitors. If you don’t want this, then do not enable High Density support.
Custom pages and CSS
No template-, CSS- or Script changes are required if you enable High Density support. All standard templates are automatically changed to use the HTML “srcset” attribute. For example:
will automatically be changed to
However, if you have custom pages, you may want to change those to work with larger images too. Create a support ticket for further info or if you need help with this.
Dynamic thumbnail loading
Whether or not you have enabled High Density display support, you can enable the Dynamic thumbnail loading setting via Site configuration, Thumbnail pages, General settings. This is part of the standard version update (i.e. it’s not a paid update). With this option enabled, the HTML of thumbnail pages will have a place holder image instead of the actual thumbnail. Once the HTML is loaded, the actual thumbnails will dynamically load. As a result, pages will load faster and only the images that are in the visible area (view port) are loaded.
Place holder image
The place holder image is a small gif file, usually a spinner so that it’s clear that the images are still loading. This place holder / spinner image must be uploaded to the folder \spinners, and its name must be tspinner.gif. You can upload this image with the Website file manager (in your admin toolbar).
Thumbnail loading options
There are two options for Dynamic thumbnail loading. 1) You can wait with loading thumbnails until the images are in the visible area of the screen (the view port), i.e. when the user scrolls down. Or 2) you can load all the thumbnails regardless of they’re in the view port immediately after the HTML is loaded.
Setting a threshold
The threshold lets you specify the number of thumbnails that will always be part of the HTML that is rendered on the server. E.g. if a page has 100 thumbnails and you’ve set the threshold to 10, then the first thumbnails will display immediately (i.e. those are not loaded dynamically). The rest of the thumbnails will then load dynamically once the user scrolls down or automatically if the missing images are in the view port. You can experiment with settings that work best for you.
