Technology Trivia: Google added site speed to their SEO ranking algorithms on April 9, 2010.
Google realized that, if you are regularly frustrated with how long it takes for websites to load, you will probably take your online searches to one of their competitors. This decision had a huge effect on how we build websites as well a people’s overall experience when searching for information online.
Image size can be a significant contributing factor to website load speed. This issue can crop back up time and time again depending on who is managing a website and what their process is to load photos.
How To Load Photos:
- Get photo
- Resize it for web
- Run it through a minimizing tool
- Log into website CMS
- Load image where it’s needed
Steps 2 and 3 are the steps most commonly skipped and make the biggest difference in the long-term health of your website if you have a fair number of images on it. This is why we stress this practice when we first show a client how to use their new content management system (CMS).
General Rules
To optimize an image, you need to make sure that the file size is large enough to look good but no larger. You never need a print-quality image on a website. While each website design has it’s own dimensions for things, feel free to use this as a starting guide on image sizing:
- Full screen: long edge 1600 pixels
- Half screen: long edge 800 pixels
- Quarter screen: long edge 400 pixels
- Headshot: long edge 300 pixels
- Thumbnail: long edge 150 pixels
Also, you may have heard that web photos resolution should be set at 72. While that is helpful, you may not even see resolution settings depending what photo resizing process you use.
Resize & Minimize
Tools We Use
There are a ton of tools to help you get an image web ready. In our office, we primarily use:
- Adobe Photoshop
- JPEGmini
- If we’re working with PNG files instead of JPG files, we’ll use tinypng or Squash.
One Image: Reduce an Image Size in Photoshop (Legacy)
- Open in Photoshop
- Go to Image: Image Size
- Change resolution to 72 if that doesn’t make the width and height too small.
- Set width and height to the max needed.
- Go to File: Save As to save a copy without replacing the original.
More than 1 Image: Reduce an Image Size in Photoshop (CC Export)
- Open in Photoshop
- Go to File: Export: Export As
- Set image size width and height to the max needed
- Export All
- Select location and click “Export”
More than 1 Image: Reduce an Image Size in Photoshop (CC Script)
- Open Photoshop
- Go to File: Scripts: Image Processor
- Select the file where your images are currently
- Set image size width and height to the max needed
- Select where you want the new files to be saved
- Click “Run”
Minimize File Size
Run images through JPEG mini, tinypng, Squash, etc to strip off other unnecessary bits of the image file without compromising the image quality.
Upload Photos to Your Site
Now your image file sizes have been optimized for web and are ready to be added to your website! You can be pleased that your website visitors don’t have to wait for excessively large images to load and also know that you did your part to help with your website’s search engine optimization.
Need instructions using another tool to minimize photo files?
Let us know what tools you have available and we’ll try to get a tutorial up for you!
