- Markup, Web Development
- 5 min
Optimizing Image Alt Text: the How and the Why
In this post, you will learn about all the ins and outs of using Alt text for images on your site.
Visual materials are extremely important for the success of any business, brick-and-mortar or online-based. They help entrepreneurs clearly show their prospective or current customers the real value their products can bring. Professionally looking imagery has a particular significance for e-commerce companies. According to recent data, almost 70 percent of consumers find the quality of product […]
Visual materials are extremely important for the success of any business, brick-and-mortar or online-based. They help entrepreneurs clearly show their prospective or current customers the real value their products can bring.
Professionally looking imagery has a particular significance for e-commerce companies. According to recent data, almost 70 percent of consumers find the quality of product images crucial when shopping on the Internet.
Since most people are visually centered, textual content alone is usually not enough to convince visitors to make purchases in online stores. Blurry images that weigh a ton are also a surefire way to drive consumers away from e-commerce sites. Only perfectly shot, well processed, high-quality visuals contribute to better engagement and positively impact the bottom line.
Among e-commerce sites, Shopify stores in particular, there are a number of businesses for which perfect images are survival critical. These can be photo stocks, for instance, where images themselves are a commodity that needs to be presented in the best possible way.
These can also be sites that sell jewelry. For example, the owner of one such site wrote that vibrancy of colors is “critical to selling jewelry,” adding, “I risk having a customer return an item saying it looks different or worse never buying it in the first place since it looks dingy.”
When it comes to the quality of images for online stores as well as their loading speed, three things are paramount:
Let’s take a look at each of these factors in relation to Shopify. We’ll explain why a custom Shopify theme is the best option for image-reliant businesses like online jewelry stores we’ve mentioned above.
The Shopify team has gone the extra mile to make the platform truly image-friendly. These are some of the image enhancement features currently available on Shopify.
✦ CDN (Content Delivery Network) and caching to speed up loading of images. How fast an image loads is no less important than its quality. This is one of the factors that Yahoo! and the like take into consideration when indexing web pages.
Shopify store owners can expect their images to appear on the screens of their visitors’ devices in a split second whatever corner of the world they reside in. This is because once a new image is added to a store, its replica is created on one of the servers across the globe that make up the CDN. Therefore, the response time for an American and an Italian, for example, is identical regardless of the distances to the host.
To improve this functionality even further, the CDN servers don’t remove copies of web pages once they’ve sent them to users but keep them for a specific period of time (cache them). There’s no need to create another copy of a page. The result is obvious: a faster loading time.
What’s really exciting about the CDN feature is that Shopify store owners don’t have to set up anything themselves. Everything is done automatically.
✦ Thumbnails. These tiny images normally serve as product group indicators.They are very useful from the UX perspective but can be a performance sinker on certain e-commerce systems. Shopify, however, ensures that thumbnails don’t affect loading speed out of the box.
✦ WebP. You probably know that the main image formats are .png, .gif, and .jpeg. Of these three, the last one is widely used to display goods on sites. The main reason is a great balance between quality and the number of bytes it weighs. .png files, in their turn, are best suited for logos since they weigh a lot and thus can cause a site to crawl.
Shopify provides a great feature when it comes to enhancing images in these two formats. It applies a new, advanced format to them — WebP. The size of an image in this format is a third less than that of the originals with no visible loss of quality.
There are a couple of caveats related to WebP (not all browsers render WebP images and you can’t add images in this format straight to Shopify), but in general it’s a tremendous speed booster that online merchants get without lifting a finger.
✦ Responsiveness. There is no Shopify theme that would not render equally well on devices with different screen sizes and resolutions. To make this possible, when you upload a new image to the system, Shopify instantly creates a number of its copies of different sizes behind the scenes.
Then, when a Shopify site is opened on a specific device, the system determines its screen size and picks the corresponding copy from the pool of images it has made. Thus, online merchants don’t have to worry about the responsiveness of their images. Again, it all happens off the shelf, with no involvement of store administrators
Along with the default optimization capabilities, owners of Shopify stores can take additional steps to ensure perfect rendering and high loading speed of their images. Let’s look into that next.
No matter how advanced an e-commerce platform is, if an image is of inferior quality or too large, it will not render properly without additional tweaking. That’s why Shopify store owners are advised to bring their images up to an acceptable standard before adding them to the system.
We’re not going to talk about image optimization techniques in this post. Visit the Shopify blog for the relevant information. Most of the methods described there are DIY and require no more than time and some creativity on your part.
Even by leveraging the power of Shopify and using all the right optimization techniques, though, there can be another obstacle as far as displaying quality images is concerned. This brings us to the next point.
The type and quality of a Shopify theme can also impact how well images render. As you certainly know, there are three main types of themes:
The first two can be free or paid. The last type is always paid. It’s the most expensive and takes the longest time to build. However, it’s custom themes that can give the owners of image-reliant Shopify businesses true value. Here is why.
One of the most attractive features of a custom theme is that a Shopify developer can give it any functionality to meet unique business requirements. This is impossible with ready-made themes, where store owners’ hands are tied by the capabilities that the theme creator has given them.
Freedom to add any features comes in handy when working with images. Shopify developers can make sure that images correspond to the guidelines for image sizes and color profiles that Shopify has put in place by creating corresponding filters.
A custom Shopify theme includes only the code that is absolutely indispensable for the smooth running of an online store. This hugely speeds up a site operation. Thus, your images will load faster as well. Ready-made themes, on the other hand, are notoriously famous for lots of extraneous code.
A big problem with customizable themes is that once you make some changes to them, you can’t take advantage of new features that the theme creator adds from time to time.
As for a custom Shopify theme, you have a complete control over new features. You can also be confident that a theme has been thoroughly tested on all major types of devices and operating systems. Thus, your images will always render without errors.
This is something free ready-made themes are often guilty of. You wouldn’t want your perfect image to suddenly fall apart when displayed on an Android-powered device, would you?
No e-commerce site can achieve success without high-quality product images to appeal to the target audience’s senses. For certain online stores, such as those that offer jewelry, immaculate visual presentation of merchandise is crucial.
Shopify is an excellent platform for working with images. It uses a CDN to display visuals to people across the globe with no time differences. It converts .jpeg and .gif files to the cutting-edge WebP format to make image sizes smaller without compromising their quality. It automatically optimizes thumbnails and creates several copies of the same image to make Shopify themes responsive.
In addition, the platform allows site owners to additionally upload images of required sizes even if a huge image has been added to the Shopify admin. Our Shopify developers use this feature when building custom themes.
Along with those core capabilities, Shopify store owners can apply tried-and-true optimization methods to further improve the quality and loading speed of their images. Finally, by choosing a custom Shopify theme development, merchants can be confident that visitors will see their images in the best way possible.
If you’re looking for eCommerce development experts who can build a custom Shopify theme for you from the ground up or customize your current theme to make it more functional and convenient, the GetDevDone Shopify developers are at your service.
With 15 years of industry experience, we have successfully completed over 300 Shopify projects. We have extensive expertise in optimizing Shopify stores for speed and search engine visibility. Whatever problem you might have to solve, we’re just a form submission away from lending you a helping hand.
Talk to us today. We love Shopify and know everything about it.