How To Save Images for Web in Photoshop (8 Easy Steps)

In this article I’ll go through each step you need to take to save images for web in Photoshop, including how to balance size vs resolution, and optimising for SEO.

Why does image size affect SEO?

If you want to add new images to your site, it’s important that they are not too large. If you are uploading anything over 1MB it will slow down your site speed, which will have a direct impact on your site’s SEO ( Google prioritises fast loading sites).

Not only that, it’s a huge turn-off for site visitors. No one likes a slow loading website — and this is fact backed by Google themselves, their page speed study revealed that if a website page on a mobile takes over 3 seconds to load, the visitor will click away.

Big images are almost always the culprit of a slow site.

Don’t have Photoshop?

The easiest way to save and optimise images for websites is in Photoshop, in my opinion. This allows for the best resolution at the smallest image size, and gives you the most control and customisation.

There are a few great tools out there that you can use that will at least drop the size, such as Tiny JPEG and Tiny PNG. You won’t have as much control over the outcome but at least you won’t be uploading huge images to your site, which is a no-no.

Not every image is the same.

Some images may need more or less compression, so exporting them in batches won’t do much use. I suggest that, if all your images are different sizes and resolutions, you export them out one by one.

Here’s how to save your images for web in Photoshop easily:

  1. Make sure you own the image or are licensed to use it

Avoid any potential copyright issues from the beginning. If you don’t have the budget for buying a license, use a free stock image site like Pexels or Unsplash.

Make sure you understand the licensing conditions of your images, or use a royalty-free image

2. Open Image in Photoshop

Use the layer adjustment options to edit your image i.e. brighten, reduce contrast as needed. Cropping it to a square size is always a good idea for consistency and use on social media.

Select the circle/pie chart icon, which is the adjustment layer — to edit your images as and if needed

3. Go to File — Export — Save for Web (Legacy)

Where to find the export for web setting in Photoshop

4. Select your image format

Use JPEG for photos, PNG for graphics. GIFs are for looping videos.

The image preset you choose will be based on what is in the image.

5. Take note of the current image size in the left hand corner

You’ll want to keep an eye on this as you optimise it in the next step.

The bottom left hand corner under ‘JPEG’ is the current image size, in this case, 1.076MB — far too big for web!

6. In Image Size, toggle the Percent % box

You’ll want to reduce this down, then click out of it to see the total image size.

Place your cursor in the Percent box and drag it down, or you can type in a percent, then click out of it

7. Aim for smallest size — highest resolution

Toggle the Image Size Percent until the image is the best resolution possible at the smallest file size possible. I find the sweet spot to be between 300–500kb. You can click ‘Preview’ to see how it will actually look on a webpage if you aren’t sure.

You’ll now see a smaller file size, and you can hit ‘preview’ to se how it looks on a web page.

8. Click Save and ensure the title is SEO friendly

This is possibly as important as the actual image size. Give your image a new name that 1. reflects what is actually on the image and 2. Contains at least one of the keywords on the page it is going into.

You can make your alternative text the same as the title to save time. This is important for accessibility (people using screen readers) and for SEO — Google can better understand what the image is, so it adds SEO value to your page and anyone searching for the term in Google Images can find it!

Never call your images ‘untitled01’! This doesn’t help search engines or screen readers alike. Make your image title SEO and accessibility friendly.

And that’s it!

Your image is now saved for web and SEO optimised, ready to be uploaded into your website.

If you have further questions about this process, or need web design assistance, please get in touch.

Originally published at https://www.roguewebdesign.com.au on June 8, 2022.

--

--

Obsessed with all things design, branding, websites, illustration and digital marketing. Find me at roguewebdesign.com.au

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store