No doubt you are all familiar with Google’s AMP Project and their FREE CDN cache…
I had an inspiration that creating an AMP web page and setting the path to the /assets/imgs/ folder would be able use Google’s CDN to cache all the images: 
Clicking on Google’s CDN Cached Version will render the CDN version.
Each rendered images URL could then be used on any site! Not only being faster to download but also saving your own bandwidth!
I have tested the web page using Pingdom and was amazed at the results - especially testing from Melbourne, Australia which is usually very slow.
Try copying any Google cached image location and use on your own site to see if it works. Also test the results using Pingdom and compare with your own image download times.
Source files:
file: index.php // to save to your images folder
<?php
declare (strict_types=1);
$title = 'John_Betong Testing Google CDN Cached Pages and Images';
$date = date('l, jS M Y - H:i:s');
# PATH TO THE IMAGES FOLDER
$pImg = 'assets/imgs/';
# THIS URL
$path = 'www.johns-jokes.com/downloads/sp-i/jb-google-cdn/index.php';
$cdn = 'https://cdn.ampproject.org/c/s/' .$path;
// BEWARE: REMOVE s/ for non HTTPS sites.
?><!DOCTYPE HTML>
<html amp lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title> <?= $title ?> </title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom> /*
http://www.testmycss.com/
https://www.sitepoint.com/five-css-performance-tools-speed-website/?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning
https://webkul.github.io/csspin/?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning
*/
/* https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f */
body{
font: 16px/1.42 Montserrat,BlinkMacSystemFont, -apple-system,
"Segoe UI",Roboto,Helvetica,Arial,sans-serif,
Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans",
"Helvetica Neue",Arial,sans-serif;
/* font-smooth:always;-webkit-font-smoothing:antialiased; */
border:0; margin:2px 4px; padding:0 0 .2em;
background-color: #f3f3f3; color: #fff;
}
h1,h2,h3,h4,h5,h6{
color:#000;
font-weight:400;
font-family:-apple-system,BlinkMacSystemFont,
"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans",
Inconsolata,"Helvetica Neue",Arial,sans-serif;}
a {text-decoration: none;}
.bd1 {border:solid 1px #888;} .bd0 {border:outset 3px #000;}
.bgy {background-color: #ffd; color:#333;}
.btn {background-color: lime; color:#000; padding: 0.21em 0.42em;}
.dib {display: inline-block;}
.fg3 {color:#333;}
.fsl {font-size:large}
.fwb {font-weight: 700;}
.mx4 {width:42%;}
.mga {margin:0 auto;}
.ooo {margin:0; padding:0;}
.p42 {padding: 0.42em;}
.tac {text-align:center;}
.w88 {width:88%; max-width:888px;}
</style>
</head>
<body>
<h1>Eureka now using Google CDN Cached Web Pages </h1>
<h2> <?= $title ?> </h2>
<h3 class="tac">
<strong class="btn bd0">
<a href="<?= $cdn ?>">
Google's CDN Cached Version
</a>
</strong>
</h3>
<h4 class="tac"> Date rendered: <?= $date ?> </h4>
<hr>
<?php
include 'glob-imgs.php';
?>
</body>
</html>
file: glog-imgs.php // to be saved in images folder
<?php
declare (strict_types=1);
//=============================================
function getImage($img, $layout='responsive', $dims=NULL) // fixed
{
# assets/linux-bg/160218-deux-two_by_Pierre_Cante.jpg
$tmp = getimagesize( $pImg .$img);
if($dims):
// image specific
else:
$dims = $tmp['3'];
endif;
$fSize = number_format( (float) filesize( $img ) );
$tmp = <<< ____TMP
<figure class="w88 mga mx4 bd1 bgy p42">
<figcaption class="fss tal">
<amp-img <br>
src="$img" <br>
$dims <br>
File size: $fSize bytes<br>
layout="$layout" <br>
alt="an image"></amp-img>
</figcaption>
<amp-img
src="$img"
$dims
layout="$layout"
alt="$img"></amp-img>
</figure>
<div class="tac fwb fsl fg3">
¯\_(ツ)_/¯
<br><br>
</div>
____TMP;
return $tmp;
}
# GET ALL FILENAMES IN DIRECTORY
$imgs = glob('assets/imgs/*.*');
foreach($imgs as $img):
if( strpos($img, '.php') ):
// EXCLUDE PHP and PNG files
else:
echo getImage($img);
endif;
endforeach;
Live Version - notice the displayed time difference
Edit:
Added warning about removing s/ in the $cdn for non HTTPS sites.