High resolution images

High resolution images of the kind used by Apple's Retina® displays can be automatically created by Xara.

In order to take advantage of Retina type screens it is normally necessary to create all your web photos and graphics at twice the normal resolution of 96 dpi - that is twice as many pixels per inch both vertically and horizontally which is four times as many pixels per square inch. The downside of this is that your files are now up to four times as large, thus dramatically slowing down your website for all your visitors. For those visitors to your website that do not have high-resolution screens this is an unacceptable penalty.

Xara solves this problem by both automatically creating the high-resolution photos and web graphics for you and also being smart enough to load the correct resolution graphics for the browser being used. Retina images are also used in Fit to Width websites when scaling your website above its normal size.

So this means no speed or download penalty for the non Retina viewers, but for those that do have high-resolution web browsers, they get to see the double resolution imagery, and a much higher quality website.

This high-resolution creation of images is enabled by default - when you export your website a Retina or high resolution viewer will see the larger resolution images and graphics whilst a standard viewer will see images at a normal resolution. The only thing you have to do - is to make sure that the images you want to appear as high-res are saved in your web pages at a higher resolution than 100 dpi, as this is is the cut off point at which Xara assumes you want an image to be rendered as high definition. Images at a resolution below 100 dpi remain as standard definition images. You would not normally need to worry about this as with the feature in its default enabled state all images are optimized at 192 dpi in the Optimize Photo dialog and so therefore well above the threshold for the creation of high resolution images.

Note that due to the much larger images and the fact that both normal resolution and high resolution images are required, publishing Retina websites takes longer than publishing non-Retina sites. If you wish to disable the feature go to the "Web Properties" > "Website" tab located on the Utilities menu, or else right-click on your web document and choose "Web page properties" > "Website". Then uncheck the Retina (hi-def) images checkbox at the bottom of the dialog.

If you wish to re-format a standard definition site created in an older version of Xara Designer to one with high resolution images then bear in mind that you will have to import your photos afresh with the Retina feature turned on.

See Optimizing Photos and Bitmaps for more detailed information on image resolutions.