Here are some general best practices when it comes down to how to optimize images for web: If using a WordPress plugin, use one that compresses and optimizes images externally on their servers. Use vector images whenever possible alongside your PNGs and JPGs Use a CDN to serve up. Upload your file to the image compressor. It can be an image, document or even a video. Select an image format from the drop-down list. For compression, we offer PNG and JPG.
Compressing an image for the web means reducing its file size: this is achieved by minimizing the size in bytes of the image file without any quality loss. When you compress an image for the web, you use a tool or app to make the file size smaller. File size decreases by using a plugin or a script, removing image information, or otherwise reformatting the image. What is File Size? The overall goal of image compression is to reduce the file size to avoid weighing down your web page.
Make your site faster and easier to use by optimizing images. Learn how to resize images for web use and discover the tools you need to make it happen.
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.
The Main Components of File Size
Why would your image files take a long time to load? The primary reason is your images' file sizes. 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:
How To Compress Photos For Email
- 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×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, from images and text to animations and navigation menus, 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 editor. 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 are 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:
- 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. 53% of mobile users will close your site if it doesn't load in three seconds.
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. - 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 are 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. You can also try our free image resizer. The image resizer can be your shortcut in resizing your images and photos on the fly.
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 are 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 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.
Compress Images For Website
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×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, and even higher according to some blogs. You should 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. 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.
2. Shutterstock Editor
Along with many features that let you create designs for marketing materials, presentations, and more, Shutterstock Editor enables you to resize and crop images to reduce the file size. Simply upload your image or choose one from the Shutterstock collection to download. Change the Canvas size, and when you're ready to download your image, select the file size along with the DPI.
3. 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
4. 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.
5. 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
Why Is Page Speed Important for SEO?
Your website's page speed is essential for two main reasons:
- 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. 53% of mobile users will close your site if it doesn't load in three seconds.
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. - 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 are 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. You can also try our free image resizer. The image resizer can be your shortcut in resizing your images and photos on the fly.
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 are 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 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.
Compress Images For Website
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×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, and even higher according to some blogs. You should 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. 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.
2. Shutterstock Editor
Along with many features that let you create designs for marketing materials, presentations, and more, Shutterstock Editor enables you to resize and crop images to reduce the file size. Simply upload your image or choose one from the Shutterstock collection to download. Change the Canvas size, and when you're ready to download your image, select the file size along with the DPI.
3. 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
4. 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.
5. 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
6. 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.
7. 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 is smaller than how it will display. If an image displays at 500×500 pixels on your website, don't compress it to 100×100 pixels. When you download images from Shutterstock Editor, set them to 72 DPI to avoid this issue.
- 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.
Cover image via jossnat.
Interested in improving your image and photo knowledge? Look into these essential articles:
