How to optimize an image for the web in photoshop CS6

Optimizing images for your website has 3 major benefits: 1) Improved page load speed 2) Improve SEO rankings due to improve load speed and 3) Improved user experience for visitors. These 3 benefits will lead to visitors staying on your site. Keeping visitors on your site will lead to more sales (e-commerce) and conversions.

Adjust the Image to the final width in pixels that you want

From your menu at the top of the screen click on "Image" then click "Image size" A pop window will appear. Set the width of the image to your desired width. Make sure that you have the "Constrain Proportions" box checked to keep the image proportionate. The width that you select depends on what you're using your image for and how big it's container is on the site that it will be used on. Most website's largest container is around 1200 pixels. So if your image is going to take up about half the screen on your website then 600 pixels should be good. For many e-commerce sites like WooCommerce you may want the image to blow up when customers click on the image. In this case make the image just big enough where customers can get a good view of the product, but nothing bigger.

Choose Your Image Size

Set your Images Width

Save file for the web

In the top of your window click on "File" then click on "Save for Web" A pop window will appear. Select "JPEG" as the format type. Then click save. When the pop up window appears to name your file make sure that you name your file appropriately for SEO purposes. This is what the name should look like Black-Hat.jpg It is best if your image matches the name of your page and the headers on your page. This goes back to setting your keyword before you even create your page.

Save File for the web

Select JPEG for the format type

See the before and after file size

Voila! You now have an image that is optimized for the web. If you'd like you can see your file sizes by right clicking on your images and selecting the properties tab. In our example our original file was 1.4 MB(1,091,828 bytes) and after we optimized it the new file size (357,825 bytes) was about 1/3 that of the original size.

File Size Reduced