How to Compress Images for Website
Sarah Mitchell Updated 2026-06-25 image-compression Upload your image to TinyPNG or Squoosh — both compress files by 50-80% in the browser with no signup. Download the smaller version and replace the original on your server. Before you begin, keep the original file, note its dimensions and format, and decide whether the destination needs transparency or editable metadata. A small before-and-after sample makes the quality decision reversible.
Step-by-step
Pick the right compression tool for your workflow
For a single image or two, TinyPNG handles JPG and PNG compression with zero setup — just drop the file and download. When you need to compare quality levels side by side, Squoosh shows a slider between original and compressed output in real time. For WordPress sites, ShortPixel automates compression across your entire media library. Keep the original in a separate folder and record the output format, quality choice, dimensions, and resulting file size. A repeatable note prevents a later editor from applying a different setting accidentally.
Upload your image
Drag your JPG, PNG, or WebP file into the tool. TinyPNG accepts files up to 5MB per upload. Squoosh runs entirely in your browser so there is no file size limit on the upload side. ShortPixel lets you compress up to 100 images per month on the free plan. Keep the original in a separate folder and record the output format, quality choice, dimensions, and resulting file size. A repeatable note prevents a later editor from applying a different setting accidentally.
Adjust the quality slider
Squoosh gives direct control over the output quality — drag the slider between 0 and 100 and watch the file size update live. For website photos, 75-80% quality typically cuts the file size by 60-70% with no visible difference. Screenshots and graphics with solid colors can go lower — try 50-60% since they compress more aggressively without losing clarity. Keep the original in a separate folder and record the output format, quality choice, dimensions, and resulting file size. A repeatable note prevents a later editor from applying a different setting accidentally.
Compare before and after
In Squoosh, toggle the comparison slider to check for compression artifacts — banding in gradients, blurring around text edges, or pixelation in detailed areas. TinyPNG shows the exact percentage reduction and new file size after processing. If the compressed version looks identical to the original at normal zoom, you are good to go. Keep the original in a separate folder and record the output format, quality choice, dimensions, and resulting file size. A repeatable note prevents a later editor from applying a different setting accidentally.
Choose the right output format
WebP produces smaller files than JPG at the same quality level — typically 25-35% smaller. Use Squoosh to convert PNG screenshots to WebP and cut file sizes by 50% or more. Keep JPG for photographs since the format handles photo compression better than PNG. Use PNG only when you need transparency. Keep the original in a separate folder and record the output format, quality choice, dimensions, and resulting file size. A repeatable note prevents a later editor from applying a different setting accidentally.
Download and deploy the compressed image
Download the compressed file and replace the original in your project. TinyPNG preserves the original filename with a smaller file size. Upload the new file to your CMS or server. For WordPress, ShortPixel handles this automatically — install the plugin and it compresses every image on upload. Keep the original in a separate folder and record the output format, quality choice, dimensions, and resulting file size. A repeatable note prevents a later editor from applying a different setting accidentally.
Create a safe naming and backup workflow
Copy the source images before compression and choose a destination folder that clearly identifies the optimized set. Preserve the original filename when it helps the CMS, but add a version or date when several exports may coexist. Compare the source and output counts after each batch, and do not delete originals until the compressed files open correctly in the target browser or CMS. If metadata contains location or personal information, decide whether it should be retained before publishing. This small housekeeping step prevents accidental overwrites and makes it possible to repeat the same compression decision later.
Test the result on the real page
Upload one compressed image to a staging page or a local preview and inspect it on a high-density display and a normal laptop screen. Check the largest rendered size, responsive behavior, sharpness of text, and loading order rather than judging only the downloaded file. If the page uses a content management system, confirm that it does not recompress the image a second time or strip a needed format. Once the sample passes, apply the same settings to the remaining files and keep a short record of the tool and settings used.
Recommended Tools
