Due to the fact that I understand that I prefer doing random adminstration stuff over actually writing content. I decided to test out a bunch of different methods of hosting images.
Control
My basic control is just loading images directly into my repository, and turning them into jpeg images if they were in a different format. I didn’t compress them. I just loaded them directly in. Since nothing was changed I’m letting Gatsby process them, and netlify post-process them.
Why?
If you look at the sum of the images just those four photos without any processing adds up to 12+ MBs. If you were to load these directly page load times would die. Gatsby, and netlify help with this a ton. Gatsby will do processing on the images, and Netlify if you enable it will also try to optimize your assets.
Even with the gatsby and netlify benefits I still don’t necessarily want to fill up my repository with images. Image processing also adds time to the netlify build times, as well as eats available bandwidth from my netlify plans.
If I wasn’t hosting on netlify. I would be even more inclined to move my photos off, because standard hosting isn’t geared specifically towards image optimization. For image hosting sites. That is pretty much what their bread and butter is.
Testing
My testing is pretty basic. I’m running it locally as well as running it through a website speed tester like https://gtmetrix.com/.
I like gmetrix, because it breaks down your page speeds based on the different elements of the page.
I’m using three different settings:
- Source - No changes just uploaded
- Resized 2048 - Resizing everything down to 2048. This isn’t actually required, because the current container size for the blog is about 1024 at max, but if I want to increase it as screens get larger this would be an option.
- Resized 1024 - This is the full width of my blog’s viewport.
Even though 2048 isn’t being used today. I wanted to see how it impacts loads. If it isn’t that great I might end up going with that for future screen sizes, and if larger screens wanted to take a look at images in new tabs.
Resized Details
Here are some of the details about the resized images that are being uploaded to each of the hosting sites.
Resizing the images down to drops the size by around 2/3.
Resizing down to 1024 without compression drops them even further.
Hosting Sites Results
Here is the results of each of the page loads, and how they functioned.
All the reports go from the largest images to the smallest images.
Netlify (Native)
Using Netlify’s hosting just to host the images. This is the standard way.
Test Results: https://gtmetrix.com/compare/mm4cjciA/rUhUMlQc/bILdZcY0
imgbb
Using imgbb.com to host images.
Test Results: https://gtmetrix.com/compare/ukCG4hc9/K26lFAZI/bNnQMsuj
imgbb With WEBP
I decided to do an additional test. I wanted to also run the webp files through the process as well. For the webp files I compressed them before testing and converted them.
Test Results: https://gtmetrix.com/compare/ukCG4hc9/K26lFAZI/bNnQMsuj/0dUHeB6L
gifyu
I hadn’t heard about gifyu before testing this stuff out, but from what I can tell it’s pretty much like imgbb, but with a few less features (can’t process HEIC files).
Test Results: https://gtmetrix.com/compare/pKjG9ZqL/SHrefVXd/Q1OHPqhh
Also one of things I noticed right off the bat is that that pages took significantly longer to actually test. At one point one of the tests actually failed.
I think I’m definitely skipping this one.
Postimages
Postimages has been my favorite for awhile, but based on testing. I might be looking to switch.
I have linked the report to the postimages tests.
Test Results: https://gtmetrix.com/compare/wqEik6oo/pTSYXrEU/ToIwBZJX
Google Photos
Using Google Photos to host your photos is also another option. One of the biggest benefits is that you can change the size of the image with the url so that it is different sizes, and you can make it so that you aren’t hosting a larger size image than you really need.
One of the cons of this approach is that to do this. You are using google photos in a way that it wasn’t designed. So there is the possibility of you breaking your image links at some point. However, I have been using it for a year on some tests, and I haven’t seen them break yet.
https://gtmetrix.com/compare/yRWlAXu9/3axYup94
Conclusion
I’m most likely going to be making the switch to imgbb along with loading smaller stuff into my repo with Netlify. It also looks like I’m most likely going to be switching to 2048 pixel images as well. That was an interesting result.
The google photos result are super interesting, but like I said above. It’s a little scary using google photos in a way it wasn’t intended.