Why Are Mobile Devices Important for Car Websites?
Mobile devices are critical to the car buying process. AdColony recently published its report, “The AdColony Car Buying Survey.” It identifies that a majority of car shoppers feel that smartphones are either “Very Important” or “Important” in the car buying process.
Car shopping occurs across multiple types of devices, including smartphones, desktops, and tablets. 39% of users use a combination of all of them.
How Do Car Buyers Use Mobile Devices?
Buyers try to educate themselves about price and specifications on car websites. Given that most car buyers want to streamline the buying, test-driving, and inspection process, it is not surprising that buyers are using their mobile devices to improve that process. Mobility is a given these days.
Understanding the requirements of each mobile user and their devices who visit car websites can improve the mobile experience. Below are some steps that both car manufacturers, dealers, and sellers can take to improve the mobile experience.
Build Mobile-Friendly, Fast-Loading Car Websites by Using an Image CDN
Images are critical to selling cars. If buyers cannot immediately drive or touch the car, then seeing a picture is the next-best thing. The problem is that images are the biggest driver of any website’s payload. The bigger the payload, the slower a website will load. And load time is critical to a successful shopping experience. Most users expect a page to load in 3-5 seconds. However, the average page takes almost 8 seconds to load.
Responsive Images Enhanced by an Image CDN
So how can a car website with lots of images load faster? Images sent to a device are frequently larger than they need to be. A popular solution is to use responsive image techniques. This requires using picture, sizes, and srcset attributes and creating many image variations targeted to desktop, tablet and mobile devices. Front-end designers using responsive images need to manually make decisions on how to deliver images to a particular size viewport and then select the appropriately-sized image based on a pixel-size breakpoint defined in the code.
While this sounds straightforward, it means lots of work for sellers with thousands of pictures of cars. Each image needs multiple resized variations. Additionally, for each image, the developer needs to write many lines of code that selects the right-sized image. Even then, with a three-device approach, this does not necessarily optimize the payload entirely. If you want better optimization, you need to implement compression based on screen resolution and convert images to next-gen formats like WEBP. Here is an example of how a developer maintaining an auto website might use responsive code for desktop, tablet, and smartphones for a single image.
<picture> <!-- serve WebP to Chrome and Opera --> <source media="(min-width: 50em)" sizes="50vw" srcset="/image/acura-tlx-200.webp 200w, /image/acura-tlx-400.webp 400w, /image/acura-tlx-800.webp 800w, /image/acura-tlx-1200.webp 1200w, /image/acura-tlx-1600.webp 1600w, /image/acura-tlx-2000.webp 2000w" type="image/webp"> <source sizes="(min-width: 30em) 100vw" srcset="/image/acura-tlx-crop-200.webp 200w, /image/acura-tlx-crop-400.webp 400w, /image/acura-tlx-crop-800.webp 800w, /image/acura-tlx-crop-1200.webp 1200w, /image/acura-tlx-crop-1600.webp 1600w, /image/acura-tlx-crop-2000.webp 2000w" type="image/webp"> <!-- serve JPEGXR to Edge --> <source media="(min-width: 50em)" sizes="50vw" srcset="/image/acura-tlx-200.jpgxr 200w, /image/acura-tlx-400.jpgxr 400w, /image/acura-tlx-800.jpgxr 800w, /image/acura-tlx-1200.jpgxr 1200w, /image/acura-tlx-1600.jpgxr 1600w, /image/acura-tlx-2000.jpgxr 2000w" type="image/vnd.ms-photo"> <source sizes="(min-width: 30em) 100vw" srcset="/image/acura-tlx-crop-200.jpgxr 200w, /image/acura-tlx-crop-400.jpgxr 400w, /image/acura-tlx-crop-800.jpgxr 800w, /image/acura-tlx-crop-1200.jpgxr 1200w, /image/acura-tlx-crop-1600.jpgxr 1600w, /image/acura-tlx-crop-2000.jpgxr 2000w" type="image/vnd.ms-photo"> <!-- serve JPEG to others --> <source media="(min-width: 50em)" sizes="50vw" srcset="/image/acura-tlx-200.jpg 200w, /image/acura-tlx-400.jpg 400w, /image/acura-tlx-800.jpg 800w, /image/acura-tlx-1200.jpg 1200w, /image/acura-tlx-1600.jpg 1600w, /image/acura-tlx-2000.jpg 2000w"> <source sizes="(min-width: 30em) 100vw" srcset="/image/acura-tlx-crop-200.jpg 200w, /image/acura-tlx-crop-400.jpg 400w, /image/acura-tlx-crop-800.jpg 800w, /image/acura-tlx-crop-1200.jpg 1200w, /image/acura-tlx-crop-1600.jpg 1600w, /image/acura-tlx-crop-2000.jpg 2000w"> <!-- fallback for browsers that don't support picture --> <img src="/image/acura-tlx.jpg" width="50%"> </picture>
Simplify Responsive Images With Automatic, More Effective Optimization
A more simple and effective way is to inject an image CDN like ImageEngine your responsive website workflow. Because ImageEngine has device-aware edge servers, it can instantly optimize an image based on the screen resolution, Pixels Per Inch (PPI), and leverage modern efficient image formats like WEBP and JPEG 2000. It then caches the optimized image so that subsequent images are delivered directly from the CDN’s cache. And in cases where you want more control, you can use ImageEngine’s directives to serve the image exactly how you want.
In this example, we have reduced the 40 lines of example code found above to just one line by using ImageEngine.
<img src="//images.example.com/images/acura-tlx.jpg?imgeng?/w_auto,200/" sizes="(min-width: 30em) 200px, 500px">
This means a website can stick with one large, high-quality master image of the car and let the image CDN automatically reformat an optimal image that is tailored to each specific device model’s specifications. It will also get the benefits of faster delivery from a CDN that automatic applies compression and serves the most effective next-gen image format.
Test Your Site
At the end of the day, what matters is that your website loads quickly on all sorts of devices. We suggest testing your site for mobile either on webpagetest or the ImageEngine demo tool to better understand how your site can improve your google speed index and web page latency issues. This will give you a quick assessment of the improvements and savings you should expect from using an image CDN like ImageEngine. Contact us for a free 30 day trial.