Images are usually the largest assets on a web page, and they're the most common reason pages load slowly. A photograph that looks fine at 3MB on your desktop creates real problems for mobile users on slower connections, and slow-loading pages have measurable effects on how long visitors stay and whether they come back. Optimising images before publishing — the right format, the right compression, the right dimensions — is one of the more impactful things you can do for web performance without touching code.
Portimg handles the conversion and compression steps in the browser without any software to install.
Format first
The format you choose affects file size more than compression settings do. For photographs and complex images going onto a website, WebP is the right default — it produces files roughly 25–35% smaller than JPG at comparable visual quality and is supported by all major browsers. For images with transparency — logos, icons, overlays — WebP also supports transparent backgrounds, making it a single format that handles both cases JPG and PNG used to cover separately.
AVIF achieves better compression still, typically 20–50% smaller than JPG at equivalent quality. Browser support is broad but not universal, particularly in older software. If your analytics show most visitors on modern browsers, AVIF is worth testing. If you're unsure, WebP is the safer choice with no meaningful downside.
For images that won't go on the web — email attachments, print files, documents shared with clients — JPG remains the most compatible format across software and devices.
Compression
Within a given format, the compression level determines the trade-off between file size and visual quality. Most tools offer a quality slider or percentage setting. Higher quality means larger files; lower quality means smaller files with increasingly visible artefacts.
For photographs, quality settings of 75–85% in JPG, or equivalent in WebP, are generally indistinguishable from the original at normal viewing sizes on a screen. The difference between 85% and 100% quality is a much larger file for almost no visible improvement. Going below 70% starts to introduce noticeable artefacts, particularly in areas of fine detail or sharp edges.
For logos, icons, and graphics with flat colours and crisp lines, lossless compression is the better choice — lossy compression creates subtle artefacts at colour boundaries that are more visible on clean graphics than on photographs. PNG with lossless compression handles these cleanly.
Dimensions
An image that's 3000px wide displayed in a 800px container is sending three times more pixels than the browser uses. The browser downloads the full image and scales it down, which wastes bandwidth and slows loading without improving appearance. Resizing images to the dimensions they'll actually be displayed at — before uploading — reduces file size independently of format or compression settings.
For responsive layouts where images display at different sizes on different screen sizes, a reasonable approach is to export at the largest size the image will ever appear, then let the browser scale down for smaller viewports. This isn't as efficient as true responsive images with multiple source sizes, but it's a practical improvement over uploading unresized originals.
Workflow with Portimg
The typical sequence for preparing images for the web: resize to target dimensions first, then convert to WebP or AVIF, then compress. Doing these in order means the compression operates on the right-sized image rather than a large one that will be scaled down anyway.
Go to portimg.com to handle format conversion and compression. The resize tool handles dimension changes. Both run in the browser without an account, and files are deleted after processing.
For a batch of images — a product catalogue, a blog post with multiple images, a full set of site assets — batch upload handles the conversion step without processing each file individually. Keeping originals in a separate folder before conversion means you can always reprocess if the output settings need adjusting.
Alt text
Image optimisation for search visibility is primarily about alt text rather than file format or size. Alt text describes the image content for search engines and screen readers — it should be a brief, accurate description of what the image shows, including relevant terms where they fit naturally. An alt text of "image1.jpg" or an empty alt attribute tells search engines nothing. A description like "close-up of handwritten notes on lined paper" is accurate, descriptive, and useful for both search indexing and accessibility.
File names follow the same principle. "IMG_4823.jpg" is meaningless; "handwritten-notes-notebook.webp" is marginally better for search indexing and much easier to manage in a file system.