How To Save Images for Web in Photoshop

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:

Time needed: 5 minutes.

Saving Images for Web in Photoshop

  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. What Is Royalty Free License Google Result

  2. Open the image in Photoshop

    Or, drag and drop it into PhotoshopOpen Your Image In Photoshop

  3. Edit and crop the image as needed

    Use the layer adjustment options to edit your image i.e. brighten, reduce contrast. Cropping it to a square size is always a good idea for consistency and use on social media.Make Edits In Photoshop Adjustment Layer Panel If Needed

  4. Go to File – Export – Save for Web (Legacy)

    Photoshop File Export Save For Web Legacy

  5. Select your image format

    Use JPEG for photos, PNG for graphics. GIFs are for looping videos. Select Your Image Preset Jpeg Or Png Save For Web Photoshop

  6. 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. Photoshop Image Size Panel

  7. 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.Photoshop Save For Web Cahnge The Image Percent

  8. 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.
    Photoshop Toggle The Image Size To Get Smallest Size Best Resolution

  9. 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!
    Give The Image A Seo Friendly Name For Alternative Text

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.

Posted in

Shelley has had an obsession with all things web design, branding, copy-writing and digital marketing since she started tertiary graphic design studies 8 years ago. Her ongoing professional development has focused on SEO, PPC, SEM and perfecting CMS based web platforms. She is passionate about empowering clients to get the best out of their sites beyond just the build.

Leave a Comment

Article Summary:
    More Articles:
    Photoshop File Export Save For Web Legacy
    How To Save Images for Web in Photoshop

    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.

    Woman Updating Website Seo Quick Wins That Can Be Implemented Today
    5 Quick SEO Wins You Can Implement Today

    Looking for a few quick SEO Wins? Look no further. Here are 5 tried and tested tactics that you can implement today with little technical knowledge.

    Business Basics Grants Program Qld 16 May 2022 Website Seo 5k Grants
    Business basics grants qld – opening soon

    Round 3 of the Business Basics grants qld program opens 9am, 16 May 2022 for businesses based in South East Queensland (SEQ) and regional Queensland.

    Rogue Web Design Google Search Engine Results Page Google Analytics
    4 Tips to Optimise your Web Pages for Search Engines

    Experts in the SEO space all agree there is over 200 known ranking factors. Fortunately, there are some tried and true wins for optimising individual web pages so they rank higher in the SERPS.

    Person typing into a Wordpress blog
    Why You Need A Blog On Your Real Estate Website

    While there are a number of real agents and companies that are leveraging blogs to support their sales interactions, there’s not nearly enough. Having a blog where you post valuable content for potential clients can make a huge impact in your business. Read three reasons Why You Need A Blog On Your Real Estate Website.

    Strudwick Property Agents Laptop Website Layout Design By Rogue Web Design
    Strudwick Property Agents Website

    Strudwick Property Agents Website Launched: 2021 Strudwick Property Agents have built their reputation and profile by working harder for their sellers as well as their purchasers. They are committed to delivering exceptional outcomes in the world of real estate. Strudwick Property Agents’ passion is property. They pride themselves in providing their clients with the best…

    Rogue Web Design Website Design
    SEO Quote

    SEO Quote How much SEO costs can vary a lot, so to make it easy, we’ve added all the basic questions we need to know in our SEO quote form below.We will get back to you ASAP with a obligation free quote that covers the price range, services included and expected outcomes.   Your Name* First…

    Digital Marketing
    SEO Brisbane

    SEO Preview text Looking for a Brisbane SEO expert? Nothing outsourced, at Rogue Web Design we conduct search engine optimisation right here in Brisbane. Here’s how > So, what is SEO? Search Engine Optimisation (SEO) is a function of Search Engine Marketing, and relates to the optimising of content on and off your page. The…

    Website Design
    Web Design Brisbane

    Web Preview text Brisbane why work with us? 100% Australian owned and operated Website Design Brisbane We are Brisbane’s web design professionals, providing web, digital marketing, Search Engine Optimisation and graphic design solutions for businesses small to large. Whether you need a new website design for your Brisbane small business, or an ecommerce store for a…

    Real Aussie Reptiles Website Desktop And Phone View
    Real Aussie Reptiles Website

    Real Aussie Reptiles Launched: 2022 | Project length: 2 months Real Aussie Reptiles is owned by Dr Laura Coughran, a veterinarian with a passion for ethically keeping and breeding native Australian reptiles. Real Aussie Reptiles was established to keep and breed healthy and robust Australian native reptiles, including both locality specific animals and some morphs. They will continue healthy lines of…