One thing that gets very easily overlooked in web design for beginners is optimization. You want your site to load as quickly as possible and allow users to navigate back and forth with ease. Nothing will upset a potential customer faster than a website that won’t load or function properly. Images straight from your phone or from stock websites ARE NOT suitable for going straight to your website. We need to drop that file size dramatically. Every little bit helps and if you are using a lot of images on your site, let alone a video, you need to optimize them. Here are some tips I have for optimizing the media on your website.
If you are using Photoshop, Ctrl + alt + shift + s, is going to be your new favorite shortcut. It’s the keyboard shortcut for Save for Web, which you should use on any image before adding it to your website. I am a fan of using .png but that’s just a personal preference and not actually based upon anything, other than I like it way more than .gif. Here’s a more in depth look at what is happening during this process by TutsPlus.
Personally I edit all images down to size as well, for example the featured images on all of my portfolio pieces. I have one photoshop document that I brought them into first, resized them, and saved for web before uploading. They are small in file size, load quickly, and they are all the same resolution!! Which I love because I don’t have to resize the images with CSS for them to all float nicely with bootstrap and responsive design.
Most websites and themes have the ability to have 2 formats uploaded (say for a background video), and you want them to be .mp4 and .webm. The target resolution we should use is 1280 x 720 to maintain a balance of quality, file size, and page speed. Higher resolution can be used if necessary, but it will slow your site down considerable depending on it’s file size resolution, and duration. Also, no audio, like at all if possible. It will save on file size, render time, and your user’s happiness when entering the site. There’s nothing worse than having in headphones and browsing when a really loud song starts playing on a site and there is no easy way to stop it.
For the .mp4 file you will want to use the h.264 codec, I need to do more testing as far as bit-rate, quality, and sampling is concerned so I can find that perfect balance to optimize video for web. But every situation is different, I recommend rendering a couple versions of the video and watching them all, and making a decision after seeing them. Because you may lose too much resolution and decided to go with a slightly larger file size for clarity.
For the .webm format there’s 2 codecs to choose from VP8 and VP9. The most promising results have come from dropping the quality from 50 down to 15. And as far choosing which codec, each has proven itself in different situations. The VP8 provides a smaller file size but does appear to be the first one (to me anyways) that looks slightly degraded. But it was ideal for the drone footage I was editing, as the VP9 one was very jittery. So far for .webm the best render settings are: 1280 x 720, 15 Quality, VP8 codec, no audio.
I use Adobe media Encoder and drag my comps from after effects straight into it (which allows me to continue working in after effects, rendering within after effects means I can’t use that program anymore). And then I set 4 outputs or so and look at each of them and usually do one more round of four or so, making the necessary adjustments from the first round. That way I have options (for clients as well so they can have a say in quality of the video) and make the best decision for the site I can.