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.
11
-
2If you dont mind the manual step, you can just use this: tiny-img.comMauriceNino– MauriceNino2022-07-04 08:54:09 +00:00Commented Jul 4, 2022 at 8:54
-
2Cannot resize what you have not loaded, so unless you're planning to resize on the backend, the answer is no.Robby Cornelissen– Robby Cornelissen2022-07-04 08:55:29 +00:00Commented Jul 4, 2022 at 8:55
-
1Or use something like sharp to do it programmatically.MauriceNino– MauriceNino2022-07-04 08:55:31 +00:00Commented Jul 4, 2022 at 8:55
-
1Is there a way to upload only every 16th pixel only from a file? That would function as resizing.user3151675– user31516752022-07-04 09:17:19 +00:00Commented Jul 4, 2022 at 9:17
-
1Well, your frontend JavaScript will not be able to resize the image to reduce load. If you do not run NodeJS in your backend, then the question should probably be asked with another tag.MauriceNino– MauriceNino2022-07-04 09:32:25 +00:00Commented Jul 4, 2022 at 9:32
|
Show 6 more comments
1 Answer
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">
3 Comments
Amr Khaled
it keeps creating new images every time I click on the
load image button
hugomztl
thats the purpose of the snippet above, its just an exemple, try use
loading = 'lazy' in your code
Cymro
Simple way: github.com/Kembreg1405/imgnary