How to load an image from Wiki Commons fast?

There is an image weighting 10 MB hosted on Wiki Commons which I load via its URL.

#element {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/example.jpg');
}

I don’t want to download the image, compress it and then upload the image to be a local one, rather, I want to load it from Wiki Commons directly, just a bit faster. What is good to try?

How best to do pre-fetching perhaps?

Why do all of your threads include the phrase “I dont want to do [the correct answer]” ?

Like, even they say, on their own website that “In general, it is recommended to download files for reuse.”

There’s not going to be a “go faster” button here. You’ve got a 10 MB image you’re asking the user’s browser to pull from a remote server. The speed of that load is directly related to the user’s connection to that server and ability to pull down the 10 MB file.

4 Likes

I don’t think that all of my questions are like this :slight_smile:
I often like to try to try to find out if there is any third party tool worth utilizing that I have missed.
Someone in the Drupal community talked about “pre-fetching” the Wiki Commons image but I didn’t understand what he meant.

You could help us to help you. A 10 second search returns: https://tutorialspage.com/prefetching-links-and-images-with-html5/

In that article there is a section called “What is prefetching, and why it is useful”

Why not do a little research, have a crack at implementing what they suggest and then come back if you run into a concrete problem.

3 Likes

Earlier I ran in Google “prefetching files” (or something like that) but I didn’t find anything clearly associated.

My mistake !

The article you have linked to is helpful and explained the term well.
I wish I could do it directly from CSS without editing the <head> html tag !

Thanks