Why image file size slows a page
The bytes in the image are what the browser has to fetch before that picture can paint. A 4 MB photo is often the heaviest file on a WordPress page, so the wait is the image, not the theme.
Make three cuts, in this order. Resize first, because pixels you never show are wasted bytes. Then pick a format that matches the picture. Then compress to the cap you were given.
- Resize to the widest slot on the page. An image shown at 800 pixels wide does not need a 3000-pixel file.
- Choose the format for the picture. Photos go to WebP or JPEG. Flat logos go to SVG or a small PNG.
- Compress until the file is under the real cap, a form limit or the weight you want on the page.
Camera data such as EXIF and GPS is extra weight and a privacy leak. Strip it on export. The wider WordPress pass sits in the WordPress image optimization guide.
How to decrease image file size without losing quality
You keep the look by removing bytes a visitor cannot see at the size on the page. Resizing to that width is not a blur. The slot was never as wide as the camera file.
For a photograph, export WebP or JPEG around quality 75 and judge it at the size the page shows, not zoomed in an editor. If the sky blocks or edges fray, raise the quality. If it looks the same, you can go lower.
Lossless compression keeps every pixel. It helps PNG and some WebP files, and it will not turn a 5 MB photo into a few hundred kilobytes. Use it for logos, icons, and screenshots where text must stay sharp.
- Resize to the displayed pixels before you touch quality.
- Photos: WebP or JPEG near quality 75, then check at the size the page uses.
- Logos and screenshots: lossless PNG, PNG-8, or SVG.
- Strip EXIF. It does not change the picture.
Resize the image before you compress the file
Find the rendered width of the slot, in the browser inspector or by the theme content width. Export at that width, or at twice that width when the theme serves a sharp source for high-density screens. Do not upload the camera original and expect CSS to shrink the download.
A CSS width, max-width, or background-size only changes the paint. An image in CSS, including a background-image, is still the full file. JPEG, PNG, WebP, GIF, and SVG all work this way. The format does not make a CSS resize smaller.
In Word, Photoshop, Paint, or Preview, change the pixel dimensions before you lower quality. Quality alone on a 4000-pixel photo will not reach a 100 KB cap without looking broken.
Which format decreases image file size
Match the format to the picture. A photo saved as PNG is usually much larger than the same photo as WebP or JPEG. A logo saved as JPEG grows fuzzy edges and is often larger than an SVG.
| Format | Use it for | What changes in the file |
|---|---|---|
| JPEG | Photographs | Lossy, no transparency, opens everywhere |
| WebP | Photographs and many graphics | Often smaller than JPEG at a similar look, and it can keep transparency |
| PNG | Screenshots, logos, transparency | Lossless, or smaller as PNG-8; a poor choice for photos |
| GIF | Short, simple motion | Few colours; a photo saved as GIF stays large and coarse |
| SVG | Logos and icons | Shapes, not a pixel grid, so it stays sharp when scaled |
| AVIF | Photographs, only if the page really serves it | Often smaller than WebP; skip it when the browser still gets JPEG |
Serve the one file the page requests. A spare copy that nothing links does not load, and keeping every format on disk does not make the page lighter.
On a WordPress site, follow how to convert images to WebP, then confirm the live response is the new format in a private window.
Compress an image to a target file size
Set the cap you were given and export until the file is under it. People are often asked for 50 KB, 100 KB (0.1 MB), 200 KB, or 2 MB. Hitting the number still means fewer pixels or lower quality. Look at the picture, not only the byte count.
For a few files, use a browser compressor such as Squoosh, or a batch tool such as TinyPNG. Download the result and compare it with the original at the display size. Keep your own original.
- Resize to the display width before you touch quality.
- Export JPEG or WebP. Start near quality 75 for a photo.
- If the file is still over the cap, lower quality by about 10 points, or reduce the width again.
- Stop when the file is under the cap and faces and text still look clean at the size on the page.
On Windows, open the photo in Paint, resize it, and save as JPEG. On a Mac, open Preview, use Tools then Adjust Size, then File then Export, and set the quality.
In Word or PowerPoint, select the picture, open Picture Format, choose Compress Pictures, and pick a lower target. In Photoshop, set the width under Image then Image Size, then File then Export then Export As, and choose JPEG or WebP.
A PNG photograph rarely reaches 100 KB without a format change. Convert it to WebP or JPEG. For a logo or a screenshot, try PNG-8, or SVG for a logo. Lossless PNG stays sharp and stays large.
Decrease image file size in WordPress
Shrink the file on your computer, then upload it. WordPress stores that file in the Media Library and builds the sizes listed under Settings, then Media. Those copies do nothing if the theme still prints the full original.
In the editor, select the image and avoid Full Size when a smaller size covers the slot. A plugin can make WebP copies on upload. Test one post, then open the public URL in a private window so a cache does not show the old file.
WebJi® WordPress hosting runs the site. It does not resize camera originals for you. If the upload is rejected, shrink the file and try again. Email support@webji.services if the account limit looks wrong. Do not call the office number for support.
Lazy loading does not decrease image file size
Lazy loading delays images that sit below the first screen. The file on disk stays the same size. It can speed the first view. It does not decrease image file size, and it does not fix a 4 MB hero.
Leave the first image eager so the largest element can paint. WordPress lazy-loads most later content images. Scroll once on a phone and confirm they appear without a jump. Do not lazy-load the logo or the first product photo.
A CDN keeps a copy closer to the visitor, which shortens the trip. That is not a smaller file unless the CDN also resizes or converts, which you confirm in the network panel. The delay itself is covered in the lazy load WordPress guide.
What file size to expect after the decrease
These figures are a worked example for a typical upload, not a guarantee for every photo. In the browser network panel, sort by size and fix the five heaviest images first.
| Starting file | After the same cuts |
|---|---|
| 4000 by 3000 JPEG, 4 to 5 MB | 1600 px wide WebP at quality 75, about 150 to 300 KB |
| PNG screenshot, about 2 MB | WebP or PNG-8, about 80 to 200 KB |
| About 40 uncut photos, 80 MB or more | Under 5 MB when each image is cut the same way |
You know the cut worked when the network panel shows the new file, the picture is still clear in its slot, and the page is no longer waiting on multi-megabyte originals.
Frequently Asked Questions
How do I decrease the MB size of an image?
Resize the picture to the width the page shows, then export JPEG or WebP. A phone photo of several megabytes usually falls under 1 MB once it is no wider than the layout. A 2 MB cap is often met by that resize alone. A 0.1 MB cap also needs a smaller width or a lower quality setting.
How can I compress an image to 100 KB?
100 KB is 0.1 MB. Resize first, often to about 800 pixels wide for a photo, export JPEG or WebP, and lower quality until the file is under 100 KB. If faces or text break up, the cap is tighter than the picture can stand, so crop it or ask for a higher limit.
How do I decrease image file size without losing quality?
Resize to the pixels the page shows and strip camera metadata. That does not blur the picture. For photos, WebP or JPEG near quality 75 is the usual screen setting. Compare at the size the page uses. Keep lossless PNG for logos and screenshots, not for photographs.
How do I compress a PNG?
If the PNG is a photograph, convert it to WebP or JPEG. A photo stored as PNG stays large. If it is a logo, try SVG or a PNG-8 with fewer colours. If it is a screenshot, PNG-8 or WebP keeps the text readable at a smaller size.
How do I decrease image file size in Word or Photoshop?
In Word or PowerPoint, select the picture, open Picture Format, and choose Compress Pictures, then a lower resolution. In Photoshop, set the pixel width under Image Size first, then use Export As and pick JPEG or WebP. Change the pixels before you lower quality.
Should I resize images before I upload them to WordPress?
Yes. Upload the width the theme will show. WordPress makes smaller copies from the sizes under Settings, then Media, but many themes still load the original. Shrinking the file after upload does not help if the page still requests that original.