Images usually make up the largest share of a web page's weight. A beautiful site can still feel slow if its hero image is a 6 MB photo straight from a camera. Since page speed affects user experience, conversion rates and search rankings, optimising images is one of the highest-impact improvements you can make — and it does not require any coding skills.
Why image optimisation matters
- Speed. Smaller images download faster, especially on mobile networks.
- Search. Google uses page experience signals, including Core Web Vitals such as Largest Contentful Paint (LCP), which is often an image.
- Cost. Lighter pages use less bandwidth for you and less mobile data for visitors.
- Engagement. Visitors are more likely to stay and explore when pages appear quickly.
Step 1: Choose the right format
Use WebP for most website images: it is supported by all modern browsers and is typically much smaller than JPG or PNG. Use PNG or SVG for logos and icons with sharp edges, and JPG when a platform does not accept WebP. Our article JPG vs PNG vs WebP explains the differences in detail, and the image converter switches formats in seconds.
Step 2: Resize to the size you actually display
This is the step most people skip, and it often saves the most. If your blog's content column is 800 pixels wide, uploading a 4,000-pixel photo wastes about 95% of the pixels. A good rule of thumb is to upload images at roughly twice the largest size they display at, to stay sharp on high-density (“retina”) screens:
| Image use | Suggested width |
|---|---|
| Full-width hero/banner | 1600–2400 px |
| Image inside an article | 1200–1600 px |
| Product photo | 1000–1500 px |
| Thumbnail or card | 400–600 px |
| Logo (raster) | 2× its display size |
Use Resize Image to batch-resize a whole folder with the aspect ratio locked.
Step 3: Compress
Compression removes detail you will not notice. For photos, a quality setting of 70–80% usually looks identical to the original on screen while cutting the size by more than half. Run your images through Compress Image; you can even set a maximum width there to resize and compress in one step. Aim for under 200 KB for most content images and under 400 KB for large hero images.
Step 4: Crop with purpose
Cropping is not just about looks. Removing empty sky or background reduces the pixel count and focuses attention. Consistent aspect ratios — for example, all product photos square — also make your layout tidier. Use Crop Image with presets such as 1:1 or 16:9.
Step 5: Help the browser in your HTML
A few small attributes make a big difference:
- Always set width and height on
<img>tags so the browser reserves space and the layout does not jump (this improves Cumulative Layout Shift). - Add
loading="lazy"to images below the fold so they load only when needed. Do not lazy-load the main hero image. - Use
srcsetto offer several sizes, letting phones download smaller files than desktops. - Write descriptive
alttext. It helps visually impaired visitors and tells search engines what the image shows.
Step 6: Name files sensibly
A file called blue-ceramic-coffee-mug.webp tells search engines far more than IMG_4821.jpg. Use lowercase words separated by hyphens that describe the image.
A 5-minute workflow
- Crop the image to the shape you need.
- Resize it to about twice its display width.
- Compress it to WebP at around 75% quality.
- Rename it descriptively and upload it.
- Add width, height, alt text and lazy loading in your HTML or CMS.
Applied to every image on a typical blog or shop, this workflow can cut total page weight dramatically and make the whole site feel snappier. All the tools you need are free on Wartatren.biz.id, and your images never leave your computer.
