WebsiteHowTo.org is a free guide for people who want to create their own website. Since we provide this information for free, we need some kind of support for running this site and keeping it up to date. We earn commission if you purchase something through these referral links in our content: www.bluehost.com We love these services, but we recommend you to also read some other reviews, to come to your own conclusion.

How to optimize images for web

Are you a WordPress website owner who has a lot of images that are making your webpage slow? If yes! Then this article is for you.

Resizing an image to the correct size can be a herculean task for many bloggers and web users.

This article will show you how to optimize images for web, thereby making your web page content stand out and have fast page loading times.

Having low quality images does not only bounce visitors, which affects your website traffic, but it also reduces your rankings for SEO. Hence there needs to be great balance between image quality and image size.

Why should I resize images?

You should resize images to reduce the file size to minimum. This improves the loading time of the webpage. 

If you have lots of images on a webpage, a simple resize could save you multiple megabytes of data which could translate to many seconds saved in loading times. Bear in mind that a typical website visitor wouldn’t like to wait over 2-3 seconds before hitting the back button and going to read another alternative blog. 

So keeping your site light is crucial for great user experience and good SEO rankings.

So in a nutshell you’ll get:

  • a lighter website.
  • a better web page performance.
  • a greater user-experience.
  • an improved SEO optimization.

This should be more than enough to justify the small steps taken with image optimization.

File types

Before we’re talking about optimization and resizing you should have a brief understanding about file types. The difference between saving the same image in JPEG or PNG format can be over a megabyte.

  • JPEG Generally the best format to use with all kinds of images.
  • PNG Best for graphics and images with a transparent background as PNG supports transparency.
  • GIF Used for animated pictures. Usually big in file size and low on quality, so use as few as you can.
  • SVG Great newer format. Use it for icons and logos that need to be super sharp and low on file size. Ask your designer to save the files in SVG format. This doesn’t work with pictures.

How to resize images?

There are many options to resize images with, ranging from softwares like Photoshop to web-based services, including WordPress itself. We’re focusing on the two that we use most of.

Resizing image with WordPress

To resize an image you could use WordPress’s own built in Scale image tool. Log in to your website, select Media from the left sidebar and click on the image you want to resize. 

Under the image is a button called “Edit Image”, click it and another window will open.

On the right hand, there’s a section called Scale Image. Just enter a new width or height  in one of the boxes and the other one will be filled in automatically, keeping the images original aspect ratio. Now there’s only left to hit Scale and you’re done.

Resizing image without WordPress

This option is especially helpful if you have more than one image that you want to resize. We typically use this tool to format all the images before uploading these to WordPress and adding them to an article.

With Bulk Resize Photos you can make all the images in same height, in same width or alternatively use it to make the longest edge of either a portrait or landscape image the same length. If you’re resizeng images with transparent backgrounds, make sure to select expert mode from the bottom of the list to tick “Transparent background”, otherwise you will get white background instead of transparency.

What size should I resize my images to?

This depends largely on the website you’re using the images at. If your website has a template that has a maximum width set for the content, then this should be the maximum size for the images too. There’s no point in keeping the image larger than the page you’re showing it on. 

But if your site has no maximum width set and is one these 100% width full-page type of websites, we generally tend to limit the images to 1920px width, which is Full HD resolution. Full HD is becoming a standard in monitors and laptop screens, so keeping the images at a maximum of 1920px width is future proof.

How to optimize images for web?

Now that we’ve talked about resizing and keeping the file size to minimum that way, there’s another layer of optimization that can save you an additional ~75% of file size.

That’s called optimizing images, which essentially lowers the size without altering the quality at all. How does it do that? There’s a lot of data attached to an image, from locations to dates and so on, that can be removed. Secondly, when re-arranging the file structure and doing some magic, you can remove a lot of unnecessary clutter, which also makes the image a lot smaller in file size.

Optimize an image with TinyPNG

To optimize an image manually, go to TinyPNG and either click on the icon in the center or drag-and-drop your images to the browser window. With TinyPNG you can optimize 20 images for free at a time, which in most cases is enough. Sometimes you’ll have to do it in a few batches, but it’s well worth it. It also has a 5mb per image size limit, but if your images are cropped to our suggestions, you’ll hardly come by any images bigger than 5mb.

What if I want all the pictures in my Media library to be optimized automatically before uploading these? Then use a plugin.

Optimize images with a WordPress plugin

Let’s take a look at a plugin called reSmush.it, this is a WordPress plugin that allows the user to optimize images without losing quality. It can optimize images as soon as they are uploaded to the WordPress site.

TinyPNG has achieved a bit better compression results, but overall you wont notice the difference. Smushit just like TinyPNG compresses the image, removes additional information and saves about 50-75% of additional file size.

Testing your webpage speed improvements

Now that you’ve done all of it, you should test your results with a webpage speed testing tool like Google PageSpeed Insights

Just enter your website URL and click Analyze to see the results. This tool shows you important metrics like loading times and images that have yet to be optimized.