Responsive images provide users with images that are optimized for their resolution. Here’s what you need to know about how to use them, obstacles to watch out for and the best solutions for using them in your latest web and application designs.
First, the basics: A responsive image is just an image that adapts to the configuration of the device’s screen. That means the image should fit the device’s size, resolution and display density — or any other component that can influence image quality.
The goal of a responsive image, after all, is to provide web and application users images with the best possible quality for their devices. You can create a responsive image manually through the configuration of the code or you can use automated responsive image tools that reduce or eliminate the need for writing code.
Why should you bother? Well, more than half of mobile users the globe over access the Internet from their mobile devices — alone. According to the World Advertising Research Center (WARC), the number will increase to 72.6% by 2025. That means that websites need to adapt to any screen resolution. Otherwise, they’ll lose their SEO ranking due to poor user experience.
Websites are made up of images, of course. The logo of the brand is an image, most headers contain hero images in a carousel or a gallery display, you have featured images for blog posts and products, icons for key products and services you want to promote, background images, and more. If you want your image to look good on any screen, you need to make sure the image is responsive.
Responsive images: some key concepts
A responsive image provides browsers with multiple image sources. Each image source meets certain factors. Here a few examples.
Aspect ratio — the mathematical value that defines the proportional relationship between the width of the image and its height. For example, 3:9.
Disk size — the maximum amount of dara the storage can contain
Display (pixel) density — measures the number of Pixels Per Inch (PPI) or Dots Per Inch (DPI) on the screen.Image format—file types such as PNG, JPEG, and GIF
Image format—file types such as PNG, JPEG, and GIF
Image size — the height and width of an image, typically measured in pixels.<
<img> element — an HTML tag that defines the source of the image and its alt description
Render dimensions—turn scene files such as 2D and 3D models into complete images
Responsive images: the challenges
There are two significant challenges you may face when working with responsive images. The first has to do with art direction.
Art direction is a design technique that draws attention to the most important parts of an image, all the while targeting specific image features. Art direction is critical in configuring responsive images.
For example, if the hero image of our website contains a logo in the middle, and we want the logo to appear in the middle of every single device size and resolution, we’ll need to use art direction.
You can do this manually, by cropping the individual objects within the image—through the use of the <picture> and <source> elements. Alternatively, you can use a tool that does that automatically.
Another challenge you may have to deal with has to do with resolution switching. Resolution switching optimizes the bandwidth consumption the device would need in order to display the image. This is especially important for mobile and tablet users, who typically pay according to bandwidth usage.
If you provide low-resolution displays only with high-resolution images, you would essentially waste their money, as the image would take a long time to load. You’d also stand to waste their storage capacity, as mobile and tablets usually have considerably less storage space than desktops.
To solve this problem, you can restrict image formats for low-resolution displays to a vector format (SVG), and use the srcset attribute. This lets you provide different image url sources for different displays. The sizes attribute lets you specify the size for different displays.
Responsive images: tips and tricks
Image compression
To ensure that you deliver displays with small image files that don’t take long to load, you can use image compression. It’s not a new technique, but it’s a must for anyone looking to serve users with optimized responsive images.
A basic compression would entail deleting unnecessary metadata. You can also delete image elements that won’t the clarity of the picture. Be careful not to compress too much, and always keep a master file, because the compression process is irreversible.
Lazy image loading
When users access websites, they receive a transmission of the content of the website. That include the textual elements as well as the images. Image loading is the process that determines how images are used, displayed, recycled, and cached in the recipient device.
Lazy loading is an automated process that takes care of image loading tasks. Instead of manually configuring each detail of the loading process, you can set up the lazy loading software and let it do the loading tasks for you. Efficient lazy loading would ideally increase the loading speed while saving bandwidth.
The bottom line
Responsive images are a must for every website and application. Today’s Internet consumers use a wide range of display resolutions. To provide them with the best user experience and adhere to SEO standards, you need to make use of responsive images.
The art direction and resolution switching problems can be tricky to solve, but with the use of the right CSS element tags and/or the assistance of automated tools, you can optimize images for responsive delivery.
Be sure to try image compression and lazy loading, as these pieces of software can save you a lot of time and energy. There are plenty of free and open-source tools available, so don’t worry about breaking the piggy bank for the sake of responsiveness.
For aNewDomain, I’m Gilad David Maayan.
