Optimizing Images for the Web Saving as WebP in Adobe Photoshop

WebP is a modern image format developed by Google specifically designed to make the web faster. It provides superior lossless and lossy compression for web images, meaning you get the same high-quality visual results but at a fraction of the file size compared to older formats.

• Smaller File Sizes: WebP images are typically 25% to 34% smaller than comparable JPEGs and PNGs.
• Versatility: Unlike JPEGs (which don't support transparent backgrounds) and PNGs (which can be bulky), WebP supports both transparency and animation while keeping file sizes incredibly lightweight.

When preparing images for a website, balancing high visual quality with fast loading speeds is essential, making WebP the ideal standard for web graphics.

Learn more about WebP format

Follow these brief instructions to properly resize and export your images as WebP using Adobe Photoshop.

Before exporting, ensure your image dimensions are optimized for web displays to avoid saving unnecessary pixels. The UK Web Platform currently has a default maximum image style of 1600px wide. 

1. In Photoshop, go to the top menu and select Image > Image Size... (or press Ctrl+Alt+I on Windows / Cmd+Opt+I on Mac).
2. Ensure the chainlink icon between Width and Height is active so your image maintains its original proportions and doesn't stretch.
3. Change the Width to 1600 Pixels (for full-width header/background images) or 1200 Pixels (for standard inline content).
4. Click OK to apply the new dimensions.

Note: The UK Web Platform uses default image styles to serve images, which are set to a maximum of 1600px. If your site has been extended or customized, these dimensions may be different, please check with your site owner to confirm.