We all know that webpages need images. But what you may not know is that you need to optimize images for your site. If you don’t, you’re putting yourself at a disadvantage. Here’s why you need to optimize images, and how to go about doing this.
Why You Should Optimize Images
Pictures, images, videos and interesting designs can all help improve your site. They break the tedium of simply reading through pages of text and can help users better understand what you’re saying. According to research, social media posts also get more shares when they use images.
But too many images, or images that are too big, can have a negative impact on your site’s performance. Anyone who visits your site needs to download the images from the server to their computer. The size and number of your images can impact on your page load time, and if someone has to wait more than a few seconds, there’s a good chance they’ll leave. This could increase your bounce rate, which results in less traffic and fewer conversions.
Google will also be ranking search results based on loading speeds, so for this reason alone, you need to optimize your site’s images.
Images also take up space. Websites with extensive galleries or high-quality images may find they’re paying their hosting company more for additional storage.
But optimizing your images can help. You can edit your images for the web, even if (or especially if) you have a very visual site, like a photography blog. This way your photos will still be a decent quality, without being too large.
How to Optimize Images
The most practical way to get your images the right size is to edit them before you upload them. While you’re cropping, fixing the colors or editing them in any other way, resize your images as well. Photoshop, for example, offers you the option of saving your photo for web and other devices. This will automatically save it as a smaller file.
You can also resize the image dimensions. So if your featured image space is 900px wide, scale your image proportionately down to 900px. After all, there’s no value in loading a bigger image that will waste not only your storage space but also your users’ bandwidth. If you don’t know the exact size, go with 1000px as your standard.
Another option is to scale the image within the media manager in WordPress. Once you’ve uploaded your image, you’ll see it’s size in a sidebar on the right. Simply select Edit Image. You’ll be redirected to a page where you can scale your image according to the size you need. Fill in the required width and the height will adjust automatically.
Alternatively, you can find a plugin or online app to do all this for you. The plus side of this is that you’ll save yourself time. You can find a plugin that removes metadata, or converts the file type. A plugin may also be able to optimize the media files already on your site – very handy if you don’t want to go back and do this all manually.
More Tips for Optimizing Images
There are several other ways you can improve your site’s performance when it comes to using images.
Use thumbnails on your pages, and redirect these to open the full size image in a lightbox, like FooBox. This will decrease the load time for your webpage, and users will only be downloading the image if they click on the thumbnail. You’ll still need to be careful about loading huge images on your site, though, as storage is still a factor. Plus you don’t want the full size image to take too long to load.
You can also use Lazy Loading. This is particularly useful for longer galleries in that it only loads the images on your user’s page that they can see, rather than downloading all the images at once. Have a look at Google’s image search function to get an idea of how it works. Images are loaded as the user scrolls down, saving on load time and bandwidth. FooGallery comes standard with lazy loading, so you don’t need to adjust settings or install anything else.
You can also improve your image SEO by adding in your Captions, Descriptions and Alt Text. You can do this when you add your media.
Optimizing your images can help improve your site’s performance and improve your site’s user experience. While it’s best to optimize images before loading them, there are ways to do this on your site as well. Plus you can use image tools, like FooBox and FooGallery, to help create a better user experience.