Imagine that a website visitor has just seen your new promotion. They’ve been so enticed by it that they decided to check out the offering that you’re selling. Then, sadly, they can’t get the shopping cart page to load and finish their purchase. What just happened?
Many issues can lead to page loading issues. For instance, you may not have enough online storage space for your site to begin with. It also may not have as big of a memory cache as it needs.
But, of all the mistakes you can make when creating a website, failing to optimize images for web pages can be one of the most problematic. Failing to properly optimize images for the web can slow your website down and, in turn, lead to reduced traffic and lost sales opportunities. Below, we explain how to optimize images for the web so that you can build a website that gets results.
- What is image optimization?
- Why is it important to optimize images for the web?
- How to optimize images for the web
- Tools for image optimization
- Web image optimization file types
- Wrapping up
What is image optimization?
About 70% of people report that web page loading speed affects their willingness to make an online purchase. Additionally, about 45% of these people will not buy from a website if the page loads slower than they expected it would.
These statistics underscore the importance of web image optimization. If you haven’t taken steps to make sure your pages load fast enough, you’re probably lucky a shopper has even made it to the shopping cart checkout page. Oftentimes, this program starts when they first arrive at your site's home page. You can prevent this with website image optimization.
Image optimization is the act of reducing your image file sizes. However, it also involves not diminishing your image and graphics quality during the “shrinking” (compression) process.
One reason for slow website loading is images that aren’t properly optimized. This means the files are so large that they weigh down the rest of your site and suck up storage space on your website.
Image optimization, on the other hand, resizes the resolution of your on-page images. Image optimization also reduces their file size, so your website server has more room on it. By freeing up storage space on your server, you can decrease page load times on your website, thus making your site easier and more enjoyable to navigate.
Why is it important to optimize images for the web?
Optimizing images for web pages makes your users happy. It also keeps your domain servers running the way they should. Keep in mind that about half of your viewers use mobile phones to look up information online and visit websites, so image optimization can go a long way in optimizing your website for mobile page speed and mobile SEO. Web image optimization can help visitors see your content even on a slow WiFi connection.
Ultimately, optimizing images for the web can help your website in a number of ways. Below, we’ve listed some additional ways in which image optimization for the web can improve your website.
Make pages load faster
One of the top reasons for optimizing images is to make them load faster. Images that aren’t optimized can slow down your website to the point that it’s difficult to navigate and frustrating to use.
Hint: Optimizing images has to do with reducing their resolution size, so they don’t take up too much of your online web storage space. You also can compress images but still maintain the same image quality as the original or only use images and graphics when necessary.
Optimize user experience
When you optimize images for the web, you also optimize the user experience. In other words, you’ll reduce customer frustration. If you don’t want visitors to sit around wondering when the blank, white web space will show text and graphics, it’s time to change the resolution of each image.
Website visitors will appreciate the improved convenience and appearance that comes with faster page loading time. Instead of an error message where all the images should be, they will see the icons and pictures that should be displayed.
Boost SEO
By optimizing images, you can potentially give a boost to SEO for your website. You can also label images with alt tags in order to improve accessibility and optimize SEO. If you use a website builder, you can easily accomplish this when uploading images to a media library.
Media libraries, such as the ones provided by WordPress or Mailchimp, provide text boxes where you can enter alt tags and keywords. These will attach to the image and show up in search engines as long as you have permitted your website to be found on the web.
Minimize storage on your server
Large image, video, or graphics files can slow down website servers. If the media you display on your website exceeds recommended size limits, the page may take too long to load or not load at all.
Storing fewer image files on your server keeps your website running at the speed your visitors expect. After you learn how to optimize images for the web, you can achieve quick page load times.
How to optimize images for the web
It doesn’t take much to learn how to optimize images for the web. Below, we explain how to compress images or your website and go over the basic steps involved when it comes to optimizing images for the web.
Select a file format
You may notice hundreds of different file types out there. Some of the most common include JPEG (or .jpg), PNG, or GIF. But before you follow through with web image optimization, you need to understand the purpose for each file type.
- JPEG – It’s one of the most common web image file types used. That’s because it provides decent quality that takes up less space than a PNG. Some graphics, however, may not always retain their “luster” if you reduce the JPEG (JPG) image file size.
- PNG – This format often works better for reducing image file sizes and retaining quality. It also allows you to use and compress pictures that have a transparent background.
- GIF – A “GIF” file format isn’t particularly preferred for images on the web. It’s more for creating animated graphics videos. The best use of this file type is for demonstration tutorials. Nowadays, the GIF may seem obsolete because you can host compressed MP4, MOV, or WMV files that produce better quality animations than a GIF. On the other hand, the GIF does use less web server space and resources and will not cause slow page loads.
- SVG – This format has become more popular after the need to make graphics respond to a variety of screen sizes. An SVG file scales up and down on all devices, including computers, mobile phones, and tablets, without reducing the quality. SVGs may not display correctly in every browser, though.
Concerning file type, they all compress differently. For instance, JPEG files undergo a "lossy" compression. You'll need a near perfect image to achieve the same quality for this type.
"Lossless" file compression, on the other hand, doesn't reduce file quality when size is reduced. That's often the case when PNG images are compressed. The "lossy" versus "lossless" are some types of compression you need to consider when using plugins for autoresizing. File type plays a part, but the plugin design may affect the final compression outcome too.
Add alt text (the easy way)
Adding “alt” text does more than optimize an image for SEO by using keywords. It also makes a web page more accessible by adding a description to the graphics being viewed.
Alt text provides a way for a sight-impaired person to understand photos and graphics being displayed. It also comes in handy when images don’t display properly in a tutorial guide, as it allows you to still understand the instructions.
The easiest way to add alt text is to fill it in the field provided when uploading an image to an image library. You also can usually upload images to blog posts on most hosting platforms that run blogs. As you’re creating your blog post, you’ll probably notice a field where you can enter the alt text when adding the images.
Add alt text (the hard way)
If your blog or website builder doesn’t have the option to quickly enter alt text and image description, you’ll have to use HTML. You'd either do this in a blog post or page text box or in a file that you would upload to your server from a Notepad file.
Using HTML is a little more advanced than just using a visual blog or website page editor. This requires you to have the code to copy and paste into (or write from scratch) in “text” versus “visual” or “source” mode. If you have no idea what this means, look at this example of what HTML code looks like when adding alt text to an image.
Don’t worry about using this if you’re just starting your website. You can accomplish creating alt text without knowing HTML if you use the easier method described above. Otherwise, you can at least learn the HTML code required to format the image once you upload it to a blog post.
Learning the HTML alt tag code “the hard way” mostly pertains to people who want to learn how to build a website from scratch. In that case, they would learn how to insert it into a notepad file and upload it to their website using an FTP client or when building a website using a code editor.
You probably won’t need to do this if you just get started with building your site. However, you now know it’s an option when optimizing images for the web.
Optimize file dimensions
It’s easier to optimize file dimensions if you haven’t uploaded them to the web yet. In this case, you can save them in your favorite photo editing program as the size you need. This is approximately 1024 pixels wide x 786 pixels high for headers.
Your background images will need to be about 1920 x 1080 pixels for the background. Logo images vary from about 100 to 400 pixels wide, and usually they’re 50 to 100 pixels high. Keep in mind, especially for background images, that the size you can use depends on the image file size.
Compress your images
The website images that may affect your loading times the most include the header and page background images. For the header and page background images, you’ll typically want to use GIF or JPEG compression. Make them the minimum size possible in order to provide your website with the professional appearance you need.
Use image optimization tools and plugins
One way to avoid having to spend countless hours manually optimizing images for the web is to use image optimization tools. These plugins usually come with most major blog platforms, and they resize your images automatically. Image optimization plugins and tools also provide a quick way to add the alt tags. You usually can just select images from the media library you want to compress. This happens in a few clicks and reduces their size while maintaining their quality.