Creating an image- or video-heavy website makes for a beautiful design, but giant image files can seriously slow down load times and negatively impact the user experience. Last year, the New York Times released an infographic detailing how many seconds (as well as dollars for data usage) certain publications’ advertising and editorial content takes to load on mobile devices. While advertising content adds lag time to any website, it’s photo-dense websites like the New York Post that take the longest to load.
But this issue isn’t restricted to editorial websites, and certainly isn’t restricted to just mobile users. Think about how many images appear on an e-commerce website with hundreds, or even thousands of products. Or content-rich educational websites with images and graphics to aid in the learning process. This issue is so common, Google has even dedicated an entire section of its Developers website to the topic.
One oversized image may not seem like a big deal, but when this is compounded over and over again, the kilobytes quickly add up. Photo files in the form of JPGs, PNGs, and SVGs are some of the most common offenders, but modern websites are now going well beyond static imagery. Adding GIFs and videos to a website only amplifies the issue, and has the potential to bring your website speed to a screeching halt. Since page load time is one of the many things search engines evaluate as part of their ranking algorithms, it’s in webmasters’ best interests to compress files to keep website speeds fast.
So now that you’ve recognized the issue, how can we limit image file sizes to keep your website light and speedy?
Compressing Your Workflow
To get maximum results from minimized image files, you’ll need to be diligent about compressing all existing photos, GIFs, and videos on your website, as well as all future images that will be added down the road.
Achieving this lightweight zen requires several members of your web team: designers, developers, and any content creators who can add files to your site. Here’s how your team can pitch in at each stage in the compression process:
- Design: Whenever possible, avoid using every hue in the rainbow. Limiting the number of colors used in an static image or GIF will help lower the file size while preserving image quality later on. As a bonus, using monochromatic photos can have greater impact on a webpage when color is used selectively.
- Development: Consider using two different files to ensure the highest quality for retina displays without bogging down users on other screen types.
- Content creators: If you are using stock photos, GIFs, or videos to illustrate a blog post or jazz up a web page, use the compression methods below to minimize the file size before you upload.
Crunching Photo Kilobytes
Whether you have an image that’s been custom-designed by your team, or you’ve found stock images that fit the bill, there is likely room for improvement in the file size. Follow these quick and easy steps to get your images (and web pages) up to speed.
Step 1: Arm Yourself
There are two free tools you’ll need for this process. Download ImageAlpha and ImageOptim to get started, and then select a photo to try them out with. We’ll use the color-dense pizza below as an example. The starting file size of our pizza is 1MB, which is a bit larger than what’s recommend for web use.
Step 2: Reduce Colors
Open up ImageAlpha and drag your image file into the tool. In the top-left corner, you’ll notice a “Colors” slider that you can move to increase or decrease the number of colors included in your file. As you decrease the number of colors used, you’ll see the image become more and more pixelated. We are aiming to find a happy medium of small file size and image quality, so 256 colors should suffice for most cases.
In the bottom bar of ImageAlpha, you can see that by reducing the image from its original settings to 256 colors, we’re already saving 54 percent in file size! Go to File > Save As to save this version of your image. But we won’t stop there!
Step 3: Keep Crunching
Open up ImageOptim, and drag your color-reduced image file into the tool. If you’re batch-processing images, you can even drag in multiple files at a time. Immediately you’ll see ImageOptim cranking away at the file, saving an additional 5-10 percent or more in file size. How does this magic happen? The tool removes unnecessary metadata and color profiles associated with the file that you probably didn’t even know were there.
Step 4: Feel Weightless
Revel in the fact that you’re making a real difference in web performance. In this example, the file started at just over 1MB, and was reduced to 412KB. Not bad for about two minutes of work! If you compare the before (left) and after (right) below, you may notice some very slight graininess in the updated file.
Compression in Motion
GIFs are really just a series of images stitched together to form an animation, so they follow many of the same rules and techniques for compression as static images do. Starting with a limited color palette and limited motion will set you up for (small) success.
Optimization Tools
There are plenty of free GIF compression tools available on the market. Typically these work by removing excess information from the image file and applying an algorithm to reduce colors and animation details. Here are just a few options that will do the heavy lifting for you:
The problem with automated tools, however, is that they offer less control over how a file is compressed. Ironically, these tools also have a file size limit of their own, so if you’re starting with a GIF that’s more than 20MB you won’t be able to use these options. But even if you’re beginning with a large file, there’s still plenty of opportunity to optimize. Below is a more manual process you can do in just a few minutes for serious file size savings.
Step 1: Reduce the Number of Frames
The starting file in this example is a whopping 84.2MB, and when it is opened in Photoshop we can see a big contributing factor is the fact that there are 450 frames creating this animation. All those frames are creating a GIF that is more than 13 seconds long — much longer than the online attention span of most website viewers!
The first thing to optimize is the actual number of frames in the animation. In this case, we can completely remove frames 301-450. Next, delete every other frame that remains (either all the evens or odds). This will reduce some smoothness in the animation, but provides an immediate file size savings. To compensate for removing intermediate frames, select all remaining frames and double their time duration (in this case, increase from the original 0.03s to 0.06s) so the animation isn’t suddenly twice as fast as intended.
Step 2: Save For Web
Go to File > Save for Web & Devices. Switch to the 2-Up view so that you can simultaneously view your original file and your new, optimized GIF to compare for quality. Next we’ll tweak the file settings to reduce additional size. If your animation has a simple color palette, reduce the number in the Colors drop-down menu. In this example, the images have lots of tones and shadows, and reducing colors leads to a sub-optimal image quality, so we’ll leave it at 256. Dithering helps improve the quality of the compressed file by blending nearby colors together, but can also add to your file size. We’ll set this to 20 percent as a compromise between quality and size. Similarly, increasing the Lossy setting means that file data will be discarded (reducing file size) but it also reduces image quality. We’ll compromise at 20 here as well. Finally, update the Image Size to match your actual intended size so that you’re not accidentally creating something larger than it needs to be.
For all of these settings, you’ll need to negotiate how much quality you’re willing to lose in favor of web performance, and these settings will likely differ for every GIF that you optimize.
In this example, the starting file was 84.2MB, and the optimizations in Photoshop were able to crunch it down to 18.9MB—a savings of 78 percent!
Fast-Forward to Speed
If compressing static images and GIFs hasn’t scared you off, the ultimate layer of compression complexity is compressing actual video files. There are a host of online converters and compressors available, including some of these more popular options:
However, just like with GIF compressors, the outputs can be a bit unpredictable and don’t allow you to fine-tune the end result. All video editing software will enable you to do your own compression. Here are the video compression components to look for in your video tool of choice:
- Codec: Computers look at the individual images that make up a video file, and determine which parts of the image are actually moving and which remain still. The codec is the software that enables this analysis. High Profile H.264 is one of the most recommended codecs for high definition video.
- Keyframe interval: The keyframe interval determines how frequently the codec is setting a reference point (or “key”) to determine where motion is happening. Having a very short interval allows the codec to detect more subtle motion, but also results in a larger file. To optimize, start by matching your keyframe interval to your video frame rate, and then increase the keyframe until you start to notice a loss in quality.
- Bit rate/data rate: This rate is measured in kilobits per second, and will determine how much data is taken up by each second of video. Using a variable bit rate (instead of constant bit rate) will fluctuate the amount of data used second by second depending on how much movement is taking place in the file.
- Frame rate: A video’s frame rate is quite literally the number of image frames which are shown per second. Decreasing this number is effectively the same as the manual frame remove that we did to optimize a GIF. If you are uploading your video to an online player, know that some will automatically reduce your frame rate. Vimeo and YouTube both require a frame rate of less than 60 frames per second (FPS), though frame rates of 24-30 FPS are common for most videos.
Again, it is critical to take each of these elements individually and see how they impact your video’s overall quality as well as file size. Export a few different versions of the video using different combinations of settings to evaluate what the end result is for each.
Balancing quality and performance is no easy job, but now you’ll have the tools to empower your decisions moving forward.
All screenshots taken by Ashley Kemper
