A tactical approach for faster-loading media

Default avatar.
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, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…