What is best in a website, use an image url or download the image?

I am trying to optimise my website so that I can spend less money on database, specifically images. I use Supabase as my DB and storage.

Right now I directly use the URL of the images in the storage, but I am not sure if it would be better to download the images and then display them, as they will be in the caché, while in the URL case they won’t, right? (To be clear, there are two separate supabase functions for this, one for getting url and one for downloading).

I have noticed that, when using the URL, the first render is much slower and subsequent renders are way faster, but I am unable to find the images in my caché, that’s why I was wondering which option was better.

Are there any best pratices on this topic?

Thanks!!

>Solution :

There are a few factors to consider when deciding whether to use an image URL or to download an image for use on a website:

1. File size: If the image is large, it may be better to use an image URL that points to a hosted version of the image.

2. Bandwidth: If your website receives a lot of traffic, using image URLs can reduce the strain on your server’s bandwidth, as the images are being served from a separate location.

3. Maintenance: If you download an image and use it on your website, you’ll need to maintain a copy of the image on your server. If you decide to change the image, you’ll need to update it on your server as well.

4. Ownership and copyright: Make sure you have the right to use the image.

In general, using image URLs can be a convenient and efficient way to include images on your website, as long as you consider the factors above and ensure that you have the necessary rights to use the images.

As for rendering,

it’s normal for the first render of a webpage to be slower than subsequent renders, especially if the page includes a large number of images or other resources that need to be downloaded. This is because the browser has to download and process all of these resources before it can display the page.

If you’re using image URLs on your website, the images may not be stored in your cache because they are being served from a separate location. However, the browser may still cache the images to speed up subsequent page loads. This means that while the images may not be stored in your cache, they will still be loaded faster on subsequent page loads because they are being served from the browser’s cache instead of being downloaded again from the server.

If you want to make sure that your images are being cached and served from the cache on subsequent page loads, you can use caching headers or a cache-control policy to instruct the browser to cache the images for a certain amount of time. This will help to improve the performance of your website by reducing the number of requests that the browser has to make to the server to download resources.