A page can have clean CSS, minified JavaScript, and still feel slow because a hero PNG is 3.8 megabytes. Phones on cellular pay for that. Lighthouse yells about it. Users do not wait.
Image compression is one of the few performance fixes you can see. The file gets smaller. The page gets quicker. The photo still looks like the photo if you do it with a bit of care.
Nicxro’s image compressor is for that pass: shrink the bytes before you upload to WordPress, a store, or a static host. This guide is how to compress without turning a product shot into mush, and without pretending one quality slider fits every image.
Why images dominate the weight
Text compresses well on the wire. Images often do not, especially if they were exported from a phone camera or a designer’s full-resolution canvas.
A 4000-pixel-wide photo displayed at 800 CSS pixels is a waste. You are sending twenty times the pixels the screen needs, then more if you did not compress. Retina screens need more than 800, not 4000. A common target is 2x the display size: about 1600 pixels wide for an 800-pixel column, sometimes 3x for very sharp UI chrome. Heroes can be larger. Thumbnails should not be.
Compression and resizing are cousins. If you only lower JPEG quality on a 4000-pixel image, you still decode a huge bitmap on a phone. Resize first, then compress. If Nicxro’s compressor resizes, use that. If it only compresses, resize in your editor, then compress.
Pick a format on purpose
JPEG is for photos. It is lossy. Fine for landscapes, people, food. Bad for screenshots with text, logos, and flat UI. You will see muddy letters.
PNG is for graphics that need sharp edges or transparency. PNG can be huge. A photographic PNG is often a mistake. Convert those to JPEG or WebP.
WebP (and AVIF, where you can) often beat JPEG at the same visual quality. WordPress and modern browsers handle WebP. If a client’s ancient workflow cannot, keep a JPEG fallback.
SVG is for logos and simple icons. Do not “compress” a photo into SVG. Do not embed a 2MB PNG inside an SVG and think you got vector benefits.
GIFs for video-like clips are a trap. Use video or an animated WebP. A 12-second GIF can be tens of megabytes.
If you are unsure, start with: photo to WebP or JPEG, logo to SVG or PNG, screenshot with text to PNG or WebP at high quality.
Quality is not a moral number
“80% quality” is not a standard. Each encoder’s 80 looks different. Trust your eyes at the size the image will display.
Zoom to 100% in the layout, not 400% in an editor. Artifacts that vanish at display size are fine. Artifacts on a product color that must match a brand are not.
For thumbnails, you can be aggressive. For a hero on a photography site, be gentle. For a background image under a dark overlay, you can crush it more because the overlay hides noise.
Watch skin, gradients, and sky. Those show banding. If banding appears, raise quality or add a touch of dither if the tool offers it. If a screenshot of a UI goes blotchy, you chose a photo codec. Switch to PNG or lossless WebP.
Compression that looks like a bug
Wrong color profile. An image that looked fine in Photoshop goes dull or neon on the web because the profile was stripped or ignored. sRGB is the safe web default. Convert to sRGB before compress.
Chroma subsampling that blurs tiny red text on a JPEG screenshot.
A tiny thumbnail upscaled in CSS. Compression did not fail. You used the wrong asset.
Double compression. You downloaded a JPEG from the CMS, compressed it again, uploaded, and it looks worse. Work from the original export when you can.
Transparent PNG flattened onto black or white by accident, leaving a halo. Use a tool that keeps alpha, or put the right background in the image.
A workflow that fits real publishing
- Export from the design tool at the largest size you will actually display, times 2 for retina if needed.
- Convert to the right format.
- Compress on Nicxro. Compare file size and a side-by-side look.
- If it is still over a few hundred kilobytes for a content photo, resize down or lower quality a step.
- Upload that file. Do not let the CMS keep the 8MB original as the delivery file if you can avoid it.
- Set
widthandheightin HTML so the page does not jump. Useloading="lazy"for below-the-fold images. Do not lazy-load the LCP hero.
WordPress often creates extra sizes. That helps if the theme uses srcset. It does not help if the theme injects the full original into the hero. Check the network panel for the URL that actually loads.
Targets you can remember
A blog inline photo: often 100–300KB.
A homepage hero: try to stay under 500KB, lower if it is not the main art.
A thumbnail: tens of kilobytes.
A logo PNG: often under 20KB if it is simple; SVG may be smaller.
These are not laws. A full-bleed photographic campaign can justify more. A testimonial avatar cannot.
If one image is more than a third of the page weight, it is the first performance ticket.
Mobile is the reason to care
Desktop on fiber hides a 2MB image. A phone on a train does not. The website responsiveness checker on Nicxro will show layout. The network panel will show the image. Both matter. A beautiful mobile layout that waits four seconds for a hero is still a bounce.
Serve appropriately sized files. srcset and sizes exist so a 360-pixel screen does not download the 1920-pixel file. Compression without responsive images is half a fix.
When not to crush an image
Print assets. Do not compress those for web and then send them to a printer.
Legal document scans that must stay readable. Prefer PDF with decent settings, or PNG for a single page of text.
Images you will edit again. Keep originals in cloud storage. Compress derivatives for the site.
Tiny PNGs that are already 3KB. You will waste time for nothing.
Accessibility and compression
Low quality can destroy text in images, which you should not rely on anyway. Real text in HTML is better. If you must put text in an image, do not JPEG it into soup, and provide alt text that actually describes it.
Alt text does not fix a 4MB download. It helps people who cannot see the image. Do both.
Team habits that prevent the 8MB commit
Agree on max dimensions in the handbook. Add a checklist item: no image over X KB in the hero without a reason. Designers export for web, not “PNG for maximum quality” by default.
If someone uploads a huge file, compress it and replace it. Do not shame. Do show the before and after size. Numbers convince.
Nicxro is the quick pass when you are not sitting in Photoshop. Upload, compress, download, publish. The goal is a page that looks like you meant it and loads like you respect the user’s time.
A closing check
Before you call a site “done,” open the homepage on a phone, ignore Wi-Fi if you can, and watch the hero. If it crawls in, compress. If it snaps in and the layout holds, you are closer than most sites that only ever judged design on a studio monitor.