A tactical approach for faster-loading media

There’s no doubt that you want your website to look fabulous, with stunning images and a sharp graphic design. But, to paraphrase “The Little Prince,” what is most essential is often invisible to the eye. For websites, this invisible component is load speed, and it can have a significant negative impact on your site’s performance and user satisfaction.

Want to ensure the invisible doesn’t make itself known? To start, we should back up and talk about why fast loading is important in the first place. It’s simple—it’s all about the user experience. Users get impatient, have a low attention span and won’t hesitate to leave your website if they have to wait. One online survey of 2,500 online consumers found that 67 percent of U.K. shoppers and 51 percent in the U.S. admit that a site’s slowness is the top reason they’d abandon a cart in an online store.

And the impact of this impatience can affect your bottom line. Consider ecommerce giant Amazon, which revealed that a page load slowdown of only 1 second would cost it $1.6 billion in sales revenue every year.

Google also has incorporated site load speed into a list of factors influencing the search ranking position. From customer satisfaction, to revenue to search engine optimization—there are several good reasons to ensure your website delivers…and fast.

If your site is not performing optimally, here are tactics you can use to improve site load time while delivering media with visibly better results:

Save images for the web

Load speed optimization starts before the images actually land on your web page. When working on images in any sort of graphics tool, you must make sure to save them in a format that is compatible with web publication. Doing so limits the amount of metadata carried on an image and makes it easier to edit the image quality.

There are a variety of formats that are applicable for the web, such as:

• Scalable Vector Graphics (.SVG) – preserves its quality no matter the size on screen, best for logos; lossless.
• Portable Network Graphics (.PNG) – best for high-resolution, detailed graphic images you want to present in full quality; lossless.
• Graphic Interchange Format (.GIF) – for simple animations; lossy.
• WebP – an image format supported by Chrome browsers; either lossy or lossless.
• Joint Photographic Experts Group (.JPEG or .JPG) – best for scalable images; lossy.
• JPEG-XR – an improved variation of JPEG format supported by IE browsers, suitable for scalable images; lossy.
• JPEG2000 – a higher-quality JPEG format supported by IE browsers; lossy.

Format comparison example:

196 KB in PNG format

25.2 KB in JPEG format with 80% quality

20.1 KB in WebP format with 80% quality

Consider lossy vs. lossless file formats

As mentioned in the list above, some file formats are very prone to lossy formatting, which means you can lose or alter information from the original file. Media files are perfect material for lossy formatting. Our eyes are not able to receive all the information coded in every pixel, which means you can easily cut down on redundant data and decrease the file size.

With lossy formats, the formatting eliminates some pixel data completely. But with lossless formats, the pixel information is compressed, but still maintained. Typically, lossy formatting provides more options for file quality and size.

Determine image size and quality

Image and video file formats have various properties, including their sizes. While some formats may be suitable for all devices, others will only load well on desktop screens. And, not all of them are suitable if you want to reduce your page load speed. You’ll also have to keep in mind that the image quality required for different screens will vary.

What can you do to make sure you use the best file format and quality for optimal load speed? There are a variety of tactics to ensure that you are using the best file format and quality for optimal load speed, such as:

• Scaling or cropping images to match the display size—These are typical elements of responsive design. But it’s not all about responsive design, which we’ll explain in the next section.
• Adjusting image quality to match the screen resolution—The lower the quality, the smaller the file size. Here’s where you want to remember to use lossy formats.
• Converting lossless formats into lossy—This could entail replacing a PNG (lossless) file with a lower-quality (let’s say 70 percent) JPEG image. Another example is decreasing the size of animated GIFs when converting them to WebM or MP4 formats.

Think mobile-first

Picking the right approach to design will definitely help you change the way you perceive the role of images on your website. But what’s the practical difference between desktop-first and mobile-first? Here’s a comparison that can help you understand.

In a desktop-first approach to front-end development and web design, you start from the version of your website that uses heavy components by default. You get used to the thought that putting them there is kind of natural and obvious. Then, when designing the same website for tablets and smartphones, you wonder what elements you need to reduce to make things still work.

But the idea behind mobile-first front-end development and web design works on a precaution that the website should give you maximum necessary content with minimum space and weight. You obtain this effect by using responsive, scalable images, for which the quality can be adapted for particular devices. By starting from mobile and progressively enhancing for tablets and desktops, you reduce redundant elements.

Optimal load speed achieved

Load speed is crucial for user satisfaction, website conversion and search rank. As a result, you can’t overlook how images and media impact your site. To optimize load speed, you may experiment with file formats, scaling, adjustable quality, and other factors. Remember the difference between lossy and lossless formats, and make sure you use each format according to the file’s purpose. And you should consider mobile-first design, as it will help you create more efficient, faster-loading sites.

Cloudinary, an end-to-end image and video management service, can help with image optimization. It enables you to upload the highest quality picture, and provides automatic image cropping, conversion and optimization using our dynamic delivery URLs.

To test drive Cloudinary and learn how you can easily build a fast loading website, sign up for a free account.

[– This is an advertorial post on behalf of Cloudinary –]

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.