Make your site faster and easier to use by optimizing images. Learn how to resize images for web use and discover the tools to you need to make it happen.
Cover image via GaudiLab
You’ve heard that images are essential on the web. They keep users engaged and make a website, blog post, banner ad, and more look beautiful. But all those images might actually be harming your website. They can take a long time to load, which not only impacts the user experience, but also your search engine rankings. To beat this, you need to learn how to resize images for the web.
What Is Page Speed?
Page speed is measured 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.
The Importance of Page Speed
Page speed is important 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. On the flip side, a site that loads quickly lets the user consume the content with ease. The better the user experience, the more likely the user is to stay on the site, consuming more content or even making a purchase.
Faster page speed = better Google ranking
Research has shown that Google’s algorithm considers page speed when it’s ranking 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 Improve Your Page Speed
Image via Aleks Orel
If you’re looking to improve your page speed, there are a few best practices to keep load times low without impeding the look and feel of your website.
The easiest and most direct way to help your page speed is to reduce image file size. This is called image compression. While there are a few other ways to minimize page load times, they are a bit more advanced. 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 hear this process referred to as “resizing an image” or “optimizing an image.” It is especially important to resize images for web because it will positively impact page speed.
Images can be one of the heaviest parts 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 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.
How to Resize Images for Web
1. Pick the Right File Format
Before you resize an image for the web, decide if the image is saved 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 and therefore 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.
PNG vs. JPEG resolution. PNG format keeps the shapes and color gradient smooth and crisp, while JPEG format pixelates the image. Logo image via Razvan Ionut Dragomirescu.
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, so naturally the fewer pixels in an image, the smaller the file size will be. This doesn’t mean you should resize all your images to 100 x 100 pixels – they will end up getting stretched with huge 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 what size they are displayed at, then resize your images to be at or a little above this intended display size. This eliminates unnecessary pixels and can cut down on file size in a big way.
Learn more about common image sizes for web.
3. Dial Down the Quality Settings
When you’re saving an image using any image processing application, there’s often 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 in order to minimize file size.
Image via Chendongshan
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 a great choice with high quality and a small file size.
Image via Tania_Wild
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.
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.
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 lets you resize and crop images in order to reduce the file size. Simply upload your image, or choose one from the Shutterstock collection to download, and change the Canvas size. When you’re ready to download your image, you can select the file size along the with DPI.
3. Tiny PNG
Need to compress PNGs? Tiny PNG lets you reduce the file size of both PNGs and JPEGs, so it can be 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.
Many free compression tools will only let you upload JPEGs, but Compressor.io is flexible with other file types like GIFs and SVGs (a web vector format). If you’re using these file types, try this tool to make them smaller and decrease their load time online.
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.
Interested in improving your image and photo knowledge? Look into these essential articles:
Video Tutorial: Understanding the Basics of Lightroom
Basic Photo Editing: How to Use the Crop Tool in Photoshop
A Guide to Common Aspect Ratios, Image Sizes, and Photograph Sizes
Learn How to Customize Canvas Sizes in Shutterstock Editor
The post Why Page Speed Matters: How to Resize Images for the Web appeared first on The Shutterstock Blog.
Read more: shutterstock.com