When adding a png, jpeg, or GIF to your Email Designer drafts in Staffbase Email, there are a few different ways to adjust their size and the amount of blank space around them.
Compressing your images and GIFs also makes it easier for recipients to load your emails.
Resizing Images With Block Layouts
A block is a structure for your content.
Elements live inside blocks and make up the content (images, text, surveys).
Example of a 1-column block layout
Example of a 3-column block layout
Every element stretches to the full width of each column (with some optional padding).
In order to make an image smaller, you have to use a block layout with smaller columns (like the 3-column block layout above).
You can achieve many different sizes by experimenting with different block layouts:
Here we’ve created a smaller image that’s ⅓ the size by using a 3-column block layout.
You can then use Spacer elements to create negative space. Here, we’ve changed the Spacer color from grey to white.
Using Column Widths Feature for Smaller Images
If you want to make your image even smaller, make sure to click the sides of the block (not the image) to show the Block Settings menu on the right. Adjust the sliders on the Column Widths feature.
On mobile devices, all the columns will stack vertically and stretch to the full width of the mobile device.
If you really need the image to be smaller on mobile, consider using a 1-column block layout, and adding white or transparent side borders to the image in another photo editing program before uploading it to your email design (see example below).
Acceptable File Types and Sizes
We accept png, jpeg (.jpg), and GIF formats only.
The maximum file size for one image is 10 MB.
The maximum file size for GIFs is 0.5 MB, for optimal playback speed.
The recommended width for all images is 600-1000px.
Warning: Older versions of Outlook will not render GIFs.
GIFs will display if your recipients have Outlook Desktop with a Microsoft Office 365 subscription, Outlook Webmail, or the Outlook mobile app.
Compressing an Image or GIF
If your sent email is too large, it will be clipped when recipients open it in Gmail. The images may also take longer to load if a recipient has a slow internet connection, which can affect read times.
For Windows, you can use EZGif. Click the Resize tab and upload your image/GIF.
Enter the desired dimensions for your resized image/GIF or a percentage of the original size. To ensure the aspect ratio stays the same, you can select Force Original Aspect Ratio. Click Resize image! to complete this process.
For Mac, you can use Preview. If you open a GIF with Preview, press Command + A to select all the thumbnails. In the menu, click Tools > Adjust Size and enter a smaller width/height. Make sure that Scale proportionally and Resample image are checked, then click OK.