Fill, Fit, Stretch & Tile Images in EverWeb

When building your website, the images you choose are important as they convey to your visitors what your site is about and what kind of business, or venture, you are. As such, thought should be given to the images you use so that you give your visitors the right impression right from the landing page.

When building your website in EverWeb there are a number of different ways to display the images you use. Images can act as either page or browser backgrounds, in a slideshow, an image gallery or just standalone within the pages of your website.

Displaying Images in EverWeb

In many instances, you can display the images you’re going to use in one of a number of different ways in EverWeb e.g. as the Original Size, Stretch, Scale to Fill, Scale to Fit or Tiled. If setting an image as Page Background in the Page Settings tab of the Inspector Window, all of the just mentioned options are available. The same options are available for standalone images using the Fill section of the Shape Options tab. If you’re using an image as a Browser Background all options except Scale to Fit are available.

Choosing the Right Image Display Option

When experimenting with the different ways to present an image, you may find that one option appears to do the same thing as another option. You may find that your image becomes distorted, or is too large or too small for the space you want the image to occupy. Here’s how each option works in EverWeb so you can choose the right display option every time:

Original Size

The image is displayed in its original size, retaining its original proportions. If you drag and drop your image onto the Editor Window, the image is automatically scaled down if it’s too large so it fits easily on the page. If you still want to import the image as its original size use the Insert-> Choose… option. This will bring the image in ‘as is’. If you find the image is too large to manipulate, don’t forget Cmd+Z to undo or use the Metrics Inspector to resize the image manually.

You can change the image display back to ‘Original Size’ at any time using the Shape Options tab and clicking on the ‘Original Size’ button in the Fill section. Alternatively, use the drop down menu beneath the ‘Image Fill’ dropdown. When you select Original Size, you may find that only part of the image is displayed in the selection box. in such cases, resize the selection box to view the whole image.

If you want to know the image dimensions, make sure that it is selected, then go to the Assets tab. The image file is selected in the Assets List. If you don’t see the dimensions (in pixels), click on the up/down arrows that are above, and to the right of, the first asset listed. Click on the up/down arrows and select ‘Show File Info’. Alternatively, use the Metrics Inspector to view the image’s dimensions.

Scale To Fit

Scale to Fit changes the size of the image to fit in the given height and width while retaining the image’s original proportions. All of the original image remains visible. You may find that when selecting this option that the horizontal and/or vertical sides of the selection box are not completely filled depending on the original size and proportions of the selection box. Try resizing the selection box using one of the vertical or horizontal grab handles (make sure that you have constrain proportions off when doing this). As you increase the size of the selection box, you should see some horizontal and/or vertical space appearing between the image border and the selection box border.

Scale To Fill

When you use Scale To Fill, your image will do just that within the selection box. The image retains its proportions but as the image has to fill in the whole selection box, it may get ‘zoomed in’. As a consequence, the image may be cropped either horizontally and/or vertically. If you resize the selection box, you’ll find that the amount of image you see changes as you resize. there is no way to manually move the image within the selection box, use will have to use the corner grab handles instead to see if resting gives you the result you require.

In some instances, masking your image may produce a better result than Scale To Fill. Alternatively Scale To Fill first, then mask the image afterwards.

Stretch

Use Stretch when you want to fill the selection box with your image and it’s not important to retain the image’s proportions. This can be useful when you have an image that’s just a bit too narrow, or too short, to fill the selection box. Stretch can be helpful in these instances but if an image needs too much stretching to fill the selection box, then it can appear distorted. If this is the case, it’s recommended to use a graphics program to resize the image properly. Sometimes, Apple’s Preview be the ideal solution if you don’t have. graphics package to hand.

Tile

When using Tile, the horizontal aspect of the image (x) is used in relation to the Content Width of the page. for example, if the image is 200px wide and the page is 1000px wide, the image will be tiled horizontally 5 times. The tiling on the y axis will depend on the image height. In this example, if the image is 200px high, you would see a 5×5 tiling as a result.

EverWeb’s image display options give you a variety of easy ways to display images how you want them to be on your webpages, or as a background to your page or browser. Although flexible to use, you may still need further image manipulation through either EverWeb’s Mask feature, or by using a graphics editing program. Getting the right look for your website is important so is worth investing time in getting your images just right!