A tactical approach for faster-loading media

Wdd Logo.
September 20, 2016
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:

turtles

196 KB in PNG format

turtles

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.

Read Next

15 Best New Fonts, October 2024

Welcome to our roundup of the best new fonts we’ve found online in the last four weeks. In this month’s selection we…

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…