1. Ensure Images are Sized to your Canvas.
Having images that extend outside of your viewable canvas is an easy way to add unnecessary weight to your experiences. So it is a good idea to crop any large images to their intended size before uploading to the Studio.
If you have to resize in the Studio, we recommend only resizing images smaller, not scaling up, to ensure they appear at the highest resolution possible. When you resize, the Studio will automatically create a new version of the asset at the newer dimensions.
2. Keep images under 600kb.
Browsers download many images at the same time in parallel. This means that if 10 images each take 1 second to download, the total elapsed loading time to download all 10 images would still only amount to 1 second.
However, if just one of those images was five times larger than the others and took 5 seconds to download, the total elapsed loading time to download all 10 images would amount to 5 seconds. All because of that one image!
With few exceptions, your images at retina resolution should not exceed 600KB in file size. Exceptions occur for color-heavy and texture-rich photos that are difficult to compress, but even those should always be less than 1MB in file size.
The general rule of thumb is that if your image is larger than 600KB, you should consider a different approach. Review the other tips below to see what you might be able to do to adjust.
3. Avoid PNG-24s if you don’t need alpha transparency.
PNG-24s are the most expensive, or “heaviest” image file type. The only time you should use a PNG-24 image is when you absolutely need alpha transparency.
More often than not, you don’t actually need alpha transparency. If the portion of the image that is using alpha transparency is not moving or fading above another image, then alpha transparency is not necessary. You can flatten that image to a much lighter JPG and not compromise your design.
4. Use PNG-8 instead of PNG-24 images for transparency.
If your image needs transparency, and the transparent edge does need to have true semi-transparent pixels, then consider using PNG-8 instead of PNG-24 for transparency. PNG-8s use fewer colors and compress better than PNG-24s.
If you need the alpha transparency, consider splitting the transparency across two images. A single PNG-8 for the solid pixels coupled with a PNG-24 for the semi-transparent pixels can lower the overall file size, but the obvious drawback is that you will need to manage two images on the canvas.
5. Use the smallest possible transparent image to create the effect you need.
High-quality photos with transparent pixels, especially semi-transparent pixels, are often needed to create special effects. But a high-quality photo saved as a PNG-24 will often exceed our 600KB recommendation — in fact, they’re often 2MB or more.
More often than not, only a portion of the image needs to be transparent to create the effect. To lower file size, create a static JPG image for all the solid pixels of your image, and then layer the transparent and/or semi-transparent pixels on top using a much smaller PNG-8 or PNG-24 image.
6. Many small images are often better than one large image.
Although it’s often tempting to export your entire page content from Photoshop or InDesign as one large static JPG image, a single large JPG may not compress as well as multiple smaller images.
Consider the following image. By segmenting the photo portion from the text portion, you’re able to use the appropriate file type for each. The text portion compresses better as a PNG image, while the photo portion compresses well as a JPG image.
Those images when separated equal a total of 87KB compared to the original 218KB file.
7. Use copy & paste to avoid uploading the same image multiple times.
If you upload the same image multiple times to the same page or even multiple pages, the Studio has no way of knowing the content of those images is the same. As a result, each upload is stored as a new image file, and subsequently, every one of those images must be downloaded by the browser before the page can be displayed.
To mitigate this, copying and pasting that image from within the Studio will ensure the image is only downloaded once by the browser when displayed to your visitor, saving a bunch of time and space.
8. Avoid duplicating content in images for the sake of effects.
Along the same lines as splitting your transparency or using many smaller images instead of one large image, you should avoid duplicating image content wherever possible.
If, for example, you have one image fading in overtop of another image, but parts of those two images are the same, create one image for the identical parts.
Two images with the same content will only force the browser to download the image data twice and take longer to do so.
9. Use rectangles for solid color backgrounds.
If your image is largely a solid color, use a rectangle shape in the Studio with a solid fill instead. Rectangles in Studio are vectorized shapes and take no additional time to download. By utilizing a rectangle, you’re able to make a much smaller image for the portion of your page that is not a solid color.
JPG @ 29KB
PNG-8 @ 14KB
10. Use the Text Tool instead of images of text.
The Font Explorer allows you to upload your own custom brand font or select from over 800 Google Fonts and all their variations. Using text instead of PNG images will always result in faster load times and better readability than image files. Additionally, this will ensure your content is crawlable by search engines.
11. Use animations instead of animated GIFs.
Animated GIFs are often large heavy files. Instead, check out the animations built right into Ceros.
With animated GIFs, every color in every frame must be placed in the indexed color palette. Many varying colors will result in a larger file.
If you need to use an animated GIF, keep the pixel dimensions to a minimum. Every additional pixel is multiplied by the number of frames in your image.
Furthermore, unless utilizing GIF animation optimization software that compares each frame and discards pixels that don’t change, every frame will add that much more to the overall file size.
12. For more complex animation effects, use videos instead of animated GIFs.
As mentioned previously, every frame you add to an animated GIF will increase the overall file size of that image. You can avoid these large animated GIFs with videos instead.
Unlike videos, animated GIFs must be downloaded to completion before the page can be displayed and the animation can begin.
Autoplay videos can produce the same effect without the impact on initial load times.
13. Remember to hide or delete non-visible or off-canvas images.
Images that are marked as invisible in the Layers panel will not be downloaded by the browser.
However, it is common to leave images that are behind other images or images that are completely off the canvas, in the visible state. These images may not be visible to the user, but they are still downloaded by the web browser and will have an impact on the initial load.
14. Use PNGs instead of SVGs for larger assets.
SVGs are great for logos and icons but we’d recommend using PNGs for anything larger… it turns out that complicated SVGs can slow down the rendering of your content, even if they’re smaller in file size than the equivalent bitmap.