Working With Images

Your website has the ability to use images in a number of different ways, and an onboard image editing tool to help you tailor your pictures according to your needs.

    General Image Advice

    Image Size In days past, it was common to have images with certain size requirements. With modern web design, websites are responsive, which means they are meant to look good on any device size/shape. With responsive design, there is not a specific size to use for images because they will be resized and repositioned as you view your site on different viewports. To maintain good quality, however, as a general rule, we recommend uploading images that are at least 1800 pixels in width.

    Where to Get Images

    As you work with your website, you will see a common dialog box for selecting images that looks like this: From here, you can click: Choose Local File - This allows you to upload an image from your local hard drive. This is usually the best source for images because it personalizes your site. Choose Server File - This allows you to choose a file that you have already uploaded to the server and re-use it.

    Image Editor

    Your website comes with an online image editor to help you make simple changes to your images. Once you have selected an image, you should see a pencil overtop of it in the editing screens: Click on the pencil to make changes to the image. At the bottom of the image editor, you will see several features: Filter - Applies some pre-set filters to your image, with some controls to adjust them.

    Image Section

    To add an image to a web page, click the plus icon in any group and choose “Image” as the section type. We recommend then hovering over the image and clicking “Image Properties,” then choosing the option to “Not snap to grid.” This will make sure the entirety of the image is shown, and will not constrain the image down to the 12-position grid that is used to manage positioning on your site.

    Keeping Images Aligned

    When designing your web pages, it can be desirable to align a series of images horizontally. One good way to do this is to make sure each row of images appears in a new Group. This way, all images are aligned within the group regardless of their size. Another option that can be useful is to make sure all images are the same pixel size.