Speed up web page by compressing large images
<p>I have a blog slideshow on my web page which accesses images from a given url.</p>

<p>The problem is, people add images with massive resolution (3000px*6000px), which noticeably slows down the animation of the slideshow.</p>

<p>These high resolution images are necessary, but not for this particular purpose, since the images live inside a div of size (300*600)</p>

<p>Is there any way CSS (or some other way) can convert the image to a smaller specified resolution (say 300px * 600px), before scaling down.</p>

<p>This way the animation won't involve high res image frames and so it won't be as laggy.</p>

<p>The only alternative I can think of, is that everytime an image is uploaded on the database, the backend creates a secondary compressed image for this purpose.</p>

<p>However, this seems like a lot of effort.</p>