Image optimization begins with reducing the file size of your image as much as possible without a noticeable change in image quality so that your page load times remain low.
Re-size images “for web” in Photoshop:
Open the Image in Photoshop (I am using CS5.1 below, an older version, but idea is the same). Click on File > Save for Web & Devices.
Working on the right hand side of the screen, first adjust the Image Size. In the example below, I adjusted the image size to 600 x 450 since it is for a blog post. You might want it larger for a header image.
Work with the JPEG size, see left arrow above, (keep it close to 100 if possible, or under 200) and try to use the highest JPEG quality size as possible (top arrow). Play around with these adjustments until you get as high a quality, with as low jpeg size as you can.
Reszing using other software
How to Re-size Images using Gimp
On a Mac, try ImageOPtim or use the built-in Preview.
Naming Images for SEO
Image Optimization is also about getting your images found on Google, and other image search engines, which helps users find your website.
Most of our images are named by whatever camera or phone took the picture. How many times have you uploaded an photo DSC_0029.jpg or Photo-9.jpg or some other unhelpful name. These titles don’t help us find the photo later, and more importantly, they don’t help search engines find your website.
Think about your “keywords.” What words do users type in to find your website. Try to use these words when you are naming your image, AS WELL AS, using descriptive words that describe the image.
For example, for an artist’s website, rather than DSC_00044, the artist could use his name and style of art, such as Rich-Ray-Art-Mixed-Media. This is using words descriptive of the image as well as his search terms.
To optimize the above photo, I lowered the Image Size to W: 520 and H: 585. I looked at the top right image and I adjusted JPEG quality to Very High. On the top right image I see 172K, which is under 200 and should load fast.
Then, as stated above, I named the photo for SEO, using keywords for the images, as well as words that describe what it is. Rich-Ray-Art-Mixed-Media is slightly long, but it is a good name to bring up this work on the web, as well as find it later should I need to search my own site for the image.
To learn more about image basics visit, Google Image Best Practices or Shopify Image Optimization Tips.