1

I am working on a project in which I render over 4,000 photos to a web page. The photo sources are online links, so I cannot resize them myself locally as I don't have them saved to my computer.

Each photo is about 800px x 800px, but the image objects I'm creating only need to be 200px x 200px. The loading time for the page is pretty slow, especially on mobile, and I'm hoping resizing the photo after sourcing them but before rendering them will speed up the load time.

Is it possible to: (1) source an image from a link then (2) resize / compress the photo before (3) rendering the photo in an image object on the webpage?

All without needing to touch the original photos as they are on the web and without needing to download directly to my computer?

Oliver G
  • 1,021
  • 2
  • 9
  • 20
  • Maybe it's help for you - https://stackoverflow.com/questions/43809120/resizing-a-image-with-javascript-without-rendering-a-canvas-on-the-dom – Konstantin Baklaev Aug 24 '19 at 19:04

1 Answers1

0

I think the load time will actually increase because first you have to fetch the full image from the remote source and then you also have to crop it! You definitely need to load already compressed images!

santamanno
  • 626
  • 4
  • 12