Images are essential on the web. They keep users engaged and make a website, blog post, banner ad, or email look professional. But, those same images might be harming your site. They can take a long time to load, which negatively impacts the user experience and your search engine rankings.
To beat this, you need to learn how to resize images for the web. Here, we’ll cover all things image resizing, plus ways to do so using various online software programs, like Create.
Let’s get started.
The Main Components of File Size
Why would your image files take a long time to load? The primary reason is your image file size. The larger the files, the more work your web page has to do. The following three factors affect the overall file size of an image:
- Pixel Dimensions: This is how many pixels constitute your image, in length and width. The larger the dimensions are for your image, the more professional your image will look, but the larger the file size will be. If the dimensions for a photograph are 2000 x 1500 pixels, the photo will render beautifully but eat up valuable space.
- File Type: Different types of files take up more space based on their uses, the amount of information they contain, and how the images themselves are rendered, as bitmaps or vector equations. To decide between JPEGs, PNGs, SVGs, or GIFs, read our recommendations for the best image formats for the web.
- Quality: If you maintain the original quality of the image, the file size remains large. Compressing an image involves limiting the file size by reducing the quality or removing hidden elements of an image. Learn more about the factors that affect image display for the web in our image resolution post.
Again, you want to adjust these components so you can keep your page speed as fast as possible.
What Is Page Speed?
We measure page speed by load time or the amount of time it takes for the browser to display all of the content on a page.
When you navigate to a website page, your browser downloads information from that page in units called bytes (e.g., kilobytes, megabytes). Everything on a page—images, text, animations, navigation menus, etc.—takes up a certain amount of disk space measured in bytes.
It makes sense that the more bytes used to make up a web page, the longer the page will take to load.
How to Improve Your Page Speed
The easiest and most direct way to help your page speed is to reduce image file size. This process is called image compression. Anyone can reduce image file sizes using our online photo editing tool, Create. You don’t have to be familiar with design or code to do so.
Image compression is the process of reducing an image file size so that it takes up less space. You might also hear this process referred to as “resizing an image” or “optimizing an image.” It is particularly important to resize images for the web because it will positively impact page speed.
Images can be some of the heaviest components of a website, meaning they’re made up of more bytes and therefore take longer for a browser to download. If you resize images for the web, you can reduce the bytes in an image to make them load faster.
If you want to dive deeper into page speed mechanics, you can also try to reduce redirects, use web fonts, and minimize unnecessary pieces of code, like comments or extra spaces. But again, nothing will get you results like image compression.
Why Is Page Speed Important for SEO?
Your website’s page speed is essential for two main reasons:
1. Faster Page Speed = Better User Experience
Everyone has experienced a website that takes forever to load. It can be infuriating, causing users to exit the site before the content even loads. For this year, the average website load time is two seconds. Any more than that and you may lose your audience.
On the flip side, a site that loads quickly lets the user view your content with ease. The better the user experience, the more likely the user is to stay on the site, reading more content, or even making a purchase.
2. Faster Page Speed = Better Google Ranking
Google’s algorithm considers page speed when it ranks pages for its search engine. If you’re looking to rank higher in search engine results (who isn’t?), you might want to examine your page speed.
How to Resize Images for Web
1. Pick the Right File Format
Before you resize an image for the web, decide if you’re saving the image in the optimal file format. There are three universally accepted file formats for the web.
- JPEG: Use JPEG for photos, screenshots, and most other images. JPEGs use lossy compression, which means they sacrifice image data to reduce file size. You can play around with the quality settings to reach the optimal quality vs. file size.
- PNG: Use PNG for images containing sharp geometric shapes because the curves and lines will render out cleaner than with JPEG. PNGs use lossless compression, meaning they hold onto all of the image data. Their file size will be bigger than other formats.
- GIF: Use GIFs for animations, but avoid this format for still images, as it will limit the number of colors that render out in your image.
Check out our in-depth guide to picking the right file format for even more information.
2. Reduce the Number of Pixels
Each pixel in an image takes a certain number of bytes to encode. The fewer pixels in an image, the smaller the file size will be. This fact doesn’t mean you should resize all your images to 100 x 100 pixels—your images will end up getting stretched with massive loss of quality when you upload them to the web.
However, you can resize images according to the website display size. If you’re uploading images to your website, find out at what size they are displayed and resize your images to be at or a little above this intended display size. Resizing eliminates unnecessary pixels and can cut down on file size significantly.
Learn more here about common image sizes for the web.
3. Dial Down the Quality Settings
When you’re saving an image using an image processing application, often there’s a slider included to control the quality. This slider, usually presented as a 1 to 100 scale (with 100 being original, maximum quality), controls the lossy compression of an image. In other words, it helps you decide how much image data you want to sacrifice to minimize file size.
If you’re working with JPEGs, you’ll find that you can be quite liberal with the slider. There’s often no discernible difference between an image saved at 100% quality and one saved at 60% quality, or even as low as 30%.
In the series of images above, you have to look pretty hard to see the resolution loss, which is most noticeable in the white background. But, in the series below, the banding is quite visible on the low-resolution image. In both cases, the medium-resolution image is an excellent choice with high-quality and small file size.
Decide which images you want to be crisp and clear, like those for landing pages or your homepage, and which ones you can sacrifice quality on, like those on a series of blog posts.
Ideal Image Size for the Web
What is the file size you should aim for when resizing your images? Is there a magic number? Your perfect image size will vary based on the context.
- Full-width images: These images will cover the entire screen from left to right. In terms of pixel dimensions, keep these at 2400 x 1600 pixels.
- Inside-content images: These images could be inside slideshow galleries, call-to-action buttons, or within a blog. For horizontal images, the maximum width should be 1500 pixels. For vertical images, stick to a width of 1000 pixels or less.
Of course, pixel dimensions don’t correlate directly to file size. How much space should your images take up? The golden rule is to upload images no larger than 500 KB, but that size is reserved for arresting hero images and similar use cases. If your blog contains several photos, each one accounts for part of your web page’s total size.
How large should your web page be?
The average size has been climbing steadily for the last few years. The average page weight is now at 2 MB (2.2 MB for desktops), so aim to keep your site below 2 MB. Google’s recommended practices are to keep each page below 500 KB, so you should be compressing images as much as you can without sacrificing quality.
Best Tools for Image Compression
Now that you know a few ways to resize images for the web, you need the tools to make it happen. There are some heavyweight options for image processing, like Adobe Photoshop. But, Photoshop also comes packed with tons of advanced design tools that you might find unnecessary if you’re just looking to crop, resize, and export images for the web.
Instead, you can try some of these easy-to-use image compression tools. . . .
Online Tools
1. Shutterstock’s Image Resizer
Try our very own free image resizer! Simply drop your image into the resizer, select your new size, then click Download. Once you’ve got that new size, however, you’ll likely want to drop into Create for more finessed photo edits. So, consider starting with Create and doing your edits from there.
Speaking of Create. . . .
2. Shutterstock Create
Resize and Crop Canvas
Consider this your very own two-for-one. Inside Create, you can switch up your canvas size to influence the file size. To get there, simply click Canvas > Resize canvas and type in your new specs. Easy!
To crop the canvas instead (which eliminates elements of the design), click Canvas > Crop canvas for an additional way to structure your creation.
Smart Resizer
Create’s Smart Resizer tool makes it oh-so-easy to swap your design for one or multiple digital outputs in just a click.
Available as a premium feature, simply click the Smart resize button, pick your new dimensions (for Instagram, Twitter, Facebook, or what have you), then click Copy & resize to apply. This will keep your new assets handy for when you go to post online.
Download and Share
Here’s the moment we’ve all been waiting for. Click Download from the top-right corner inside Create for JPEG, PNG, or PDF options. Once you select your file type, choose High quality for your resolution, then Download again.
For the benefits of each image type, simply peep this guide next: PNG vs JPG vs PDF: Which File Format Should You Use?
3. Kraken.io
If you have lots of images that you want to compress at once, Kraken.io is the tool for you. Its bulk image compressor allows you to optimize several images at once and download them in a zip format, or tackle each one by one.
4. TinyPNG
Need to compress PNGs? TinyPNG lets you reduce the file size of both PNGs and JPEGs to serve as your one-stop shop for compression. Remember that PNGs have a bigger file size than other extensions, so select this extension carefully. Save it for images with sharp geometric features, like logos.
Desktop Apps
JPEGmini
As a compressor tool, JPEGmini lets you reduce JPEG file sizes quickly. It has a quality slider and a preview function so you can see lossy compression in action.
PNGGauntlet
This Windows tool is, rightly, loved by those that use it. PNGGauntlet achieves the smallest PNG file size possible without reducing quality through OptiPNG, PNGOUT, and DeflOpt techniques.
Mobile Apps
Bulk Image Compressor
Android users can’t do much better than Bulk Image Compressor for ease of use. This efficient, convenient app delivers bulk compression for a batch of photos on the fly.
Photo Compress – Shrink Pics
Owners of iPhones and iPads can use Photo Compress – Shrink Pics to drop the file size of images without fuss. Make room for additional files and optimize your images for sharing on Facebook, Instagram, and Whatsapp without sacrificing quality.
Common Image Resizing Challenges
When you are resizing your image for the web, you may run into these common issues:
- Banding: Banding occurs when you’ve optimized a digital photo too much. You’ll see that your sky has warped from a smooth gradient into literal bands of color. Banding happens when there simply aren’t enough color tones to generate a seamless gradient. Preview features help you avoid banding during image compression.
- Pixelation: No one appreciates a pixelated, grainy image. To avoid this problem, don’t compress any image to a pixel dimension that’s smaller than how it will display. If an image displays at 500 x 500 pixels on your website, don’t compress it to 100 x 100 pixels.
- Strange Color Display: Do your image colors look off when uploaded to your website? First, calibrate your monitor and set the brightness between 90 and 120 cd/m2. Also, check that you are saving files like JPEGs in the correct color space for the web, which is RGB. If you save in CMYK, which is reserved for print, your colors won’t correctly display when uploaded online.
Know that you don’t have to be a graphic design whiz or memorize these tips for a successful design. Simply keep this guide as a rule of thumb and know that editing in Create is a safe bet for achieving the exact image sizes and file types you need.
Now, go prove us right!
License this cover image mockup via Tanya Kalian and Jeffery Edwards.
