Images

The way New Sites (and Docs, sheets, slides, etc) works is that when you upload an image to your site/document, google stores the image bytes and generates googleusercontent urls to serve them at request time.

The reason it is done this way is to ensure that the image is always available. If your image was being loaded from some external source every time, that image may some day no longer be available and your site would have a broken image.

If you wish to ensure the image is embedded dynamically, the best option is to use a code embed to define your own <img> tag.

e.g. The image below left is embedded using the following embedded code:

<img src="https://www.wpc.ncep.noaa.gov/sfc/radsfcus_exp_new.gif" width= 100%;

height= auto/>

The image below right was added using 'insert by url'.

The image on the left will always refer to the image at the given URL, ie. https://www.wpc.ncep.noaa.gov/sfc/radsfcus_exp_new.gif

whereas the image on the right is a snapshot taken at the time the image was inserted.

For a comprehensive code embed, see the Dynamic Image HTML Embed Code generator provided by Steegle

Using simple embed code

Embed by URL

Embed code generated by Steegle's code generator:

<!DOCTYPE html><html> <head> <style>body{background-color:transparent;margin:0;padding:0;text-align:center;}img{height:97vh;margin:0vh auto;}</style> </head> <body> <a href="https://www.wpc.ncep.noaa.gov/sfc/radsfcus_exp_new.gif" > <img src="https://www.wpc.ncep.noaa.gov/sfc/radsfcus_exp_new.gif" id="image"/> </a> <script>var image=document.getElementById("image"); image.addEventListener('load', function(){this.style.maxWidth=this.naturalWidth.toString() + "px"; this.style.maxHeight=this.naturalHeight.toString() + "px";}); </script> </body><html>