Skip to main content

How to Optimize Images for Your Website

Optimized images can speed up your website and provide visitors with a better experience. Read this to learn how to optimize images for your site.

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.

MailChimp Longform -15 graphic -1-01

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.

MailChimp Longform -15 graphic -2-01

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.

MailChimp Longform -15 graphic -3-01

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.

Tools for image optimization

If you were to attempt image optimization for web pages one by one, it would require you to know advanced code. Tools for image optimization automate the process. It also stops you from having to delete and reupload dozens or even hundreds of images or graphic files.

Instead of doing all the hard work of changing the image file types and sizes, the plugins do it for you. Some examples include LazyLoad, TinyPNG, or Shortpixel. However, that depends on the blog platform you use.

In many cases, this is all you have to do to automatically compress your images:

  1. Install the image compression plugin.
  2. Adjust the settings to meet your compression standards.
  3. Let the compressor do its work.
  4. Manually set unmodified images for future compression.

The fourth step you see above refers to times when an image compression plugin doesn’t recognize uploaded images. It depends on the plugin you use, but it might not detect images you haven’t modified. However, you do have the option of manually modifying that image with some image compression plugins.

Web image optimization file types

As we mentioned above, there are several file types to choose from when optimizing images for the web. Common web image optimization file types include JPG (JPEG), PNG, GIF, and, in some cases, SVG.

Another one you may notice is the Web Picture Format (.webp), which has become increasingly useful for universalizing images across all device screens. Some versions of Chrome, Android, Microsoft Edge, and Opera or Firefox support it.

Wrapping up

When learning how to optimize images for web pages, remember this: you can reduce their size while maintaining as close to the original quality as possible.

It’s possible to resize all your images automatically using plugins. The best results come when you use the tools that know how to respond to your file types. As long as you are pleased with the image you started with, optimizing them for web display shouldn’t be too hard.

Frequently asked questions

How do I compress images for my website?

To compress images for your website, you can resize the image to the ideal resolution before you upload it to your website. Otherwise, you can use an automated plugin to do it for you. It’s best to install the plugin to your website or blog before you add new images, so they compress automatically. You can manually reduce image sizes after you upload them and before you have installed a compression plugin. This may be necessary only if the plugin doesn’t detect some older files.

How do I optimize a JPEG for the web?

Compressing JPEG images can reduce page load times. It usually also helps you retain the quality of the original image in the process. However, you have to start with a high-quality image in the first place for the best results.

To quickly compress a JPEG for the web, consider using image optimization tools and plugins. For example, you can use Mailchimp’s content studio and photo editor to edit, resize, and optimize various types of images.

What is the ideal image size for a website?

The ideal image size varies depending on what you need it for. For instance, the ideal logo size is typically about 100 pixels wide and adjusts its width to the screen. The ideal header background image size is at least 1024 pixels, but can be as wide as 2500 pixels.

Keep in mind this doesn’t count the quality level after compression. However, automatic compressors will help you achieve the best quality with the least amount of effort.

Share This Article