Expert Advice: Optimizing Images for Video and Web
Optimizing images and video for the internet is part and parcel with getting your work as much exposure as possible, but it can be tricky if you don’t know where to start. There are a lot of different compression algorithms and encoders that perform a variety of tasks, but I want to keep it simple and show you how you save files properly so they're optimized for all things on the internet. First, I'll lay out some examples; then, I'll explain why this methodology is the way to go in 2021 and the near future.
Before we get started, keep one thing in mind: the general rule of thumb here is to use JPEG for images and MP4 for video.
Again, every photograph you save for web should be a JPEG. PNG’s are strictly for transparency and things like infographics, and SVG/EPS files should be converted to JPEG as they're more suited for print. There are multiple ways to save a JPEG, so it’s best to export one the correct way. With the right settings, you can compress your images down without much loss in quality. With your photograph open in Photoshop, go to File > Export > Save for Web.
This will bring up the export settings. There are three sections that should hold your attention.
- File Type (JPEG)
You can play around with the quality setting, but 60 seems to be a decent in-between where the image has a much smaller file size but isn't palpably compressed. You can test the image quality by pressing "Preview" in the bottom left.
As we said before, every video you save for web should be an MP4 — more specifically, the H.264 codec. There are many different video editors available, but they all follow the same export pattern. Adobe Premiere, for example, uses File > Export > Media.
I don’t normally suggest using a GIF unless it's a very specific situation. When thinking about a GIF, we need to approach it the way we do a JPEG, just with multiple frames per image. As such, the file will be much larger depending on not only the size of each frame, but also the number of frames. The goal, as with JPEGs, is to cut down on file size without compromising the work. This time, when you go to "Save for Web," you'll select the GIF option.
We can save a little space by having the "Lossy" option to hover around 5-10. Again, use the preview to monitor and find that sweet spot of compression to quality.
Something I suggest is converting your GIF into an MP4; it’s extremely easy to do and will save you a ton of space. To do that, all we need to do is have our GIF ready and head over to ezgif.com. Choose your GIF, press upload, and then convert it to an MP4. Look at the file size difference I have with my 8 Megabyte GIF without any loss of quality.
The file compressed it down to 450 Kilobytes, not even five percent of what it once was. This means you can still have that GIF-like style while keeping the work's polish intact.
So, why exactly does image optimization matter? It comes down to two main factors.
- Download Speed
Every time you load a website on the internet, your browser temporarily downloads all of the files on that page. With larger files, the webpage will load slowly, and sometimes not at all. Many photographers have populated their websites beautiful, high-resolution images. But they take forever to load! With the modern person's attention span being that of a fly, it’s vital to make sure your work displays quickly and smoothly when someone visits your site. The other benefit of having a webpage that loads quickly is that Google will boost your website's ranking, making it easier for people to search for and find your portfolio online.
Perhaps you're wondering why a GIF, which is usually only a few frames long, has a larger file size than a video? At first glance, it makes absolutely no sense — a few pictures ostensibly uses up far less data than a video. The answer is mostly due to the age of each file format — GIF was created in 1987, MP4 in the early 2000s. This is a lifetime (at minimum) in the technology world and it creates a giant gap between the formats.
Another way of looking at it: the original iPhone came out in 2007; think of how different (and evolved) smartphones are these days. The same rule applies to all types of technology, including compression.
So, where is the future of web image optimization? I think for now and the next few years, JPEG and MP4 will hold the crown. After that, however, I believe Google’s new web formats WebM and WebP will take over. WebM has already shown great promise with its incredible compression, as has WebP. The only thing slowing them down currently is the browser and device support they lack.
But when this change happens in full — and it will — we'll make sure to keep you informed so that you can keep your website as up to date as possible! I can even see Google adding some SEO advantages for those who use their formats. Only time will tell.
Having trouble with a specific file? If you have any questions, please email Will Good.