There is a trend in website design that began to take off a couple of years ago. And that is the use of large, and sometime even full screen featured images, that are widely known as hero images.
I actually really like this trend and have been incorporating it in many of the websites that I have designed over the last few years. You’ve heard the saying, an image speaks a thousand words. And I think hero images can do just that. They can portray in an instant who you are and what you do. They can also depict a feeling, an attitude, a mood, or a culture.
While images can do a great job conveying a message, they can also do a great job slowing down the loading speed of a webpage; which is something that you definitely want to avoid.
So what’s the solution? Image optimization.
Simply put, image optimization is producing the smallest file size for an image without compromising the overall quality of the image. By optimizing your images, you can produce some of the largest byte savings and performance improvements for your website.
Do all images need to be optimized?
Yes! Every image on your website should be properly optimized for web usage.
All it takes is one large file to slow down your website, frustrate visitors, and penalize your website by search engines like Google, Bing, and Yahoo. Statistics show that users will leave a website if it takes more than 3 seconds to load (5 seconds on a mobile device). Amazon even did a study that showed for every 1 second slower their website was, it was an annual loss of 1.6 billion dollars. That’s crazy!
Therefore, always upload files to your website that will load quickly.
How to optimize images
Image optimization is actually a very easy process and not something that you need to be intimidated by or be a reason that you avoid adding/changing images on your website.
There are a number of tools out there (many low cost or free) that can help you through the process. I personally use Photoshop to optimize images because it offers a lot of flexibility. However, in most cases business owners don’t have a Photoshop license and simply want something straightforward to get the job done.
Here is a short video tutorial using a free online program.