How do you adapt an oversized image for the web?
Use a width closer to the real display size and keep proportions to get an image that is better suited for the web.
Explanation
An image that is too large for the web creates two problems: it slows down page loading and uses more data than necessary.
The first step is to check the real display size. If your website displays the image at about 900 px wide, there is no need to keep a 4000 px wide photo. You can resize it to a width closer to the actual use, for example 1200 px to keep some quality margin.
You should also keep the aspect ratio to avoid stretching or squashing the image. Once the right dimensions are chosen, you can then optimize the format: JPG for a standard photo, PNG if you need transparency, WebP for a good balance between quality and file size.
The right workflow is: choose the useful size, resize with the aspect ratio locked, then compress or convert if the file is still too heavy.
Concrete example
A 4032 × 3024 px photo can be adapted for the web as 1200 × 900 px. It will remain clear in an article while loading faster.
Common mistake
Do not start by compressing a huge image without resizing it. An oversized image can remain unnecessarily heavy even after compression.
This content follows Outilo's editorial guidelines.
