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. One of the differences between these file types is “lossy” compression vs. “lossless” compression. It’s technical so I won’t address it here.
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.
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.
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!
Image by paul bica