If you’re wondering how to make a website mobile friendly, start with speed. Page load time is instrumental. If your user can make and drink a cup of coffee before your contact form loads, you have a problem. The chief cause of this issue is images, which account for 68% of the total page weight. It’s key to remove images that aren’t doing anything for your brand (ie: stock images) and optimize the images that are necessary to your message. In this post, we’ll tell you how to avoid the lagging load times, different approaches to image loading, and how mobile responsiveness is imperative to your mobile marketing success.
Resizing Photos and Responsive Designs
Tip number one: Avoid large images when possible, since their information density is typically low. It’s a pain for people to have to scroll down to get real information from your page. Responsive one-column designs create images that fill up the whole container width, resulting in full-page images. If you’re not sure exactly what size to make your images, a good benchmark is 29KB for JPG and 16KB for PNG. You can cut down on the weight of your image by saving it at the right size and resolution. Photoshop allows you to compress an image, and TinyPNG can reduce the weight by 79%. If you don’t size images for the largest possible device, those images are not going to look pretty on that desktop. Many choose to go with a responsive website design so they don’t have to worry about resizing all the images on their site. Responsive website designs serve the same website to different devices through CSS. The format of the site changes according to the device and screen size.
Types of Web Images
Before starting on image resizing though, you should have a general understanding of the different types of web images: raster and vector. Raster images are composed of dots, while vector images are made up of lines and shapes. Raster images would be JPEGs, PNGs and GIFs, and SVG (a new format that isn’t widely used) is a vector. PNGs are normally classified by higher quality graphs, logos, icons, illustrations, and photos with graphical effects. GIFs are normally animations, simple graphs, icons and logos. JPEGs work best for web photographs, and SVGs are common among graphs, logos and page headers. Each of your images (icons, buttons, photos, etc.) requires an individual browser request, slowing down your load time.
Creating Faster Load Times
Placeholders for Images
According to Jose M. Perez’s article, Medium prevents reflows while the images are loaded by ensuring all components are rendered in their final position (intrinsic placeholders). To start off, a tiny version of the image is loaded (JPEG thumbnails with low quality). The small image markup is returned in HTML as <img>, so the browser starts fetching them immediately. Next, the image is drawn in a <canvas> and the data is passed through a custom blur function. The main image is requested at the same time, and, once loaded, is shown in place of the canvas. Google Search does something similar when used on a smartphone, except they show a solid color background in the place where an image would go. This allows the page to load faster. This is a key component of how to make a website mobile friendly through load time.
Since the average mobile webpage is 2.2MB, it’s imperative that you optimize your site for a speedy load time. This can be done by conducting a speed test on mobile devices to determine what’s slowing down the site. Then, ask yourself whether the image that’s slowing things down is worth the load time. Is it adding to your content? Is it providing unique information that a user couldn’t gather from the text? Go through and remove the images that aren’t adding value to your site. Slider images, for example, take up a lot of space on your site, and research has shown that they don’t contribute to conversions. With the images that you choose to keep, make sure that they all follow a consistent format and size.
Ecommerce Site Images
Ecommerce sites especially benefit from images. We’re a lot less willing to buy a product if we can’t see a picture of it, plus images make it easier to find what you’re looking for in your quick, vertical scroll of the search results. Ecommerce sites thrive on hero images, since they provide a clickable banner at the top of a homepage that features a new product, promotion, etc. and a call to action. The mobile-ready hero images are “the smaller thumbnail images found on a page of product listings either in a category or following a search”(Search Engine Watch). These images act as the primary images in search thumbnail results and are designed to work well on all screen sizes (mobile, tablet and desktop). They make it easy for shoppers to identify the brand, format, variant and size while they are searching. Eye tracking research has shown that 90% of the ecommerce page ends up ignored, and most shoppers don’t even notice the product name, size or format. We’re visual creatures, and we often make our buying decisions off sight alone. Since online shopping is all about convenience, people want to be able to add items to their cart as quickly as possible. Hero images are an instrumental part of how to make a website mobile friendly.
On top of speeding up load time, you should audit your site’s images for ADA compliance. This means adding alt text to your responsive images. You should also make it easy for those who have bad vision to enlarge your image with their zoom feature. Since screen readers don’t yet have image recognition on the web, they won’t be able to pick up on an image If it has text overlaid.
Still wondering how to make a website mobile friendly? Check out our blog post on resizing photos and website building software to see whether this is something you want to tackle on your own. If your site’s mobile load time isn’t up to par with your desktop version, contact us so we can figure out the root of your problem. Our mobile development services include a mobile website design, mobile landing page, and responsive website design. In some cases, it might make more sense for you to develop an app for your service rather than create a mobile version of your site. If so, take a look at our iPhone developer, Android developer, iPad developer and Android tablet development services. With Google’s new mobile-first index, you want to be sure that your search engine ranking isn’t being negatively affected by a slow load time. If your site’s slow load time creates a high bounce rate, Google will take notice and lower your ranking. Our job is to ensure your site gets the traffic it deserves.