August 11, 2016
Images reign supreme in the hottest web trends and image optimization is a key reason why. More and more we see websites that previously used heavy text, are being replaced by new designs with beautiful images and simple, powerful statements.
The websites of Apple, Oakley, and Herschel are built with large images that leave lasting impressions and immediately communicate brand identity. This style is highly desired by both big and small brands alike. Regardless of the size of a business, our clients often use these sites and others like them as examples of what they would like their new site to look like.
A word of caution though! If you (or your developer) don’t take care of your images before you upload them, you could actually lose a huge amount of traffic. Particularly on mobile, where internet speeds can be slower, an unoptimized images can cause your site to take so long to load the majority of your visitors will never see anything beyond the home page.
Today more than half of internet traffic comes through a mobile device. Optimizing our images couldn’t be more important.
3 Tips For Optimizing Images
1. Choose The Correct Image File Format
There are a lot of types of image formats with varying different uses. It’s very important to use one that fits your needs. For example, .jpgs look very similar to .pngs and are much smaller, but .pngs won’t lose quality when you save them and allow for multiple degrees of transparency.
Here’s a quick reference for some common image formats to consider when saving or converting your images:
.SVG
Vector (Math) based graphics that look sharp at any size. Very small file size, but because they are vector based they are best used for illustrations, logos and icons.
.GIF
Allows on/off transparency and up to 256 colours. These are a great option for logos if you need older browsers support and can’t use SVG. Yes, they can also be used for short animations.
.JPEG
Doesn’t allow transparency. JPEGs are compressed for efficiency, but unlike .pngs, they will degrade as save them over and over. Highly used across the web.
.PNG
Allows varying amounts of transparency and doesn’t degrade as you repeatedly save the image. Careful though, .pngs have some largest file sizes across options
2. Get The Correct Tools For The Job
Now that you’ve got your image in the correct format, you will want to make sure you remove any unneeded information that’s attached to the photo. Just like any other piece of code, images can be very bloated with unneeded parts un optimized files.
One that we use here at SplitMango is JPEGmini. Featured in blogs like TechCrunch, it is highly regarded a great solution for removing megabytes of information from .jpgs. It works by compressing the image right up to the point where the human eye could tell the difference. This means a much smaller file size.
A similar solution is also available for .pngs called TinyPNG. This solution is available as a WordPress plugin, Web App and Photoshop plugin.
3. Upload The Proper Image Size
Most websites are built using a Content Management Solution like WordPress, Shopify, or Drupal. These CMSs are used to edit and control the content that displays across the website. Well built themes should resize your photos to an appropriate size to display on the website when you upload them, but it’s best not to rely on your theme.
Many sites are using image files that are larger than their users monitors can even display to show small images!
To get the most out of your newly optimized images use a program like PhotoShop to reduce their width and height to the size that they will be displayed online. Remember though, websites today are built to be responsive. When you are picking a size make sure to use an aspect ratio that will look great across all screens and device sizes.
Extra Credit: Get Codin’ With srcset!
If you are looking to dive deeper into how you can use code to best optimize your images, the “srcset” attribute is a great place for developers to start. This attribute is used on the image element in your code to tell your device to display different image files for different devices and sizes. This means if you use a large image on desktop you can save monumental amounts of data by displaying a smaller one on your phone.