Responsive Images Tips and Tricks

In today's post, our guest blogger, Gilad David Maayan gives us some tips and tricks on creating responsive images.

[image credit: Pixabay]

Responsive design is a standard of web development nowadays. As consumers are increasingly using their mobile devices to research before making a buying decision, any website needs to work well on multiple devices, as users may access your site through their phone, tablet or laptop.

In addition, since search engines such as Google, prioritize mobile-responsive websites, therefore, responsive design is a must for any web developer. This article aims to explain what are responsive images, providing tips to help both new and redesigned sites.

What Are Responsive Images?

Working with responsive images is the process of delivering the browser with multiple image sources according to the image requirements of the device. This can include image density, the size of the image element on the page and the resolution required for the device. In brief, it is the method used to ensure that images look good regardless of the device they are displayed.

Most images on a webpage are optimized on landscape layout, to fit a desktop screen width. While the image can work well on a desktop or even a large laptop, when displayed on a tablet or smartphone will not look good. 

See this example of Wikimedia Commons site:

In this layout, the images are wide, and the options menu on the left. However, if we would just resize the image to fit a smartphone screen, for example, it would look something like this:

That is when a responsive design may be useful. A responsive page, designed to adapt to a smartphone screen would look like this:

See in the image below, the menu is not present, and the central image takes up most of the screen, making it cleaner and easier to navigate.

Why Are Responsive Images Important?

The growth in smartphone users is causing a large increase in website traffic, thus showing that customers have expectations about how should a website appear on a mobile device. Let’s look at some statistics from 2019:

• Research from Google shows that 73% of users will leave a website that is poorly designed for mobile.
• Almost 80% of US consumers shop online, and more than half purchase through their smartphones.
• 90% of consumers use multiple devices to complete everyday tasks
• 57% of users won’t recommend a business with a poorly designed mobile website. Websites that are mobile responsive provide an optimal user experience.

These stats clearly show that customers base their impressions of a website mostly on their responsiveness. This trend has driven innovation in the field of software development with a number of responsive image technologies and solutions apps appearing in the market. These solutions allow you to provide the browser with a number of image files, editing and changing automatically the resolution and the format to adapt to the target device.

Responsive Web Design Best Practices

The following practices can help you ensure your website is responsive, and more important: mobile-friendly.

Understand your mobile user

People use websites differently on desktop computers than on mobile devices. You can use analytics to discover which pages and elements users access the most. This data can help you identify which pages need to be mobile-friendly. For example, if users are going straight to the product categories page, make sure that this page shows up in a mobile-friendly display.

Design mobile first

When designing the website, plan the layout on mobile first. Doing this lets you see how all the page elements look on smaller screens. If everything is in order, then it is easy to adapt your design to larger screens.

Prioritize the navigation

This is the most important part of any website. On desktop versions, the navigation bar will have visible links to all the important pages. However, on mobile devices, a common practice is to hide the links behind an icon. This can frustrate your visitors that may not realize they need to click on the icon to see the menu. Therefore, the best practice is to leave critical links on the screen and use an icon for the rest.

Optimize images

Images should be optimized for the web, so as not to slow down the page loading times, and allow your users to connect with the page. Compressing them in the appropriate format, for example, JPEG for photos and PNG or Vector images for logos and icons. You can use image compression tools that would optimize for various breakpoints automatically.

Tips and Tricks for Responsive Images

We need first to understand responsive resolution methods: resolution switching and art direction.

Resolution switching

The most common method, it is used to provide different sizes of an image without modifying the content or aspect of it. This involves scenarios when you want to deliver different sizes based on the display density, such as retina images.

Art direction

When, however, you need to change the aspect of an image, you need to use the art direction method. Take, for example, this picture of a puppy on the beach:

[image credit: Pixabay]

This picture resolution is 1280x636 pixels.

If we just crop it to a smaller size it would look like this:

Notice how the dog gets lost in the image. In this case, instead of resizing the image, it is better to crop it, centering the dog’s image. Thus, resulting in an image that works better at a smaller size.

Some tricks on CSS:

Most of the web development work for images is done using the CSS language. However, image resizing can be frustrating even for the most experienced web developer. Here are some tips to help you:

• Use the command background-image—when your image is not part of the page’s content.
• If you don’t need it— to display in Internet Explorer, use object-fit.
• Keep the ratio— with a percentage on the padding property. This is the technique used by Netflix.

Image breakpoints tips:

Try the following tips to pick up your breakpoints:

• Match your layout breakpoints—look at the number of layout breakpoints and match its breakpoints. However, this method is more a “try and error”, and can be inaccurate in some cases.
• Test representative images—choose a few representative images and calculate how many breakpoints they need, then extrapolate.

Wrap Up

Working with responsive design and responsive images is a gold standard to ensure your visitors will have a quality experience. Using an image optimization solution can solve much of the headaches and ease the work that comes with managing responsive images. In this article, I presented an overview to understand the key concepts of responsive design and some tips to get you started.

What are some responsive image tips of your own? What is your source for responsive design? Share your comments below and let's discuss.