Web-Able Images: What Makes an Image Ready for the Web
"Web-able" means an image is properly prepared for use on a website — the right format, the right size, the right color mode, and compressed appropriately. An image that looks great in Photoshop can still cause problems on the web if any of these settings are wrong. Here's the complete checklist.
✓ RGB Color Mode
Web images must be in RGB. CMYK is for print. Check via Image > Mode — if it says CMYK, convert to RGB before exporting. Colors can shift significantly between these modes, so always verify after converting.
✓ 72 PPI Resolution
Screen displays are 72 ppi. Higher resolution adds file size without improving appearance on screen. Set resolution to 72 ppi in Image > Image Size before exporting. (Note: for retina/HiDPI displays, you may want to export at 2x pixel dimensions, but still at 72 ppi.)
✓ Correct Pixel Dimensions
Know where the image will be displayed and size accordingly. A sidebar thumbnail needs different dimensions than a full-width hero image. Oversized images waste bandwidth; undersized images look blurry. When in doubt, a standard blog image width of 800–1200px covers most cases.
✓ Appropriate File Format
- JPEG: Photographs and complex images. Quality 60–80 for web.
- PNG: Graphics, logos, images needing transparency.
- WebP: Modern format, best file-size-to-quality ratio. Use when your site supports it.
- SVG: Logos and icons that need to scale at any size.
- Avoid: BMP, TIFF, and RAW formats — these are not web formats.
✓ Compressed File Size
Use Save for Web (File > Export > Save for Web Legacy) to preview and control the output file size. For most web images: under 200KB. For large hero images: under 500KB. Anything larger will noticeably slow your page.
✓ Descriptive File Name
Rename the file before uploading — lowercase, hyphens between words, keyword-relevant. portland-web-designer-homepage.jpg not DSC_0042.jpg. File names contribute to image SEO.
✓ No Embedded ICC Profile Issues
When saving for web, choose to convert to sRGB (the standard web color space) to ensure colors look consistent across browsers and devices. In Save for Web, check the "Convert to sRGB" option.