Skip to main content
Computer monitor with a loading bar slowing inching across with a snail on top -- the text reads: Images Loading Slow?
cq-text-component-placeholder

Is your site loading images loading really S-L-O-W-L-Y?

cq-text-component-placeholder

Images that are incorrectly added to the site can bog down loading. This load-time delay can annoy the user and can even cause Google to rank us lower in search!

Here are some tricks to be sure we are presenting ourselves with swift returns and make you a rockstar web-editor:

cq-text-component-placeholder

Optimize your image files for the web.

Large-sized images, high-resolution images, and uncompressed images can drastically reduce the page-load speed. How to fix this:

  • Important: Upload your images to the digital assets manager in AEM rather than on the page itself. When an image is uploaded to the page, it does not get processed for compression which can lead to long load times. The image file also is stored on the page data rather than living on an image folder where it can be maintained later for updates.
  • Do not use images more than 1 MB (1000 KB) on a page. If your image has a larger file size, use an image program (such as Adobe Photoshop) to resize and compress your images by exporting them to JPEG.
  • Use correct image format: Use JPEG images where a deterioration with lossy compression for photographs is OK instead of the lossless compression of PNG images. Check out this article on Gizmodo that describes the difference between JPEG, PNG, and GIF.
     

Learn about managing images on AEM


Reduce the number of images on a page.

Every image file referenced in the web page needs one connection to the server. Too many images in the web page not only increases the load size but also can choke the connection to the server by sending more than the allowed HTTP requests.

  • Use images sparingly to help with your messaging. 
  • Keep the number to less than five. 
  • Utilize icons using Font Awesome (in the NKU Text/Image component)

Need Help with Your Site?

Send your questions or ask for assistance.

Contact Us


Need Help with Accessibility?

Send your questions or ask for assistance.

Contact Us

cq-text-component-placeholder

Latest Topics

cq-text-component-placeholder
cq-text-component-placeholder