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 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).