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:
Get the 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).
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!
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)
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”
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.
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!
-Written by David Jackson, VisionAmp Content Specialist
