Page 433 - Xara Designer Pro X17

Web Graphics and Websites 433

You can test this by changing the width of your web browser when previewing your site –
make it narrow and you should see it switch instantly to show the mobile variant of your
site.

High resolution images

High resolution images of the kind used by Apple's Retina displays can be
(R)
automatically created by Designer Pro.
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.

Designer Pro 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
(R)
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 Designer Pro 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"