Optimising images in a Ship iFrame

Users can now optimise the images in a Ship iFrame by using the new EXPECTED WIDTH field available in the Customise your Widget step. Using it can drastically decrease the load time of the Ship iFrame.

This article discusses the following:

• How are the images optimised?
• How to find the Expected Width

How are the images optimised?

 Images are optimised in two ways:

1. They are resized so as to make them the exact dimensions they are displayed in, instead of loading a much bigger image in an area that is small
2. They are compressed so as to make them smaller in size, without losing any of the quality.

NOTE: Deckplans are not compressed, as the compressions may result in loss of quality, rendering any text on it unreadable.

How to find the Expected Width

The expected width, is the area in which you Ship iFrame will be displayed. This is usually the width of the body of your website (ie, anything that doesn't include the header, navigation, sidebar, or footer).

There are multiple ways to find the Expected Width for your specific website:

1. Asking a member of your IT team
2. Look into the settings of your site if you have access to them
3. Easy trick: Using Screenshots
   1. Navigate to a page that would have the same layout as the page you would embed your Ship iFrame in
   2. Open your preferred screenshot program, or use
      • PC: Alt + Print Screen, or Fn + Print Screen (if your laptop has another feature assigned to that particular key)
      • MAC: SHIFT + CMD + 4
   3. Make a screenshot of the area you're expecting your Widget will be loading in
      
   4. Open the image file created (this will usually be on your desktop), and find its dimensions in pixels. The width of that image is what you should put in the EXPECTED WIDTH field. 

NOTE: It doesn't matter if the EXPECTED WITH is off by a few pixels, it will still compress and resize the images to something that is much faster to load.