How To, Images

Formatting Images

We’re digging into images a bit more in this post. We’ll go over the various aspects of an image and what’s important so your site images shine!

Resolution
To find the MP (megapixels) for an image, multiply the dimensions and divide by one million. For example, an image with dimensions of 1500px x 1650px is 2.475 MP.

Color mode
Save images in RGB color mode. Print mode (CMYK) may render in psychedelic colors in browsers.

Color profile
Save images in the sRGB color profile. If images don’t look right on mobile devices, it’s probably because they don’t have an sRGB color profile.

Cropping
Browsers load the full image for images cropped by your site, such as those cropped with the cropping handle or Site Styles aspect ratio tweaks. To reduce the file size of large images, it’s better to first crop them close to the intended size manually with third-party software or the built-in Image Editor.

Image text
It’s best to use the design tools in your page builder to overlay text over your image instead of including it on the image. This will help make sure your text and image are resized appropriately for various display sizes. It also makes the text searchable. See our guides on designing for ideas on how to layer images and text.

If your image contains text, it’s best to save it as a .png file. Text in a .jpg file often becomes blurry when the image is compressed. A .png file typically retains its sharpness, especially if the image is displaying at its original size.

Orientation
If your image is saved upside-down, you can rotate the image by going to Media Library > locating the image > edit image. When editing your image you can rotate, crop and more.

Page size
If there are a large number of images on a page it can speed issues such as slow loading speeds. Check your pages here to ensure your page size is 5 MB or under.

Favicons
Save your favicon or site icon as an .ico or a .png file. The recommended aspect ratio is 1:1 and recommended dimensions for a favicon are 100px × 100px to 300px × 300px. Favicons will display in browsers as 16px × 16px.

Note: Internet Explorer has major issues displaying .pngs as favicons.

Animated .gifs
Animated .gifs are an exception to our 1500-2500 pixels rule, especially .gifs in Image Blocks. A 1500 pixel-wide .gif will likely be very large, which could potentially slow down your site. We recommend formatting animated .gifs in whatever size you want them to display on your site.

Leave a Reply

Connect with: