Pictures loading very slowly on webpage

Question

I'm wondering what the best practice is for loading high-resolution images on a webpage. Currently I'm loading a bunch of images locally and the website is running super slowly. Here's an example:

https://shmoss.github.io/Gibbs-Lab/research.html

And here's how I'm actually loading the image:

            <!-- Card image -->
            <div class="view overlay">
              <img class="card-img-top" src="img/Forest-Conservation-and-Biodiversity.png" alt="Card image cap">
              <a>
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

I read that images should be loaded locally, rather than hosted somewhere like on Box, Google, etc. What can I try next?

Answer 1

This is a bit of a "highly opinionated question", since many people will have different answers based on when they last looked at "standards", but here's some fairly recent guidance to work from. It's guidance, not rules, so feel free to make some judgement calls with it.

What is the best image size for websites?
The size of your images varies depending on where you want them on your website. The optimal file size for images on a website is no more than 200 KB, and for full-screen background images, between 1500 pixels to 2500 pixels wide, and for most other images a max-width of 800 pixels. Keeping images between these perimeters will ensure they load properly on computers and mobile screens.

https://northwestmediacollective.com/blog/best-image-size-for-websites/

There's other guidelines out there, this is just the first one I found that seems reasonable.

To display larger images, you should make the small "thumbnail" images clickable, which would then open either another tab to view the image, navigate to the image, or display a modal/div/something to display the image over top of your page. This allows people to select which images to see and download. This frees up bandwidth for just the one pic they are looking at, instead of "all of everything at once".

In your case, you aren't displaying a gallery, just header images to some text, so your images don't need to be anywhere near as big. The resolution you are displaying at is far lower than the image, so most of that detail is completely lost. There's really no point in having 3.5 mb, 3600 x 2400 px images when you are displaying them at 243 x 162 px. Resizing the page, it grows to 351 x 234 px, which is still wasting resolution, meaning you can greatly reduce your resolution and still get the same look on the client's machine.

A JPG file loses data, anyway, so if you want to keep detail at a lower resolution, you can try using a PNG. This is also a bit of a "highly opinionated" subject, so I'll just leave the link below and let you decide.

What is the difference between JPEG and PNG files?
Despite their similarities and widespread use, there are many differences between JPEG and PNG files. Because of their different compression processes, JPEGs contain less data than PNGs — and therefore, are usually smaller in size. Unlike JPEGs, PNGs support transparent backgrounds, making them preferred for graphic design.

https://www.adobe.com/creativecloud/file-types/image/comparison/jpeg-vs-png.html

To add some context to resolution and file size changes, if you reduce the resolution by 2, you are reducing the file size to approximately 1/4 of the original size. A 3.5 mb file becomes ~875 kb. Do it again and it's ~220 kb. Your 3600 x 2400 px image becomes 900 x 600 px, which is still plenty oversized for what's displayed. And at today's internet speeds, 220 kb will load really quickly even on mobile devices on "slow" cell networks.

For more context, 1080p resolution is often 1920 x 1080 px (depending on width), so even at 900 x 600 px, your image is a quarter the area of the screen. A 4k screen is 3840 x 2160 px (depending on width), so it's still about 1/15 the total screen size, which is still larger than what most people are doing to display it. (I should know, I'm using a 4k 49" TV as a monitor.)

Your current image has more pixels than a 4k screen can display, even though it's a different aspect ratio. All of that extra data is wasted.

And, speaking as a software developer who has done a lot of web dev, your images being on the same server as your website is very standard. About the only time you need to bother with a 2nd server is when you have massive amounts of images, which you don't have. I'm talking thousands, tens of thousands, or more images and you need a way to manage their organization or to offload/load balance the traffic. Using a 2nd server, Google Drive, OneDrive, Dropbox, or whatever just adds another layer of complexity that you don't need.

Edit:

There are lots of other file formats around that offer a variety of lossy or lossless compression, and some are "better" than others. This answer originally promoted JPG and PNG, which have been the internet standards for years. I'd like to introduce a less well-known format that's been up and coming for a while, but I'd guess most people still don't know about it: webp.

https://developers.google.com/speed/webp

It's typically a smaller file for the same image quality and is also compatible with a variety of different browsers, but it isn't as widely used or built into as much software as the current standards. It seems to potentially be a future standard, but it's not quite there yet. I just recently learned about it, and I've been a software developer for web apps for nearly 12 years, and have been on the internet since the mid 90s.

Image converters and editors should be able to produce webp files without any extra steps.

There are plenty of other image formats out there that have good reasons for specific uses, I'm just explaining the most common ones we are likely to easily use.