Images: What image size should I use in my design?

What sizes are the image areas?

Image sizes vary depending on the space the image is placed in. There are no fixed sizes. Image blocks in the editor will accept any image uploaded into the space. This makes image areas very flexible.

• You can upload an image of any width
  
• You can upload an image of any height
• Image widths and heights should match if you want to align images side-by-side in columns

Best size for uploaded images

It’s always best to upload an image that is larger than the area you are uploading it to. This way the image will look crisp on any device that loads the design. As a general guideline, use 800px width for your largest images. Feel free to adjust for smaller image areas.

You can upload images that are smaller in height than the default space. WordFly will adjust the size of the image to fit the space you are uploading it to. When you want side-by-side images in column blocks to align, make sure the image width and heights match before uploading the images into the space.

Here is some general guidance on image sizes:

To restrict the largest width of an image

You can set a Max Width for an image. The image will vary in size but it will never get wider than this width.

1. Click on the Image

2. Click on Styles to edit styles for This Block

3. Open the Block Container

4. In the Widths area, enter a Max Width

To maintain the exact dimensions of an uploaded image (Option 1)

Option 1: Remove the full-width class for images when you want your image to stay the uploaded size, regardless of the design’s responsive changes.

1. Click on your image

2. In the 'class' field, remove full-width

To maintain the exact dimensions of an uploaded image (Option 2)

Option 2: Upload images into text blocks instead of image blocks. Take note: Images uploaded into text blocks are always fixed width by default and not responsive.

1. Click on a Text block

2. Place your cursor in the text area where you would like the image to go.

3. Click on the Add Image icon.

4. Paste in the image URL in the src field —or— click Media to upload or select an image. Click I’m Done.

Uploading retina images

The latest Apple devices use retina displays. This means that twice the amount of pixels are packed into one image in order to make it look more crisp and lifelike. A retina image requires uploading an image that is twice the size of the space it is occupying. Let’s review how to upload retina images into designs.

In your image block

Upload an image that is at least twice the width dimensions. For example, if the image is being uploaded into an 800px wide space, upload an image that is 1600px wide. WordFly will resize it for this space and the extra pixels will make it look crisp on retina displays.

In your text block

Click the Add Image icon. Select your image from the Browse Media link or insert your image URL directly into the src field. WordFly will automatically insert the width and height of the image. Adjust the settings for width and height to half. Click I’m Done. The image will be inserted at exactly the size specified. Double-click on the image to go back to the edit window.

Take note:

• Images uploaded into text blocks are always fixed width by default and not responsive.
• Uploading an image that is double the size of the area means the device opening the design will require more bandwidth to download the image. This means more data usage on mobile devices and could result in slower image download. Take this into consideration before uploading retina images.