DEV Community

Discussion on: My website now loads in less than 1 sec! Here's how I did it! ⚡

Collapse
 
zenull profile image
zenull • Edited

I absolutely cannot agree with point 10.

Images with exact dimensions (as rendered) look ugly when it comes to laptops and many mobile devices. Even Windows by default make laptop screen 15.6 inches / 1920x1080 all higher and (Recommended by Microsoft Windows) to 125%. So all the images on the web will be 25% zoomed and if the size is exactly as in page then it loses in quality while displaying. So you get less size but loose on quality of how your content looks.

From my experience, the images should be at least +25% larger (with dimensions set in "img" tag) while better to +50% so it looks good on mobile zooming. Better to compress images to 60% instead so the image still looks great and your UI is good on laptops and small screens.

If you never heard about this just go to your Windows (if you use it :) Display settings -> Scale and layout and set it to 125% then look on your exact size images.

Collapse
 
cmcodes profile image
C M Pandey

I was using small sized images so it didn't had much impact.

Collapse
 
zenull profile image
zenull

Yes, while using a normal monitor or without zooming everything looks well.
Even Pingdom Speed Test recommends using scaled images but I won't do it.
I would rather loose some milliseconds of loading speed than see that image quality.
Now and in the near future the speeds will increase so serve that image a little bigger and laptop users with small screen sizes will be grateful to you. :)

Thread Thread
 
cmcodes profile image
C M Pandey

Thanks for sharing this! 😊