banner
冷板凳

冷板凳

探索笔记和效率工具 🚀
twitter
telegram

Say goodbye to high costs: Obsidian upgrade free image hosting Cloudflare R2 complete strategy

As the click-through rate of blog articles increases, the use of paid image hosting services is becoming increasingly unsustainable. The high storage costs and bandwidth consumption have deterred many people, making the search for free or low-cost image hosting alternatives an urgent need.

image

What is an Image Hosting Service?#

Many people are confused about why they need to go through the trouble of setting up an image hosting service and what it is used for.

Take Obsidian as an example. It is a text editor, and when you insert an image in your article, it is stored locally as a link in the attachments. If you are writing an article just for yourself and not posting it on any online platforms, then you don't need an image hosting service, and there's no need to read further.

However, if you need to publish your article on online platforms such as WeChat Official Accounts and Zhihu, then when you copy the article to each publishing platform, the images in the article that have not been uploaded to an image hosting service will be lost. In this case, you can manually upload the local images in the background and reinsert them into the article.

But if you have many images and need to consider their placement in the content, how many steps would you need to take?

First, rename all the images in the order they appear in the article, then upload them in batches to the backend, and manually insert them before or after each paragraph in the article.

Sometimes, if you accidentally place them in the wrong position, you have to start over, which can be quite annoying.

With an image hosting service, all these problems are solved.

In Obsidian, after arranging the article, you can upload the images to the image hosting service with just one click, and the local links will be replaced with external links. When you return, the images will be automatically replaced with the external links.

There are two common scenarios for using online images in regular article illustrations. Usually, some self-built blog platforms do not convert the images into other formats or links. They only render the articles, and the images are still hosted on the image hosting server. When the images stored on the server are deleted, the illustrations in the blog articles will be lost.

Therefore, it is not recommended to use unreliable free third-party image hosting services. Once they shut down their servers, all the illustrations in your articles that use their image hosting service will be lost.

The other scenario is when you copy the article to various platforms, such as WeChat Official Accounts and Zhihu. They will automatically convert the online images into their own server images, which is equivalent to a batch upload and replacement operation.

This is done to protect the copyright and security of original content and to apply appropriate security identification to the images, such as anti-leeching measures.

When you copy a WeChat Official Account article for other purposes, the illustrations in the article will be lost, and a prompt will appear: "This image is from WeChat Official Accounts and cannot be quoted without permission."

On the other hand, if you directly render and reference images from your own server, when the server is shut down or images are accidentally deleted, the illustrations in the article will be lost.

In other words, once the article images copied from Obsidian are published on a platform, the image links have already been converted from your own cloud server to the respective platform's server.

This approach has its pros and cons. The advantage is that if you use a paid image hosting service, you don't have to worry about being charged based on the number of visits. As long as the platform doesn't go down, the images won't be lost. The downside is that it restricts your freedom. The images converted to the platform are essentially watermarked and cannot be used elsewhere.

If you publish an article on WeChat Official Accounts by uploading the images locally, when you publish the same article on Zhihu, you will need to upload the images again. Each platform has its own image storage and management system, and they do not share or automatically synchronize images.

The value of an image hosting service lies in its ability to allow you to reference images through an external link, enabling you to reuse the same set of images on multiple platforms, avoiding the hassle of repeated uploads.

image

About Paid Image Hosting Services#

Therefore, it is necessary to find a reliable image storage service to prevent the loss of images in blog articles or other self-built platforms due to server failures.

I have been using Tencent Cloud Object Storage (COS) in conjunction with the open-source image upload tool PicList, which is based on PicGo but with additional features. It not only retains all the functions of PicGo but also adds many new features, such as album support and synchronized cloud file deletion.

In the past, if you wanted to delete an image that had been uploaded to a storage bucket, you had to manually delete it in the cloud service backend. With PicList, you can directly delete it in the tool's album, and the deletion will be synchronized to the cloud. This feature is very useful for those who don't like image redundancy.

image

In summary, an image hosting service is a service that allows you to efficiently publish articles with images to multiple platforms without having to manually upload each image.

As your blog's readership increases, the pressure on paid image hosting services also increases.

Tencent Cloud Object Storage charges for its services, and it's not easy for ordinary people to understand. In short, you have to pay to upload, and others have to pay to browse and download.

From this year's bill, we can see that as the readership of articles increases, the cost of image hosting also increases.

