Most photographer’s websites are filled with large images. That’s great. However, the larger the image file, the more it will slow down the page load speed of your website.
Why do you care?
It turns out that over half the websites online take 5 seconds or longer to load the home page. Studies have shown that after only 4 seconds, visitors will get frustrated, click the back button, and leave your website.
Now you’re probably thinking, “my website isn’t slow! I see it every day, and I’d notice.” What you may not realize is that the first time you visited your website, the images were saved on your hard drive, so they aren’t downloaded every time you go visit. To you, your website seems pretty snappy.
Bottom line: the faster your website, the more impressed your visitors, and the less likely they are to get frustrated and click away before it displays.
So how do you use large images while keeping your website “snappy?” That’s where website image optimization comes in.
First you need to start by checking to see if your website’s images are really a problem. There are several free online tools to measure your website’s performance but one of the best is GTmetrix.com. Simply type in your website URL, and in a few moments GTmetrix will give your website a grade.
While there are many things you can do to speed up your website the easiest for photographers to fix is image optimization. Optimizing your images for the web means saving or compiling your images in a web friendly format depending on what the image contains. The vast majority of photographers simply copy images directly from their camera to their website. Instead, here’s what you should do:
Use proper file formats. Website photos from your camera should be saved in the JPG format with as much compression as possible. It is not uncommon for web images to use 60% compression. You should use the GIF or PNG file format for icons, logos, or graphics that aren’t photos. Tools like Photoshop’s “Save for Web & Devices” menu option make this really easy. You can not only see the difference in file size by changing between JPG, GIF or PNG image formats, but you can zoom in and see when too much compression makes your images appear soft or “jaggy.”
Reduce the white space around images. Whitespace looks great, but it makes images larger. Crop out the whitespace, then learn to use your website tools or CSS to create padding in the code.
Save your images to the proper HxW size. If your slideshow uses 800x600px images, don’t let the software downsize your full-res camera images for you. Some websites keep the original images, then resize them each time they are displayed. Instead, save your images to the correct size first, then upload them. Not sure what the optimal file size is? Take a screen grab (PrtSc key in windows) and use your favorite image editing software like Photoshop to draw a selection box around the image in the screen grab. This will give you a good idea of the best size to save your images.