Issues with Images- Resolving once for all

Introduction

In this post, I will talk about the issues I faced so far, with the loading of images on this site. Let us also take a look at what is being done to resolve it in production. At the issue of missing images and 404s for image URLs has plagues me for a long time. It is time to plug that gap once and for all.

Background

Ever since I moved this blog in May 2019 from Bludit to WordPress, this site has been plagued by the issues of images not loading properly. Some of the typical issues are:

• Images do not load at all
• Part of a set of images load

What causes these errors?

The reason for this is mainly because of my ignorance. Sometimes I experiment with different CDNs, too much. At other instances, I restore website from WordPress backup. (Either using All in One WordPress plugin or Updraft plus).  Almost every time I have used All in One WP, some images have taken a hit.  Next was changing the CNAME settings for different Content Delivery Networks (CDN) and finally, using WordPress plugins (Gumlet and Bunny CDN).

Resolving these problems

In order to fix these issues, I followed the following approaches: a. Reading up on how to sideload images on WordPress and integrate them into the database. This can be done via a plugin or using wp-cli. b. I tested the use of an external plugin for feature image. A plugin called FIFU has found my liking, which allows me to server the feature image from Gumlet or BunnyCDN or Backblaze b2. (The feature image for this post uses FIFU and Backblaze). There may be other similar plugins, and at present the free version of FIFU serves my needs. c. Finally, using content delivery networks, or CDN, the way they are supposed to work. We will delve a little bit on this matter. I have written about CDNs several times, and have finally settled on two primary sources: BunnyCDN and Gumlet. I had used other CDNs in the past, some like Fast.io have closed shop. Others like Shift8 CDN I not longer use. This obviously had an effect on user experience had an effect on the overall webpage design. But most importantly probably SEO because of broken links etc. I have nearly 300 posts published on this blog, and another 100 odd planned before the year ends. Therefore, maintaining a dual CDN structure would be my preference. Two folders storage zone in BunnyCDN and a web folder) will have identical setup of images, that way in case one CDN or server goes down I can quickly do a “find/replace” in WordPress and move over to the backup CDN. Remember,  WordPress does make multiple copies of every image that loads. So, if I’m not going to use the images from WordPress Media folder, it makes sense to use a different image hosting system. The other advantage I get from a script or URL based image service like Gumlet is that all feature images will follow similar dimension. That is not the case at present. Shortpixel adaptive images is another solid option to consider- but not at this time.

Hoping for the best but preparing for the worst

Let us hope that this will solve the issue of images once and for all. But I will continue monitoring this issue in the times to come.