Optimal image file size

The placeholder fields on page layouts automatically reduce the display size of an image on the page to fit the dimensions of the placeholder if the image is larger, just like Microsoft PowerPoint.

This makes the process of using the page layouts very simple, but be aware that while the image on the page looks smaller in size, the page is still actually loading the entire original image but only displaying at a smaller size.

In a PowerPoint presentation running off a computer hard drive, this file size versus display size issue has little impact. Delivering a course over the Internet, though, is different and file size is a very important factor for page performance.

If the image file size is much bigger than the display size on the page, your learners will be downloading more data than the page actually requires. This in turn can affect page loading times and overall course performance.

You should keep this issue of display size and file size in mind when using the placeholder fields on page layouts to add an image to your page. Open the Image Properties panel by double-clicking the image on the page and then click Properties on the Image Settings ribbon. This shows you the Asset Details file size and Element Details display size of your image. If there is a big discrepancy, it’s a good practice to open the image in the Image Editor tool to reduce it to the display size. This will help ensure that your learners get the best loading experience possible.

It also makes sense to create a shape in Claro rather than importing an image to use as a box or circle (for example, for buttons or backgrounds). The Shape tool uses SVG (Scalable Vector Graphic) files to generate the shape on the page, rather than generating an actual image file. This makes the shape much smaller in size for downloading than a similar image file such as a .jpg might be.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request