Want to know what makes a website stand out more than any other? Imagery — eye-catching imagery — that is optimized. Beautiful images can really add some pop to your website and keep people on your site a lot longer. Most of us are visual learners, so photos give context to your information.
But before you add those perfect images to your website, you'll need to be sure the images are optimized.
Why? Well, according to Google, images are usually the largest files being downloaded on any webpage, which increases how long it takes for a web browser to launch your page. Photos and images also take up the most space visually.
In May 2019, Google's State of the Union address confirmed that it is looking at images when listing search results. Google also is introducing new, image-heavy advertising options such as Gallery Ads.
Optimized images can greatly improve website performance and give users a better experience and help your advertising campaigns. Image ads have higher click-through rates over text ads.
If you're lucky enough to have a professional photographer or designer on staff, he or she will know how to optimize images for your website. But if you're on your own, let us help you.
I think Shopify explains this perfectly in the most basic way: "Image optimization is about reducing the file size of your images as much as possible without sacrificing quality so that your page load times remain low." In simplest terms: make the photos better.
That's really the goal: decreasing page load times. A slimmed-down image file equals faster loading time. Lower page load times greatly improve user experience. A good user experience increases the likelihood that the user sticks around on your website much, much longer — and that is the ultimate goal, right?
You can see how big a role images play in your website. They're not just window dressing. They are a powerful tool to keep users interested in your website — and make your site more attractive to show in search engine results. They should be used with care and purpose. Now, let's look closer at the details.
The truth is, all image file types are not created equal. Some types work better on the web than others.
This doesn't mean you are locked into using one type for the web. Every file type can serve a specific purpose and sometimes offer a better solution, so you'll just want to make sure you use them appropriately.
Let's take a look at a few different image file types. These include .jpg, .png, .gif and .svg.
So what file types should you use and when?
Generally speaking, JPG should be used for photos. JPGs tend to load the quickest and will and should be used most of the time.
Erik J., a web developer here at LRS Web Solutions, notes that we generally advise using JPG for images that are meant to be loaded quickly. And don't forget to keep the image size within normal dimensions.
PNG images sometimes contain transparent backgrounds and are usually used for custom graphics, screenshots, and logos.
SVG files are also used for custom graphics, icons, and logos, but these file types scale to a variety of sizes without losing quality.
Then there's everyone's favorite file type, the GIF. These file types are typically used for animated or moving graphics. We generally advise clients substitute MP4 for GIFs for the best page speed.
Now, let's get to the heart of the matter: how to make your photos work for the web.
Large Images: Typically, if you're using a background image, the image shouldn't be any larger than 1920x1080 pixels. This will make sure the image scales nicely across all screen sizes.
Smaller Images: If you are inserting images as content within the copy of your website, a good rule of thumb is somewhere around 500-650 pixels wide.
Once you've decided how big you want the photo, resize it and consider other touch-ups using an image editor.
Adobe Photoshop has always been the preferred image editor professionals use to create and modify photographs and images. However, if you don’t have access to this (or don't know how to use this complex software,) numerous free, online alternatives exist to help you quickly and easily modify your images. Some of our go-to image optimizer sites include:
To begin, simply upload your images to these sites and run them through the optimizer. Once complete, you can download your newly optimized images and then easily upload them to your website in LRS Antilles Content Manager.
Upon looking at your images at first glance, you probably won't notice much of a difference, but if you look at the new file size, you'll notice that it has been greatly compressed and is now ready for the web.
Optimize your images and your website will load faster, look just as good, and your users will thank you - by becoming a frequent customer.
Learn More: Alt Text for Images: A Beginner's Guide
Want to stay up-to-date on the latest with LRS Web Solutions? Subscribe to our blog.