Display external images as miniatures without import full size

Question

In my website (news aggregator) i am displaying articles boxes with title and image miniature linking to an external article.

<a href="website/article.html" target="_blank">
    <div id="art000002">
        <h1>Article Title</h1>
        <img src="website/images/image.jpg" width="100px" height="70px">
    </div>
</a>

For each article i am displaying a miniature to the og:image of the related external article. When doing a performance test on my website load, it reveals that some pic are 2 or 3 mb size and since my site display a list of let's say 50 articles it went huge. My question is : since my users don't need the full image , is there a way to display the og:image as miniature without importing the full thing size ?

Thanks

The short answer is no. At least not if these articles/images are always pulled *on-the-fly*. To actually reduce the image file-size, the image would first need to be pulled and the converted (to a lower size/resolution, or different format), then saved. You would use that new version on your site. Things like this can be done with backend languages like PHP, but with HTML/CSS/JS you can't really reduce the filesize since those languages have to pull the original first (every time). — EssXTee, Jan 03 '22 at 14:19
can you give me a example image link, for some sites there's bit of trick — Anuja Nimesh, Jan 03 '22 at 14:34
@AnujaNimesh any news articles, like nytimes,; bbc, etc. for example in my test this article https://www.europe1.fr/sante/quest-ce-que-le-massage-sonore-4084838 OG:Image is 650kb https://cdn-europe1.lanmedia.fr/var/europe1/storage/images/europe1/sante/quest-ce-que-le-massage-sonore-4084838/58019071-1-fre-FR/Qu-est-ce-que-le-massage-sonore.jpg while i only need the thumbnail — Stalkium, Jan 03 '22 at 14:41
@Stalkium Sorry mate isn't applicable here. I have to redirect you tub the above comment — Anuja Nimesh, Jan 03 '22 at 14:46
@EssXTee so the script will import the big pic once convert it then the users will query only the thumbnail ? Or will it import the original each user request , in this case better to keep the direct link and display it as thumbnail ... also post this as an answer so i can accept — Stalkium, Jan 03 '22 at 15:14

score 1 · Accepted Answer · answered Jan 03 '22 at 20:08

I'm posting as an answer as requested by OP.

Basically, because the images are external, you can't really control file properties like dimensions, quality, or file size using client-side (frontend) languages such as HTML/CSS/JS.

Option 1: Generate Thumbnails on Your Server

So if you want to reduce something like the file size of one of these external images, your best bet is likely to have some sort of back-end script set up to pull the images in advance. A back-end script (using something like PHP) could pull the images and re-save them on your server, reducing the dimensions, quality, or file format in the process to help reduce the file size.

Then on your aggregated article page, you would use the thumbnail images you generated, rather than the direct images from the external sources.

However, it should be noted this means you need to run this back-end script before users try to load any images/thumbnails, because having it run when they request a page/article/image still means the entire file has to be downloaded before being converted.

Option 2: Lazy load the images

This won't truly reduce the page load, but lazy loading the images can speed up the critical parts of a page loading, only loading those large image files after everything else has loaded.

<img src="article_full_size_image.png" loading="lazy" alt="Article Thumbnail Title" />

That gives you a basic lazy loading image, which can help make the page appear to load faster, though the actual external article images will still take the same amount of time to load. The browser will just wait and load them last.

I will go for the first one, of course the script must resize the image when the article is uploaded and put the thumbnail in the images/directory where it's linked to, , some reading here https://stackoverflow.com/questions/14649645/resize-image-in-php thanks — Stalkium, Jan 03 '22 at 22:56

Display external images as miniatures without import full size

1 Answers1