I have an image with a size of around 12MB and it takes time to get loaded. Is there any way to reduce the size of the image to make it load faster? Thanks
New Update: I want to reduce the image size as it gets loaded from an input type file.
I would suggest you to load images using Image() js method so the remaning content of the page load properly, and use loading = 'lazy' property on the images to make the browser load them only when they are visible in the viewport or when you scroll near to them.
function loadImg(){
var img = new Image(400, 400);
img.src = 'https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png';
img.setAttribute("loading", "lazy")
document.body.appendChild(img);
}#btn{
position: fixed;
top: 5px
}<input type="button" onclick="loadImg()" value="Load image" id="btn">