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

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…