VisionAmp Web Design
100 Bomber Blvd.
Mountain Home, Arkansas 72653
870.580.0909

IMAGE SIZE MATTERS - Website Optimization Tip 3 of 4

David Jackson | Optimization Tips | November 11, 2019

Recently, Google realized if your customers are regularly frustrated with how long it takes for websites to load, they will probably take their online searches to one of your competitors. This decision has had a huge effect on how VisionAmp builds websites. We want our client’s webpages to load quickly, improving the customer’s experience when searching for your 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. If you’re a do-it-yourselfer, here are some helpful tips:

How To Load Photos:

  1. Get the photo

  2. Resize it for web

  3. Run it through a minimizing tool

  4. Log into website CMS

  5. 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 its 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. Remember: resize and minimize!

Tools We Use

There are a ton of tools to help you get an image web ready. In our office, we primarily use:

One Image: Reduce an Image Size in Photoshop (Legacy)

  1. Open in Photoshop

  2. Go to Image: Image Size

  3. Change resolution to 72 if that doesn’t make the width and height too small.

  4. Set width and height to the max needed.

  5. 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)

  1. Open in Photoshop

  2. Go to File: Export: Export As

  3. Set image size width and height to the max needed

  4. Export All

  5. Select location and click “Export”

More than 1 Image: Reduce an Image Size in Photoshop (CC Script)

  1. Open Photoshop

  2. Go to File: Scripts: Image Processor

  3. Select the file where your images are currently

  4. Set image size width and height to the max needed

  5. Select where you want the new files to be saved

  6. 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. Here at VisionAmp, many of our websites are built to allow clients to upload photos based on certain parameters, which helps to keep your site current and fresh.

WELL-OILED MACHINE


At VisionAmp we strive to stay on the cutting-edge of technology. This includes having the ability to maximize our customer’s websites by not only building them to meet their specific needs, but to do so in such a way that users on the other end of the computer experience a fast-response, quick-loading, “well-oiled” website. Let our professionals custom build one for you. Give us a call today!