An Internet without pretty pictures would be boring, wouldn’t it? So chances are you’re including graphics on your website to enhance the attractiveness of your pages and posts. Images add visual interest. They illustrate concepts, feelings, locations, products and services. They help keep visitors engaged with a site’s content and coming back for more. There’s a downside, though: As your website matures and the content grows, all those images add up and the bulky file sizes can significantly slow your page load speed.
Why should we optimize website images?
According to GTMetrix, a free online tool that will help keep your site load times fast, “Images hold data other than just the pixels we see on the screen. This data can add unnecessary size to the image, which leads to longer load times as the user waits for the image to download. Optimizing your images for the web means saving or compiling [them] in a web friendly format [which] can reduce your total page load size up to 80%.”
Image size issues: resolution and dimension
There are two issues involved: resolution, which is sharpness and quality of the image, such as 72 dpi vs. 300 dpi, and actual dimensions, such as 200 x 200 pixels.
- Resolution: High definition is the future, but most of us browse the Internet with low-def devices that view images at a low-res 72 pixels. If you post a high resolution 300 pixel photograph, few have the capacity to view that sharp image quality.
- Dimension: Websites should present graphics that are (ideally) the same height and width on the page as they appear in your website’s media library. That means if you insert an image into a post that is 200 x 200 pixels, it should be uploaded as 200 x 200 pixels. If larger, your site has to re-size it every time the page is loaded; that slows page delivery speed.
The dimension-resolution issue is particularly important when you use your own digital images. Whether it’s an iPhone selfie or a beautiful digital photograph from your trip to Italy, un-doctored digital photos are high resolution files. Crop and compress them before you upload.
Image file types
Basic web-friendly graphics file types are .png, .gif, and.jpg. Jpg delivers a larger file size because it offers the best quality. To read more about the pros, cons, and benefits, read Tips for optimizing your web images. One of the differences between these file types is lossy compression vs. lossless compression. It’s technical so I won’t address it here, but if you want to know more this post will explain it.
Tools to resize graphics
Several methods are available to optimize images, both those already on your site and new images you post going forward.
- Offsite tools: PicMonkey and Webresizer are two free online choices that make this process easy.
- Photoshop: If you have Photoshop, use the “save for web” function to compress the file size and reduce the dimensions. The original image in this post was 152KB; I used Photoshop to reduce it to 10KB – quite a savings! Here’s how:
• Go to “File” > “Open” > Browse for image
• If applicable, highlight desired area with crop tool, then choose “Image” > “Crop”
• Then choose “File” > “Save for web” > Cropped image appears
• On the right side of your screen, choose the “Image size” tab > Enter desired pixel width; height will auto-adjust.
• IMPORTANT! Choose “Apply”
• Choose Save > Name file
- Dashboard method: You can edit images in your WordPress Dashboard. Choose Media Library, choose an image, choose edit, resize and save.
- Plugins: Smush It and EWWW Image Optimizer will compress image files you upload to your website going forward. They also offer a “bulk smush” option for images already on your site.
Replace copyrighted images
While we’re discussing website images, this is a great time to review your media library and verify that you have the right to share the images on your site. In case you’re not aware, it’s copyright infringement to grab graphics from the Internet. The images you use should be Creative Commons graphics or those you’ve downloaded from a free imagery site or purchased from stock photo websites. Maria Granovsky’s guest post Copyright Basics For Authors provides details. And FYI, my most current favorite stock photo site is Depositphotos.com. Inexpensive, lots of inventory, and many choices for only 1 or 2 credits.
Better late than never!
I learned about this whole issue late last year and had to play catch up by compressing all the images already on my site (and I’m still working on other elements that can slow page speed!). I’ll report that although it can be time-consuming, it’s not difficult. And don’t think you’re exempt if you have a web developer or someone who maintains your site – it’s a still a good idea to plug your URL into GTMetrix to check.
If you’re like me and you are NOT a techie, you can still handle some aspects of the feedback GTMetrix’s site speed assessment tool provides. Image optimization is a perfect example. FYI, if you click on the “optimize images” line in your GTMetrix results, a list of photos that could benefit from being compressed will appear.
Note: Keep in mind that if your site is newer, GTMetrix may not identify your images as too large; there may not be enough of them to negatively impact your page load speed. You still need to understand optimization. Also, be aware that you can enhance SEO by adding Alt tags and photo captions that will help Google catalogue your graphics. Read about the benefits here.
And if you don’t have a website (gasp!), keep this issue in mind when you share graphics, headshots and/or book cover images for guest posts and web-based book promotions. Reduce your file sizes before you send them on!
Readers, check your website speed on GTMetrix and let us know your results. Do you need to optimize images?
Enjoy this article? Subscribe to my blog and you’ll never miss my weekly posts! Your email address will NOT be sold, shared, or rented – that’s a promise.
Image by paul bica