Optimizing images and video for the internet is a vital step to getting your work as much exposure as possible, but it can be tricky if you are uncertain about best practices. There are a lot of different compression algorithms and encoders that perform a variety of tasks, but in this article I want to keep it simple and just show you how you save files properly so they’re optimized for all things on the internet. First I’ll lay out some examples, and then I’ll explain why this methodology is the way to go in 2021.
Before we get started, keep one thing in mind:
As a rule of thumb, use JPEG for images and MP4 for video.
Again, every photograph you save for web should be a JPEG. PNGs are strictly for transparency and things like infographics. 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 adopt a single consistent procedure. With the right settings, you can compress your images down without much loss in quality.
For the following examples, we will be using Photoshop to complete these tasks. To save a JPEG in Photoshop, go to File > Export > Save for Web (or Shift + Option + CMD +S, for power users)
This will bring up the export settings. Three settings should hold your attention: file type (JPEG), quality, and preview. There are three different JPEG presets: JPEG High, JPEG Medium, JPEG Low. These presets correspond to quality levels of 60, 30, and 10 respectively.
On our site we mostly use the JPEG High setting, which is set to 60 quality. Depending on the “Image Size” (pixel dimensions), the image can be compressed so that it does not noticeably lose quality. You can play around with the quality setting if you wish, but 60 seems to be a decent in-between where the image has a much smaller file size. 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.
Different content managements systems (CMSs, such as WordPress, for example) will allow you to post or embed videos according to their system. At Wonderful Machine we embed video that have been uploaded to YouTube. The virtue of this approach is that YouTube handles making these videos available so that they will play easily.
Normally, I don’t suggest using a GIF but there are times it may be necessary. 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.
It comes down to two main factors.
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 in the technology world, and it creates a giant gap between the formats.
Consider another way of looking at it. The first 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.