A Good Solution for Blog Images

Keywords: blog, image solution, image hosting, ffmpeg, alt

Today while writing the article “Wangjing and Wangjing Park”, I was thinking again about how I should handle the image issue. I have talked many times before about how the articles and images for my blog are stored in a private GitLab repository. The reason the original images are also stored in the private repository is that I don’t want to experience another image hosting migration like I did with my archived blog from before.

However, with the increasing number of images stored in the private repository, I have to face a problem - the size of the repository will become very large (code repositories aren’t meant for file storage in the first place, specialized tools should be used for specialized tasks). I have also tried various combination of solutions before to reduce the storage footprint of the images, which helps resolve some of the issues, but then new problems arise, such as where I should manage the higher quality original images after compression. I don’t want to discard them but keeping them takes up a lot of space.

Before writing this document, my entire image workflow was as follows:

• Import images taken with my camera to my MacBook Pro using the memory card
• Send images from my computer to my phone using AirDrop or LocalSend
  
• Use a shortcut on my phone to add a watermark to the images

• Send the images back to my computer using AirDrop or LocalSend
• Use the ffmpeg tool on my computer to batch compress the images into a same-resolution “small” version, and also a “thumbnail” version at half the original resolution
• Rename the small images based on their content
• Copy them to the blog directory and reference them in blog posts

This process is very similar to a manufacturing process for a part, where there can be multiple techniques to make the same part, but a better, more sensible technique will minimize the material and time costs to produce the part, maximizing the profit margin of the company. Similarly for personal life, everyone’s time is limited, and optimizing solutions to problems to reduce the processing time (even better if it also reduces monetary costs) will free up more time for rest or creating other value.

Looking now, there are still many areas this workflow can be improved:

• Is it necessary to import to the phone to add a watermark using a shortcut (can directly use a Mac shortcut, same effect)
• Is it necessary to use a shortcut to add a watermark, can rewrite the same rules using ffmpeg (running a script is more convenient than manual operations)
• Is the thumbnail version more appropriate (half resolution doesn’t affect viewing, but half size is significant)
  
• Can the small images be uploaded to an image hosting service using a script, generating filename-to-URL mappings, and storing the image hosting URLs in some attribute of the corresponding thumbnails (show small images to reduce bandwidth but retain access to original resolution)

Based on these potential workflow improvements, we can completely implement the previously laborious and manual steps in one script.

After scripting the process, our complete workflow becomes:

• Import images to computer
• Rename
• Run processing script (detailed steps explained below)
• Write blog post, copy image URLs to appropriate locations

The script needs to:

• Add watermark to original images (reimplement original shortcut logic)
• Compress images to small, process small to thumbnail
• Upload small files to image hosting, generate filename-to-URL mapping
  
• Copy thumbnails to storage location, generate URLs for blog use, add mapping from previous step
• Add alt descriptions for SEO

This reduces a previously hour-long task to minutes.