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.
You can see how big of 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.
But before you add those perfect images to your website, you'll need to be sure the images are optimized.
What Does Image Optimization Mean?
Shopify explains this 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."
Why Should I Care?
You want your site to load fast, and so do your customers. Photos are the #1 problem that slows down a site. While photos are your greatest asset, they can also be a daunting enemy when it comes to site speed, user experience, and ultimately, your SEO.
Slow loads, broken images, cluttered design -- these all lead to poor website user experiences. And that’s not who you are, is it?
That's really the goal of image optimization: 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?
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. Optimized website images are critical for your website's page speed. Large photos can slow down your site.
And clunky images don't just slow down your site; they can impact your SEO. In 2019, Google's State of the Union address confirmed that it is looking at images when listing search results. Google also offers image-heavy advertising options such as Gallery Ads. Images are critical. Image ads have higher click-through rates than text ads.
Optimized images can greatly improve website performance, give users a better experience, and help your advertising campaigns. But how exactly do you do it?
Here are some answers to frequently asked questions about website image optimization.
What Image File Types Should I Use On My Website?
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.
GIF file types are typically used for animated or moving graphics. We generally advise clients to substitute MP4 for GIFs for the best page speed.
How Do I Optimize my Images?
Now, let's get to the heart of the matter: how to make your photos work for the web.
First, decide how you want to use the image.
Is it good enough to be the lead (the biggest) picture? Or will you use it as a supporting picture within the text?
- Large Images: Typically, if you're using a background image, the keep the max size about 1920 x 1080 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.
Second, resize Your image to make sure your image is the right size for the job.
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:
These are all very simple to use. Once complete, you can download your newly-optimized images. You might not notice much of a difference, but the new file size has been greatly compressed and is now ready for the web.
Then you ready to easily upload them to your website in LRS Antilles Content Manager.
Watch how easy it is to upload images using LRS Antilles Content Manager:
Take the Time to Optimize Website Images
So while it’s tempting to start designing your page, take some time and collect all the photos and images you want, and size them appropriately for a professionally designed webpage.
In LRS Antilles, we strongly recommend to our clients that they optimize their photos before they upload them to their webpages. And don't forget to add alt text.
Optimize your images and your website will load faster, look just as good, and your users will thank you - by becoming frequent customers.