5 min read
The Ultimate Guide to Optimizing Images for the Web
When it comes to images on the internet, bigger isn’t always better.
It’s a bit of a Goldilocks conundrum. Images that are too big can slow down your site because they take so long to load. Meanwhile, an image that’s too small will appear pixelated and unprofessional. That’s why iStock offers different download sizes of our images. You can get the best size for your website or blog right from the start.
Unfortunately, this isn’t always an option. Sometimes what you have is all there is, but that doesn’t mean you’re going to be stuck slowing down your site. If you can’t get any other version of your image, you can use resizing and compression tools to optimize it.
Why Is It Important to Optimize Images For The Web?
When your images are the right size, your site runs faster and looks better. Images that aren’t optimized for the web can cause slow site load speeds. They can also hurt Google rankings, take up too much of your site’s storage and bandwidth, and more.
Page Load Time
The biggest problem with large image files is that they slow your website down. We’ve all been to websites where the text loaded immediately but images loaded at a glacial pace. That’s likely because the owner of that site used images that were way too big.
Just be happy you aren’t a website designer from the ’90s. Back then, picking the exact right size for an image was imperative; either an image was the correct size, or it might be so big it flowed off the page. Some people who ran websites had the skills to make a photo look smaller than it was. They did this by using a coding language called HTML, but not everyone who ran a website was savvy enough to do so.
Modern website templates often resize images for you regardless of what you upload. They do this so you don’t have to go through the process of adjusting each photo you upload, and because so many websites today are responsive. That means the website will look good on desktop and mobile. An image size that looks good on a computer might not look as good on a phone.
For example, a website might have an image that’s 1280x150px (pixels). That long, skinny banner looks good on a desktop, but wouldn’t look as good on mobile. A responsive site might resize that image so it looks better on a reader’s phone.
Even with this automatic resizing, large images take longer to load. This is because big images take longer to load in general. Plus, the website has to run more code to resize the image for you. This doesn’t mean you have to resize every image to exact sizes. Getting an image that’s somewhere within the ballpark will be fine.
Search Engine Optimization
It might surprise you to learn that large images can keep your site from ranking well on Google. The reason has to do with site load time. Google dings slower websites in their ranking algorithm. It’s not as major a ranking factor as other things, such as strong content, but it is worth taking into consideration.
Site Storage And Bandwidth
Most website hosts give you and your website a specific amount of storage each month. Everything from videos to copy to images takes up site storage space. If you’re uploading large images to your website, that’s taking up a large amount of space. And if you need to upgrade your storage or bandwidth to accommodate those images, it’s costing you money.
Professional Appearance
We’ve already talked about the downsides of using an image that’s too big, but what about images that are too small? The good news is they won’t slow down your site or use up all your site storage. The bad news is that images that are too small could appear pixelated or grainy. This can make even a well-designed site look messy and unprofessional.
All that means is you should pick an image that’s large enough for your intended use. If different download sizes aren’t offered, it might be best to find a different image to use that is large enough.
What Is a Good Image Size For Websites?
According to the University of Washington’s web design basics, you should use images that work with popular monitor sizes. Monitors come in a variety of sizes and resolutions, but the most common of which is 1280x1024px. That means you shouldn’t try to upload images larger than that to your website.
The longer answer is that there isn’t a one-size-fits-all answer to the best image size for your website. In most cases, you should see what your website theme recommends.
Whoever built your website built it with certain image sizes in mind. For example, thumbnails on your blog will likely be smaller images, such as 180x180px. Meanwhile, images on your homepage slider will be larger. The exact sizes of these will vary, but images will seldom be larger than 1280x1024px.
You also might want to optimize your featured image for social sharing. For example, when someone shares a link to a blog post on Facebook, Facebook crops that featured image to 1200x628px. If you use that exact size for your featured images on your blog, your Facebook shares will look perfect.
If you use an image larger than 1200x628px, Facebook will crop your image without any input from you. This might result in awkward cropping, such as cut off text or faces when it’s shared on social.
Meanwhile, images on Pinterest look better when they have a longer profile. If your ultimate goal is to get your Pinterest shares, images sized between 735x1102px and 600x1260px will give you the best results.
How To Resize An Image
There are dozens of free and paid tools that can help you resize an image. These include iStock’s photo editor tool, Microsoft Paint, and Preview on a Mac.
The benefit of using a tool like the iStock photo editor is that it offers presets for popular image sizes, including social media sizes.
To resize an image in the iStock photo editor, all you need to do is upload your chosen iStock photo into our tool (or upload your own). From there, you can select a popular size and resolution, or choose your own. If you want, you can even add text or a filter before downloading the image for your website or blog. Read our post about standard photo sizes to learn more about resizing images.
Optimization Through Image Compression
There’s more than one way to make an image file size smaller. We’ve discussed resizing, but you also might want to consider image compression.
What Is Image Compression?
Image compression removes some of the unnecessary data within an image. This makes the file size smaller, which helps it load faster. Some of that data includes metadata and color profiles. It’s unlikely that you need that data, so it’s fine to remove it. Compression might also reduce the resolution to a degree, depending on the type.
There are two types of compression: lossy compression and lossless compression. Lossy compression means that the removed data is gone forever, including lost resolution. Lossless compression doesn’t reduce any image resolution. The trade-off is that lossy compression reduces file size more than lossless compression.
How To Compress An Image
You can compress images via photo editing computer programs, websites, and plugins. The photo editing tools that come with your computer or the paid ones designers use all have different compression methods. With most of these tools, it’s as simple as selecting “save to web” when saving an image.
Websites are an increasingly popular option for compressing photos. Do they work? Yes, they often do. But, some sites are more trustworthy than others. We would never recommend using one of these sites to compress anything that contains sensitive data.
Plugins are another popular option for compressing images, especially for WordPress users.
How Do I Optimize Images For WordPress?
The best ways to optimize images for WordPress are by choosing the right image file type and size. You may also want to compress your image for more optimization.
Choosing The Right File Type
The most common image file types for websites are JPG, PNG, and GIF files.
GIFs are great if you want an image with a simple animation. But they’re unpopular for static images because the format itself only uses 256 colors. In other words, a GIF won’t give you a beautiful, high-resolution image. It will increase the load time on your website—GIFs are large files.
JPEGs offer a lot more resolution than GIFs at a smaller size. They’re a lossy format that supports compression well. That means you can maintain a sharp image while reducing file size. That makes JPEGs great for websites and blogs.
A PNG is a lossless format that supports transparency and quality. As a result, PNGs are often larger image files than JPEGs, but less than a GIF. They also have a higher resolution than a GIF.
With that knowledge, JPEGs are often the best choice for a website when you’re looking to keep your file size low. If you need any transparency in your image (such as a logo overlay), a PNG is a solid choice as well.
Using A WordPress Plugin For Compression
A popular way of keeping image file sizes manageable on WordPress is by using plugins. The most popular WordPress image optimization plugins include EWWW Image Optimizer, WP Smush, TinyPNG Compress JPG & PNG Images, and Imagify.
Most of these plugins work by compressing the images. That means you’ll still want to resize any large images, because these plugins won’t do that for you.
What Is The Best Tool To Optimize Images For The Web?
The best tool to optimize images for the web is a tool that is within your budget, works with your computer, is secure, and offers a variety of easy-to-use options for resizing images. We’d be remiss to not mention our iStock photo editor, a free tool that integrates with iStock Photos.
If you’re ready to start optimizing images for your blog, we recommend starting with our simple and effective iStock photo editor. With it, you can resize any of our photos (or your own) for popular dimensions or your dimensions of choice. You can even add a filter or text to your images.
Was this article helpful?
More Resources for You
- 11 min read