How to Save Photoshop Images Correctly

written by:
posted on: January 17, 2017

Most people do not save Photoshop images down properly before they upload them to their website. This issue is so widespread. I see it on almost every single website that I’ve installed. When you upload huge images to your website, your blog slows down, and it can negatively impact your website performance and SEO.

Before we begin: A best practice is to setup your graphics to the actual size you want. You do not want to stretch your images bigger. Keep your Photoshop files big, then save images in Photoshop down to the size you need them.

How to Export Images in Photoshop

Once you are ready to save your Photoshop file down for the web, first save the PSD of the file.

Then, go to FILE < EXPORT < EXPORT AS.

A window will pop up where you can select the format, size, and quality.

  • File Settings: In this section, you will select a FORMAT + QUALITY. For the blog post templates, JPG files work best! When saving down for the web, you only need your JPG to be at 60-70% quality. Do not go lower than 60%, and you do not need to go higher than 70%.
  • Image Size: In this section, you will select the WIDTH you need your image to be. Because of retina displays, you want this width to be double of what your full-width of your blog post. For example, if the width of your blog post is 700 pixels, you would adjust the width of your template to be 1400pixels wide. Let the height automatically recalculate so that the image retains its proportions.
  • Canvas Size: The canvas size will automatically adjust as you change the image size. If you adjust canvas size, it will crop your image. So just leave this alone.
  • Total Image Size: In the bottom right corner of the image preview, you will see the total size of the image when you export it. Keep this number in mind. You want this number to be under 200kb. Anything over 500kb is too big, and you should not upload it to your website.

How to Export Images in Photoshop

When you are done adjusting your settings, select EXPORT. A new window will open where you save the JPG file. Make sure to use an SEO appropriate title for your image, such as “fall-favorite-finds.jpg.” Select EXPORT after you changes the title of the image. Your image is now ready to upload to your website!

Editor's Note

Some of the links included throughout this website are affiliate links, which means that Lindsay Humes LLC receives a small commission when certain items are purchased. These affiliate links provide a means for the site to earn revenue and generate free content for readers. For more details, read the privacy policy here.

Blog Design Lindsay Humes
Meet The Author: Lindsay Humes

Leave a Comment

Your email address will not be published. Required fields are marked *

Join The Blog Better Audit!

Subscribe to join thousands of other creatives, bloggers, and freelancers and receive my free email course on how you can improve your WordPress website. My newsletter is full of tips on how you can grow your audience with actionable exercises that do not require a designer or developer!