Best Practices: Images

There’s a lot you can do with images in the ion platform. In this support post, we discuss some best practices you will want to keep in mind when working with images. By following these tips, you will be able to find your images more easily as your image library grows and keep your page load time down.

Organization

Images that are uploaded to your console are placed into a category. You will want to make sure you set up categories that are intuitive for you to find an add to over time. You may want to have categories that are based on the size of your images, brand or the type of experience they are used in.

You will also want to follow a consistent naming structure with your images to make them easier to find as your image library grows. One option here is to have the dimensions of the image in the beginning of the file name. This will make it easy to identify what images will fit into certain areas of your ion pages.

File Types

You can upload jpg, png, svg, webp and gif images to your image library. In general, jpg images should be used for images with a lot of color. Images with less color should be saved as png files as they tend to be lighter than jpg files but are not meant to be used for images with a lot of different colors.

Size

The largest width we would recommend using with an image would be 1200px as that is the width of a responsive grid in the LG viewport. If the image is used in the background of a page, it can be made responsive and the platform will make it larger, as needed.  We aim to keep image sizes below 200kb to keep the page optimized for general web best practices.

You will also want to keep the size of your images as small as possible. The file size is a factor of the file type that is used as well as the dimensions of the image. You may also be able to reduce the file size of an image by compressing it more when it is created (outside of ion).

Image Library

When uploading images to your image library, you can check the Optimize checkbox and we’ll create a compressed version of your image you can use instead of the original image to help speed up your page speed. This is particularly helpful for larger images that are over 300 kb in size.

1-May-07-2021-07-40-18-74-PM

After uploading your image, you can view the difference between the original and the optimized version directly within your image library to determine if you want to use the original or if you’d prefer to use the optimized version in your Ion experiences.

To preview the optimized version of the creative, navigate to the image in your image library and click the eye icon.

2-May-07-2021-07-40-30-50-PM

This will open a lightbox with the image split into two halves. The left half of the image is the original version and the right half is the optimized version. You can also click and drag the border between them to get a bigger look at each version of the image.

3-May-07-2021-07-40-52-95-PM

After previewing the image, if you like the optimized version, you can go back to the preview in your image library and use the available dropdown menu next to the eye icon to select if you’d like to use the optimized image or the original image when it is added to a page in your Ion console.

Creative Studio

When adding an image to your page, you will also see an optimization icon in your image editor to optimize the image.

By default, the optimization option will inherit the default optimization option selected within your image library, but you can override that here if you would like to change whether you want to optimize the image or not on the fly.

4-May-07-2021-07-41-09-92-PM


If you have any questions, please contact us on [email protected].

Share this:

Thiers is the Global Manager of the Expert Services at Rock Content. As a designer by heart and a content marketer by enthusiasm, he is responsible for leading a seasoned team of creative and technical professionals on the mission of delivering interactive services for top brands worldwide. Outside designing solutions for difficult challenges while surfing the interactive content wave, you will definitely find Thiers in the city park playing around with his 4 lovely dogs.