Visitors in 2016 are more impatient than ever and will not often wait while overly large images load. Save your bounce rate, keep your bandwidth down and make everyone happy by optimizing the size and dimensions of your images.
Ideal file size: the WordPress Codex suggests that “large, high quality images should be kept between 100K and 60K”. Sometimes however, I find it difficult to maintain good image quality below 100K.
Ideal file dimensions: your images should be no wider than the width of your site content area. For most WordPress sites, this is going to be about 800px if you have a sidebar. Full-width sliders span the width of the browser window and likely need to be closer to 1600px (some developers even say 1920px).
WordPress has a built-in media optimization function but because the original image file will still reside on your server, it is important to optimize each image before uploading it to your site.
So how do you adjust the file size and image dimensions?
First of all, make a copy of your image. That way if you make a mistake, you can start over with the original.
- With Adobe Photoshop, you can reduce the file size and dimensions in one fell swoop. Click File >> Save for Web & Devices and follow the screenshot below:Optimize to the lowest quality first and if you aren’t happy with the results, re-upload your original image and try the “medium” quality, same dimensions.
- A free online tool is: PicResize.com
Upload your image, resize and save. You can even crop or add special effects to your photos. This requires a little testing to get the image quality right. I find that my final file size is more in the high 100Ks to low 200Ks before I like the final web-ready image. Here’s a screenshot of the optimizing choices:
- If you are happy with your file dimensions but just need a smaller file, try TinyPng.com. They use “smart lossy compression” which decreases the number of colors that are used to render the image. The difference is almost imperceptible to the eye but the file size is generally 60 – 75% smaller.
Here are some compelling reasons to take small image file sizes seriously:
- On a desktop, consumers wait about 3 seconds. On mobile, they will wait 5. That’s it.
- Amazon loses $1.6 billion/year if their pages slow down by 1 second.
- Page load time is a factor in search ranking.
Of course there are many other websites that offer image optimization… If you have one that you love and are willing to share, please contact me with the link and why you like it and I will add it to this post.
What’s the difference between JPGs, GIFs and PNGs?
The three most common file types are JPG, GIF and PNG. Not sure which one to use for which image?
JPG: These are best for photographs as the colors are often gradients. JPGs compress nicely meaning they keep their quality pretty well with small file sizes. If you have a photo with text or another element over the image, a PNG is likely a better format to use. Over time, JPGs will degrade slightly.
GIF: This format is usually used for small images like icons or buttons as these are often created with blocks of color. Another important fact: GIFs don’t support transparencies. Animation is always done with GIFs.
PNG: You have two choices when saving an image in this format: PNG-8 and PNG-24. The PNG-24 will be three times the file size of a PNG-8 but the increased color that it contains is generally well worth it – unless you’re working with a small image that doesn’t have much color variation (like a button!). This is the best choice if you are creating an image with any transparency and is also excellent for images with text.
If you just don’t know what file type to use, check out “GIF, JPG and PNG – What’s the Difference?” on SitePoint. The article was published in 2011 but the facts are still relevant.
Help your SEO efforts by using text in all the right places
Name your images: When you download your photos from your camera to your computer, your images will be given a letter/number based on how you have set your camera. Never upload a photo named “DSC004.jpg”. Use 1-3 words that actually describe the photo. This is one of many ways to use a target keyword. Make it count!
Image Title: After your image is optimized for size and dimensions and you are ready to upload, be sure and include an image title. This is the text that appears when your visitor hovers over the image.
Image Alt Tag: “Alt” refers to the alternative text and is the text that is read to visitors who can’t actually see your site. Alt tags help make your site accessible to more visitors and the search engines include this text in their ranking criteria. You have approximately 100 characters to describe the image and use your keywords. If you are planning on pinning the image on Pinterest, this Alt text will flow into the Pinterest image description field. If you don’t add the Alt text, Pinterest will use whatever you entered in the Image Title.