Many new website owners wonder why their website seems to load slower and slower. A common culprit is overly large image sizes. Yes, a webpage probably weighs less than 10k, but the photos it contains are often over 1,000k (1MB), and thus the photos are the main reason most web pages run slowly. When your site is lighter, loading speed gets much better. If your site took several seconds to load before optimizing your images, these could now become milliseconds.
Research shows that larger image sizes result in increased product sales, therefore, websites are constantly increasing image sizes. Yet website users expect the websites they browse to load just as fast–even though the images on the websites continue to get larger. As website owners we can “optimize” our images, that is compress or “squeeze” them to have a lower weight but still look good–and the webpage they are on to still load,” show up in our user’s browser,” super fast.
There are different ways to “optimize” your images that I’ll explain here:
(1) Edit Your Photos to the Proper Size Before Uploading to Your Website
Photos taken by your iPhone or camera average around 5,000 pixels (px) in width. If these photos are uploaded to a webpage they will make your webpage really slow; 5,000 px width is WAY too big for a website image! Your WordPress theme or website template will have a ideal size for images depending on where the image is being used. For example, the main image illustrating a blog post will usually be fairly large, but smaller than 5,000 pixels, usually around 1,500 px wide. Reducing all your images to the proper size your theme/template calls for will save you the most weight on your website and make your website the fastest. The most popular and best image editing software professionals use is Photoshop, but it costs a lot of money. There is a free alternative called Canva where you can easily resize your images to be the proper size. You don’t need to have a computer with image-editing software, you can use websites to edit your photos as well. Also you might like: https://reduceimages.com/, http://compressimage.toolur.com/, and https://kraken.io/web-interface.
A lot also depends on your original images. If you use quality images like the free images from Unsplash.com, then compression will be much less noticeable. If you are using photos you snapped in less-than-ideal setting on your smartphone, of course, the lower quality will be evident after compression as well. Don’t blame the compression for your mediocre photos, either take better photos or use high-quality free images. For great high-quality free website images you usually have to provide a little “attribution” or acknowledgment/thank you to the photographer; get great website images here: https://blog.snappa.com/free-stock-photos/.
After you have edited your high-quality website image to be the proper size you can further reduce file weight be lowering the quality of the image by compressing it. I can hear you know going “What! make my photos uglier?!” No, honestly I do not want you to make your photos uglier! It is almost impossible to tell if your image is compressed a bit. And YOU can control how much you “compress” and reduce the weight of each photo from 1% to 100%. Therefore, you might want to compress your main image on your homepage by 70% and see if hardly anyone can even tell. For other images that are smaller and on less important pages, you can compress by 40% and see if there is much difference. Both Photoshop, Canva and other image editors allow you to compress images one at a time for the most control. Free online image editors that also let you compress include: https://kraken.io/web-interface, https://reduceimages.com/, and http://compressimage.toolur.com/.
(4) Automatic Compression
You might not want to optimize every single image, you might want to use a plugin to your WordPress website to automatically compress every image automatically. There are a number of services that work as plugins to WordPress that have free plans for individuals and small businesses with modest needs (bigger websites you need to pay). Try out ShortPixel, WP SmushIt and Imagify and see which has the terms that work best for your needs.
Be sure to measure your website speed before and after optimizing your images so you can know how much faster your website is running! Have fun — and meet your website goals even faster!