I don't actually have many images in my articles, usually three to five, but even so, the cost has increased from 10 yuan to 30 yuan per month.

In other words, you have to pay to share your articles with others.

image

So, are there any free and reliable image hosting object storage services available?

Cloudflare, known as the "Internet Cyber Bodhisattva," is not just a name. Among them, R2 is a completely sufficient free image hosting service for personal use.

image

Suppose you upload an image that is 1MB in size. With Cloudflare R2, you can upload ten thousand images for free each month, and the download and access by others are almost free.

I have now set up Cloudflare R2 as my default image hosting service, and although it took some time to learn during the configuration, the transition from paid to free has been smooth.

Setting Up Cloudflare R2#

I originally wanted to write a setup process myself, but I found that other bloggers have already written very detailed instructions, and I followed the tutorials step by step without encountering any obstacles. Therefore, I won't go into the specific setup process here. For beginners, please refer to the reference links at the bottom of the article.

Although the setup and configuration process is simple, I did encounter some minor issues. If you encounter similar problems, you can try the following solutions.

Images can be uploaded but not displayed correctly#

When creating Cloudflare R2, you can enter the subdomain, and as long as it is a domain purchased from Cloudflare, it will automatically associate with the CHAME target. In other words, when configuring the R2 custom domain, you only need to enter the corresponding subdomain, and Cloudflare will automatically create the CHAME and associate it with R2.

In other tutorials, custom domains are often created first and then associated.

image

I encountered the first hurdle when Cloudflare R2 and Piclist were configured correctly, and the images could be uploaded correctly but not displayed correctly. The links in the uploaded images in Cloudflare R2's backend were different from the local links.

I found that the / in the custom domain in the Piclist configuration needed to be changed from https://img.lenband.com to https://img.lenband.com/my-img.

Where did "my-img" come from? It is the name of the storage bucket created when setting up R2.

image

image

Tinypng Image Compression Plugin#

After correctly configuring the image hosting service, I also installed a Tinypng plugin, which can compress the size of images while maintaining their clarity. It works by calling the Tinypng API online to compress the uploaded images.

After enabling this plugin, there was a noticeable delay when uploading images. It was fine if it was a bit slow, but today when I uploaded a GIF of about 4MB, it gave an error. So I disabled this plugin.

Because I found another image optimization solution.

WebP Cloud Intelligent Image Optimization Proxy Service#

WebP Cloud can significantly reduce the size of images without significantly affecting their quality, speeding up the overall loading speed of the website, and has intelligent proxy caching capabilities.

Similar to call forwarding, when you call Cloudflare R2, WebP Cloud acts as an intermediary and optimizes the images during the transfer.

Upload Image → Cloudflare R2 → WebP Cloud Optimizes Image → Obtain Image

The setup is simple. Enter the Cloudflare R2 custom domain, for example: https://img.lenband.com/my-img, into WebP Cloud, and enter the proxy link obtained from WebP Cloud into the Piclist configuration.

Free users have a daily quota of 2000, which means they can proxy 2000 image access requests and provide 100MB of image cache. This is sufficient for personal blog use.

image

When I uploaded this article and found a problem, when I used the WebP Cloud proxy link, the blog platform supported it perfectly. However, when I copied it to WeChat Official Accounts and Zhihu in China, the images were lost. Zhihu gave a direct error.

image

So I changed the configuration back to the Cloudflare R2 custom domain, without using the WebP Cloud image optimization. WeChat Official Accounts can recognize it, but Zhihu still cannot.

Solution: After publishing the article on WeChat Official Accounts, use the Chrome extension "Sync Assistant" → Zhihu.

Some may ask why I went through all this trouble. Because I don't have money.

Cloudflare has many free projects, such as free blog hosting, R2 image storage service, domain redirection, free DNS service, email routing service, and free protection against DDoS attacks. This is why it is known as the Cyber Bodhisattva.

Cloudflare R2 + WebP Cloud + PicGo
https://www.pseudoyu.com/en/2024/06/30/free_image_hosting_system_using_r2_webp_cloud_and_picgo/

Building a Personal Image Hosting Service with Cloudflare R2
https://www.lihuanyu.com/en/2024/06/30/cloudflare-r2/

Using Cloudflare R2 to Build a Blog Image Hosting Service
https://ysicing.me/cloudflare-r2

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.