Best settings to export compressed web-ready infographics in Photoshop without losing text clarity?

Hi! For infographics with lots of small text, the format choice matters most:

• Prefer a lossless format — PNG-24, or WebP with the Lossless option. JPEG is lossy compression, which is exactly what creates those fuzzy halos around small type. If a graphic is mostly photos and you do use JPEG or lossy WebP, keep the Quality slider high (around 85–90).

• In File > Export > Export As, set the final pixel width your blog actually displays, and add a 2x size with the + icon (with an @2x suffix) for retina screens, instead of uploading one oversized file and letting the browser shrink it.

• When you do downscale, use Bicubic Sharper (reduction) — it's designed for reductions and keeps text edges crisp.

• If the design is mostly vector shapes and type, also try SVG in Export As — it stays sharp at any display size.

• Leave Convert to sRGB enabled for web output.

Adobe's Export As guide covers the multi-size export workflow: https://helpx.adobe.com/photoshop/desktop/save-and-export/export-files-to-different-formats/fine-tune-your-export-settings-using-the-export-as-option.html

Hope that helps!

For infographics with small text, PNG is usually the safest choice since it compresses without the edge artifacts that JPEG and WebP can introduce around type. In Export As, keep Resample at Bicubic Automatic unless you are shrinking the image, in which case Bicubic Sharper helps retain crispness. Export at the exact pixel size your blog needs rather than letting the browser downscale it, and compare PNG against a WebP export to see whether the file size savings are worth it.