Content is king, as the saying goes. Start with well-written content, and you can see huge improvements in the amount of traffic your website starts to draw. But content isn’t simply about words; you can increase the effectiveness of your content by putting it together with a good website design and high-quality images. If a picture is worth a thousand words, then every image you upload to your website could be just as effective as a blog post.
It isn’t enough to just grab any old photo and throw it on your site; you need to be selective with the images you use. In short, you need to optimize your images for the web. In this quick guide, we’ll show you how.
Why Optimize My Images?
Images can be hard to overlook (pun intended), but they play an outsized role in the overall impression of your website. Images are often one of the first things people see on your site, and they can leave a lasting impression – either good or bad.
Images also have a huge impact on the design and function of a site. High-quality images can be quite large, requiring extra time to load and slowing down a visitor’s experience. Relying solely on lower-quality images can keep your site quick to load, but also lead to a “cheap” feel.
What is Web Image Optimization?
Optimizing your images tries to split the difference between large, high-quality images and small, low-quality ones, making sure that every image used on your site is the ideal size and format.
Image optimization can also involve tweaking image captions and tags to make them more SEO-friendly.
4 Steps to Optimize Web Images
Optimizing your images doesn’t have to be terribly complicated; there aren’t a huge number of steps to follow. We’ve narrowed it down to four basic steps, and you’ll find plenty of tools to help you with each. We’ve included a list of the most useful tools at the end of the article.
Choose Your Images Carefully
It should go without saying but don’t create a highly-professional website for your new business, and then decide to use a photo you took on your cellphone as one of the first images visitors would see.
Start with a professional, well-edited photo. It might be worth hiring a photographer if you’re setting up a site for a new business or brick-and-mortar store. If you don’t have immediate access to professional photos, choose suitable stock images from sites such as (some free, some not):
Go with professional stock photos over low-quality images; you’ll get the same high-quality look, and there are thousands of photos available for free.
Select the Correct Format
Once you’ve selected the right image, you now need to get it into the right format. There are three commonly-used file types for images: JPEG, PNG, and GIF.
You’re probably already familiar with GIFs – looped images or videos used to great effect for comedic purposes or to illustrate a particular step in a process. GIF images are best used sparingly, and the size can vary depending on the source of the original images.
JPEG and PNG files are more commonly used for “every day” web images. JPEG files are smaller and easily resized without sacrificing quality. For the majority of purposes, the JPEG format is probably your best choice.
However, PNG files have two major advantages over JPEGs; they can be of much higher quality, and they work as a transparent background. Both of those advantages make PNGs ideal for logos and mastheads, where the smaller size of the picture makes the increased file size worth it.
Resize and Compress
Resizing and image compression is a matter of looking for the perfect balance between a high-quality image and a small file. Compressing does just what it sounds like – takes the original file and makes it smaller, “compressing” the data into a tinier package. The difficulty is that too much compression results in a grainy, low-quality photo. But if you don’t compress it enough, your images will still be too big and slow down your website.
You can resize your images manually or any number of free photo editing apps or programs. Most of these programs will provide a “lossless” or “lossy” option when you optimize your images. “Lossy” prioritizes reducing the size of the image, typically by around 80%. If that sacrifices quality, so bit it. “Lossless” optimizing tries to maintain the quality of the images, even if that means keeping a slightly larger file size.
If you’re looking for a good file compression program, consider one of these:
At the end of this step, your image will be all ready to go on your website. It’ll be a well-chosen image in the correct format, compressed and sized to deliver good quality with minimal file size.
Rename (and Tag!)
Google and other search engines do actually read your image tags and descriptions. Avoid uploading a string of images with nothing but letters and numbers in the description; use names that make sense and actually describe the image.
For products, be sure to include the product name in the description; “wooden-chair-back-1” would be a good example. It will help you find and organize images on your computer, and also help Google’s bots index your site more easily.
Tips and Tricks to Help Optimize Images for Web
Now that you know the basics, here are some extra tips to help you make the process as easy as possible.
- Invest in a good photo editing tool.
Invest doesn’t mean that you have to spend a lot of money; you could rely on any number of free photo editing tools, or you could shell out for a more feature-laden program like Adobe Photoshop.
- Edit before uploading
If you use a hosting website like WordPress, don’t upload your raw photos and then edit down in the app; you’ll take up a lot of web hosting storage on the raw images. Process your photos before you upload them to your hosting service or straight to your website.
- Standardize your process
Optimizing your web images doesn’t take a lot of extra time or effort, but it helps to have a set process. Find an editing program you like, learn how to compress your images, and process everything before you’re ready to upload them.
Getting into the habit of standardizing your images will improve your website design and make it more SEO friendly. It’s not a complicated process, and after you figure out your own web optimization workflow you’ll have images that are fully optimized and ready to give you a leg up on any competitors.