Don't get us wrong here: we're not talking about the process of creating websites faster. Here we're talking about the loading time of your website.
Ever since the '90s, speed has been a popular topic in UX. If your website is slow, users might lose interest and leave.
The good thing is that technology has evolved and Internet speeds have greatly improved. Still, that doesn't mean that you should put high-resolution images and videos on all your web pages. Neither that you should create boring websites.
Conservative use of graphics does not imply boring pages (Nielsen, 1997).
By following these simple guidelines, you could improve your site's speed by more than 70% in a couple of minutes without compromising the quality of your images!
Images
Choose the right images
Limit the images you choose to only the ones that mean something. Avoid putting images that have no purpose. Doing this, you will reduce both the noise on and the weight of your website.
Format your images
JPEG, PNG, GIF, TIFF, PSD, SVG, etc. All nice acronyms that are more important than you think!
A JPEG is not a PNG and a PNG is not a JPEG. It's not only the file name, but it's also how the image is built. I've seen this: don't try changing the file extension! It won't work.
Here's the top 3 images format you should know for building fast websites:
- GIF for graphics limited to 256 colors (and animations if your life depends on it)
- PNG format for screenshots or graphics when you need transparency and more colors
- JPEG for photos
Resize your images
If you don't need a high-resolution version of a photo for your website, resize it. Want to make your website look cohesive? Try respecting the same aspect ratio!
Best is that you don't need Photoshop or any other fancy software to resize your images. A good tool for doing that is Croppola.
Compress your images
Trickiest part when we talk about image optimization is the compression. Algorithms are somehow boring to a lot of humans so we're just not going to talk about them.
ImageOptim is probably the most simple and best compression tool. Try using the highest quality first. If you see that your file is still too heavy, adjust the settings.
A good compressed high-resolution image should weight around 300 KB.
Videos
Animated GIFs
Animated GIFs aren't videos. They should never be used for that. Never.
GIFs on Twitter, Facebook, and other social media aren't actually GIFs. They are video files. At some point, people started sending GIFs because they can be looped and played on all devices, but MP4 video is now becoming the new standard.
The reason why is that a video can be more than 10 times lighter than a GIF. Also, with HTML5, it is now possible to embed a video in a web page without any plugin.
Video files
The best way to disseminate videos online is to use YouTube or Vimeo then to embed the video on your website. Both companies offer built-in video compression, SEO optimization, content delivery network streaming (CDN), subtitles creation and other cool technologies they invest millions on.
In case you need to upload your video on your website directly, make sure the file is compressed and MP4 format. This will ensure that users can watch your video without installing other software.
Checklist
- Choose the necessary images
- Select the right formats for your images and videos
- Crop and resize images
- Compress images
- Compress videos
Resources
- Croppola
- ImageOptim
- Graphical Content by Dave Gash
- Image Optimization by Ilya Grigorik
- The Need for Speed by Jakob Nielsen
- All About Images by University of Michigan Library
