High-Resolution websites in Freeway

An exciting new feature in Freeway Pro (6.1+) is the ability to output images at high-resolution making it possible to optimize your sites for viewing on high-density displays such as Retina Macs, iPhones, and iPads; some Sony and Google notebooks; and some Android devices.

Creating a high-resolution website in Freeway is simple – all you need to do is provide images that are large enough to be displayed at twice the resolution on these higher density displays. This means images that were 800px by 600px will now need to imported at 1600px by 1200px.

Outputting all images at high-resolution

The following steps can be used to have all images in Freeway output at high-resolution. If you find that you need control over individual images (such as turning off high-res, or changing the quality of the image) this can be done in the Output settings pane of the Inspector palette with the image selected.
  1. Open the File menu and select Document Setup
  2. Open the Graphics tab
  3. Check the Output high-resolution graphics option
  4. (Optional) Set the High-res Quality option to the desired level
Note that all web ready or standard resolution images will be scaled by 50% when you do this, so be sure to reimport larger versions of your images where necessary. Illustrator, EPS, SVG, and high-dpi Photoshop images will not be scaled to 50%.

Outputting individual item images at high-resolution

  1. Select the item in the design view
  2. Open the Inspector palette if it isn't already open
  3. Click the Item output settings icon at the top of the Inspector
  4. Check the High-resolution option
  5. (Optional) Set the Quality of the item to the desired level

Note that all web ready or standard resolution images will be scaled by 50% when you do this, so be sure to reimport larger versions of your images where necessary. Illustrator, EPS, SVG, and high-dpi Photoshop images will not be scaled to 50%.

Outputting individual background images at high-resolution

  1. Select the item or page in the design view
  2. Open the Inspector palette if it isn't already open
  3. Click the Item/Page's appearance settings icon at the top of the Inspector
  4. Check the High-resolution option
  5. (Optional) Select whether you want the high-resolution version of the image to be a pass-through (an exact copy of the original – web-ready graphics only)
  6. (Optional) Set the Quality of the standard- and high-resolution images to the desired level (High-res Quality will be unavailable if pass-through is selected)

Note that all web ready or standard resolution images will be scaled by 50% when you do this, so be sure to reimport larger versions of your images where necessary. Illustrator, EPS, SVG, and high-dpi Photoshop images will not be scaled to 50%.

The technique

The technique we've adopted for item images uses the browser's scaling algorithms to scale down images by 50%. On a regular display you'll see your image at 50% of the original size (which only has very minor implications, more on this later), on a high-density display you'll see the original image at high-resolution because each pixel in the image will now line-up with the pixels in the display (the image is now 2^2 times smaller and there are four pixels in these displays for each pixel on a standard-resolution display).

One of the most intriguing things about this technique is that the quality level of the image can be made surprisingly low, meaning that the file size of the image will often be only marginally higher than, and sometimes just the same as the image at standard resolutions. The result being an image that looks fantastic at both standard and high resolutions at a very low cost (sometimes no cost at all) in file size.

For background images we're using the power of CSS to control which version of the image is displayed depending on the pixel density of the device being used. The image is generated twice: once at 50% of the original and once at 100%. We're then using CSS (media queries) to instruct the browser which version of the image to display.

Both methods prevent the browser from downloading multiple versions of your images on high-resolution devices (which is, in our opinion, always a bad idea when most of them are mobile devices, potentially on costly data-plans) and therefore reduces the number of requests being made from the server, one of the main causes of slow-loading sites.

Other options for high-resolution websites

SVGs

SVGs (scalable vector graphics) are great for high-resolution websites. They're lightweight and, as the name suggests, completely scalable. They can be used in two ways, as plugins where the SVG code is output straight to the page, or converted to web-ready graphics by Freeway.

Embedding fully scalable SVGs into the page:

  1. Draw an HTML item
  2. With the item selected, open the File menu and select Import (or press Command-E)
  3. Select your SVG from the file browser

The item will now become a plugin. It can be resized to any size and the output will always be a sharp representation of your original image. Note that the size of the preview in Freeway's design view may not correspond to the size of the SVG in the browser, so testing in the browser or in the built-in Preview is a must.

Creating web-ready graphics from SVGs

  1. Draw a graphic item
  2. With the item selected, open the File menu and select Import (or press Command-E)
  3. Select your SVG from the file browser
  4. Open the Inspector palette if it isn't already open
  5. Click the Item/Page's appearance settings icon at the top of the Inspector
  6. Check the High-resolution option
  7. Set the item's Type to PNG with Millions of colors (to preserve transparency)

Note that unless the physical size of your item (in Freeway) is very small, the file size of the output will, in most cases, be larger than the original SVG. We recommend using this method only if support for older browsers (IE8 or less) is necessary.

Web Fonts

While it's possible to have Freeway create high-resolution versions of graphic text, this isn't the way that we recommend doing things. By doing so you end up with text that looks a little worse on standard-resolution displays, text that's not searchable by Google and other search engines, and a site that's not accessible for people with impaired vision using screen readers or similar devices. Not good.

Web fonts are now supported by all modern browsers. Where they aren't there are simple fallback procedures that mean your sites will always work for the few that are still using outdated browsers. Google fonts is our preferred choice of services, mainly because it's the easiest to use and free (find out how to use Google fonts with Freeway here), but there are other free services such as Font Squirrel, and premium services such as H&FJ and Fontdeck.