Subscribe to receive my FREE email course to help you improve your blog design and grow your audience with actionable exercises that do not require a designer or developer!
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.
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!