What is Image Optimization?
Unfortunately, large images equal large files which take up valuable space on your server. Large images also create poor user experiences on your business website for your consumers. Image optimization is the concept of shrinking the size of a file without compromising its quality using script or a plugin. This process speeds up your website’s load time. Images are optimized via one of two methods:
- Via lazy loading on your company website (also known as on-demand loading) in order to display media on said website.
- Images can also be optimized utilizing Photoshop’s “export” options during your company website creation phase.
The Benefits of Image Optimization:
Simply put, consumers have extremely short attention spans, especially when it comes to online shopping. Your website MUST load in two or less seconds and failure to optimize your images could cause serious drag time. It doesn’t matter how impressive your server might be. You can still fail to perform at top speed without proper image optimization. Furthermore, images make up an average of 21% of your web page’s total weight. This means image optimization should take precedence far above fonts and scripts. Image Optimization is crucial as it:
- Eliminates unnecessary data downloads and wait times for your website users.
- Grants your customers the content they seek at a much faster rate.
- Breaks up monotonous paragraphs and texts.
- Adds visual appeal.
- Enhances and eases the type of experience your customers will have when visiting your cyber storefront.
- Improves SEO when combined with a great SEO WordPress plugin.
- Helps your website rank higher in search engine results.
- Helps Google index and crawl your images faster for Google image search.
- Hastens backups.
- Decreases bandwidth usage.
- Frees up server storage space.
The bottom line is that your website’s images are a high dollar asset on the world wide web. That being said, your strengths can also be your weaknesses. While awesome graphics and images offer countless benefits, they can cost you slower loading times and poor site performance. The fact of the matter is that size matters. The higher the resolution, the larger the file, the slower your website! It’s an unfortunate chain of events which could adversely affect your consumers’ user experience with your business, mess with your lead generation and conversion and weaken your bottom line. If your website is running slow, your customers will speed away to your competition for a faster browsing experience. As with most things in life, this is a delicate dance. This is where image optimization comes into play and there is a myriad of things you can do to optimize the sizes of your image files in regards to your business website.
On another note, it’s super important to follow best practices regarding image optimization. The natural result is smaller file sizes and faster loading speeds which will collectively yield a better experience for your business website users. Furthermore, your images are eating away at your valuable server space. Your server is what powers your business website AND, if you utilize a host, it is likely that host will enforce limits on your overall bandwidth, depending upon your plan. You need to consider whether you are using your resources wisely and at what rate you are consuming space. If you exceed your bandwidth limit, you might be financially penalized or risk having your business website shut down. I think it goes without saying that this is bad and you want to take every measure to avoid such drastic consequences. Image optimization allows you to make the most of your storage without exceeding the limitations of your bandwidth restrictions.
Website Image Optimization 101:
Benchmark your site speed:
Run a simple speed test on your site using programs such as Google PageSpeed Insights, GTMetrix, Pingdom Tools or WebPage Test. Any of these options will do the job. All you have to do is type in your URL and a report will be generated reflecting your website performance and speed.
Choose the best image file:
Once you’ve created your website images, you’ll need to select the type of file you’d like to save them as. JPEGs are great for photographs as they offer a higher-quality image in a smaller size file. JPEGs should be exported as “progressive” which allows your users to quickly load a less complex version of the image before they decide they want to load the full resolution version. To export as “progressive” in Photoshop, look under “save for web”. At the end of the day, JPEG is a good choice for photos with complex color, but they don’t work well for images with transparent backgrounds.
PNG is great for icons or flat illustrations which are transparent or lack a great deal of color. If you plan to go this route, you’re going to need the exact image dimensions and save as “PNG-24”. You could even save it as “PNG-8” as long as it does not compromise the quality of your image.
GIFs, popular though they may be, support a mere 256 colors, so you’re going to need to be picky in how you utilize this particular file type.
SVG is a scalable vector format which works well with logos, text, simple images and icons. SVGs are automatically scalable in photo editing tools as well as browsers. Google indexes SVGs in the same manner it indexes JPGs and PNGs which means you don’t need to worry about SEO. In addition, SVGs are usually smaller files than JPGs and PNGs which means you can expect a faster load time.
Once again, size matters. Resize your images BEFORE you export them! This is undoubtedly the simplest way to optimize your images for your website, especially when using DSLR camera images as they can be quite a bit bigger than necessary. Extra pixels absorb more space as they generate larger files. You might be unknowingly slowing your website speed! Recommended file size is 2048 pixels wide and 240 DPI. Also, crop your images in order to decrease the file size BEFORE you upload. If you aren’t using Photoshop or something similar, Windows Paint, Canva and Mac Preview are good options for cropping.
Reduce file sizes and save storage by compressing your images:
Image compression is great for shrinking the file size without compromising image quality. “Lossless” compression ensures the quality remains unphased both pre and post file compression. TinyPNG (smart “lossy” compression which decreases the number of colors used), ImageOptim (free Mac app), JPEGmini (paid option with a free trial) and RIOT (Radical Image Optimization Tool, free Windows app) are just a few image compression tools that work well to accomplish the job.
WordPress plugins automatically optimize images:
Installing an image optimization plugin on your WordPress site is a great way to streamline a lot of these steps. A plugin will automatically resize and compress your images upon upload to WordPress so you don’t have to do it yourself. This means your website’s performance and speed will start off on the right foot. Recommended plugins for WordPress sites are EWWW Image Optimizer Cloud (optimizes upon upload or after upload as needed), Compress JPEG & PNG Images (optimizes JPEGS and PNGS upon upload), Imagify and Kracken.io (optimizes both new and existing images).
Your best bet is to learn how each plugin functions before you select one to install. Be sure your final choice isn’t going to overtax your server!
Try the “Blur Up” method:
This is a fun trick! Even though you might have exhausted all the previous tips, you might still find that you have some large files slowing down your website speed. The “blur up” technique allows you to optimize the load experience in order to make your consumers think your files are loading faster than they actually are. Sneaky, sneaky! Appearance is everything, so if you can appear faster, then this method is for you! Start by loading a lower quality image. In other words, load a smaller version of the image before you go full scale. This allows your users the luxury of actually looking at something rather than a blank screen while they wait for all the details to fully load. Consider consulting your Jacksonville SEO expert who will know exactly how to do this for you!
Lazy loading is where it’s at:
let’s call this the brother of the blur up technique, but not the twin. Lazy loading also gives the impression of faster loading time. Let’s say a consumer lands at the top of your web page, leisurely pursuing your content as they continue to scroll down on the page. Lazy loading is the concept of not loading all images simultaneously. Lazy loading means that images within the browser view will load first while remaining images load as the user scrolls down on each section of the web page. This method is easy to accomplish on WordPress sites utilizing the BJ Lazy load plugin.
Clean your media library:
Media Cleaner is a great program for identifying unused media files. Cleaning out unused media files is a great way to free up space! The Media Cleaner Plugin scans media files for unused files, allowing you the opportunity to delete them. Utilizing a smart trashing system, Media Cleaner moves the deleted files to a trash directory. If you find out after a couple of weeks that a particular media file entry is missing, the smart trashing system allows you to restore the desired file from the trash directory via a simple click.
Conclusion:
Once you’ve completed the above steps in your image optimization journey, consider running an additional site speed test to measure the benefits. Utilization of proper image optimization tools in tandem with optimized workflow will yield better loading speed and website performance, increasing leads and conversions, strengthening your bottom line. We perform complementary image optimization for our managed clients for free. Take a look at our website management packages.
