Display external images as miniatures without import full size-CodePudding

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

CodePudding user response：

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.