If a front-end web page is loading slowly, especially in comparison with other pages or websites, then it is highly likely that one or more of your images is too large.

Image Size Basics

Images will have dimensions, generally delineated as "width x height." They will also have a resolution which refers to the detail available in an image. 

Traditionally, screens have called for 72 dpi whereas print resolution has been considered 300dpi. The higher the DPI, the larger the file size.  

>> Learn More about Image Size Basics from Adobe

Large File Size = Slower Page Loading

The larger the file size, the slower a page will load. If your internet speed is fast, you might not notice any lag. Your browser could place the image into your cache, masking an underlying problem.

Find Large Images

Chrome has something called "Developer Tools" built into the app. A free resource, Developer Tools might seem (or even look) super technical, but I promise it's not too intense if you follow the instructions step by step.

1. Anywhere on the page, right click to open up this options panel. From there, click "Inspect."

2. Developer Tools will open up. Don't pay attention to the HTML code. Just look for "Sources" and click on it.

3. Within Sources, you should feel relatively at home since it looks a lot like Windows Explorer or Mac's Finder.  Click through the folders to find images that are used on the page.  The bottom of the window will show file size and the dimensions of your images. Images over a few hundred kilobytes are probably too large. Images over one megabyte are almost always too large.

4. To reduce the size of your images, you might want to review this article: Best Practices for Sizing Images for the Web

Did this answer your question?