Images are often the largest page cost
A static article may have a small HTML file and a modest CSS file, but one uncompressed photo can be several megabytes. On mobile networks, users experience that as waiting, blank areas, or images appearing long after the text.
Crop before compression
Compression works best after the image has the right dimensions. If a thumbnail is shown at a small size, crop or export a small version first. Compressing a huge original may still leave unnecessary pixels and a larger file than needed.
Match format to content
Photos generally work well as JPG or WebP. Transparent graphics may need PNG or SVG. Simple diagrams and interface illustrations can often be SVG. Choosing the right format usually saves more than blindly reducing quality.
Balance clarity and file size
A content site does not need print-quality images. The image should look clear on a phone and support the article. Test a few quality levels and inspect edges, text, and important details. Do not compress so aggressively that the site looks careless.
Use different sizes for different places
Homepage visuals, article images, and list thumbnails should not all share one large file. Create smaller thumbnails for lists and a moderate version for article body content. This keeps listing pages fast even when many articles are shown.
Check the real page after compression
After replacing images, open the page rather than only viewing the file. Make sure the image is not stretched, cropped awkwardly, or missing because of a wrong path.
When this guide applies
A static article may have a small HTML file and a modest CSS file, but one uncompressed photo can be several megabytes. On mobile networks, users experience that as waiting, blank areas, or images appearing long after the text. Create a simple naming rule that includes purpose and size. A consistent image workflow prevents future pages from becoming heavy by accident.
Common causes
- Original camera images are uploaded directly.
- One large image is reused everywhere.
- Photos are saved as PNG.
- File names do not reveal purpose or size.
Step-by-step process
Decide where the image will be used.
Export a size close to the display area.
Choose a suitable format.
Compress and then check the live page.
How to judge success
- Images look clear enough on mobile.
- Listing pages remain responsive.
- Images do not stretch or break layout.
Common mistakes
- Chasing the smallest file at the cost of credibility.
- Forgetting homepage and category images.
- Using random file names that are hard to maintain.
Maintenance advice
Create a simple naming rule that includes purpose and size. A consistent image workflow prevents future pages from becoming heavy by accident.
Quick checklist
- Crop before compression.
- Use separate thumbnail and article sizes.
- Choose JPG/WebP/SVG appropriately.
- Inspect clarity after compression.
- Use maintainable file names.
Summary
The best H5 pages are not only visually clean; they are understandable, testable, and maintainable. Use the steps above as a practical review flow whenever you publish new content, adjust layout, or move the site to a live domain.