For developers who constantly tackle programming problems and build solutions, finding answers through code in the wild can be a big time-saver. The Developer Relations Team at Cloudinary is proud to announce the community tool MediaJams, which aims to educate you on media with descriptions of typical use cases along with sample code for building them.
Resizing images with JavaScript (JS) creates nifty effects, many of which you cannot do in Cascading Style Sheets (CSS). However, even though you can automate a zoom effect with JS to enable users to zoom in and out of images, limitations abound.
CSS image overlays are a common technique for transposing text or images over each other. For example, you can combine images and text on a website when captioning an image, or place a live text element over a button.
Did you know that humans process imagery 60,000 times faster than text? In fact, 90% of the information our brains process is visual, which makes it seem a no-brainer—pun intended—that brands are connecting with consumers through visual content online. However, adding media assets like images and videos to websites comes with a tradeoff: the more media, the heavier the site, which results in a noticeable slowdown in page loads and a reduction in content quality.
For Stylight, a leading online search platform for fashion, beauty and design, uptime, performance, and customer experience greatly affect the bottom line. Available in 16 markets, the platform is visited every year by 120 million users who can search through 1,500 shops to find the best deals. Once they find their favorite product, they are redirected to one of Stylight’s partner shops where they can proceed with their purchase transaction.
Imagery and video are proven ways to promote engagement and conversion on e-commerce sites. One study found that 75% of online shoppers say that product pictures are “very influential” for their purchase decisions, with a respondent commenting, “If I can’t see it, I can’t make a decision about it.”
A true digital-native business, everything that London-headquartered MADE.COM does is shaped by its belief that great design should be available to everyone—a brand promise it fulfills by offering high-quality, exclusive home furnishings, and beautiful furniture. As the UK’s first online only furniture retailer, MADE is constantly improving the virtual customer journey through engaging visual experiences. As Edmund Kleiser, head of technology operations, states, “Strong and compelling imagery is everything to us to help us engage our audience.” Shoppers love to see ultra-high quality images of MADE’s 6,000 sofas, storage solutions, and floor lamps in exquisite, sharp detail. Huge care goes into defining the quality and aesthetic of product pictures, including the choice to deliberately limit the color palette.
tl;dr;
Cloudinary conducted a workshop at React Summit 2021 to highlight the effect of media performance on websites by correlating it with Google’s Core Web Vitals and other performance measurements. Also presented were typical optimization techniques along with code samples. Here are the recording and the slides.
Optimized media assets have always been essential to website performance. To help developers measure, understand and improve website performance, Google created Core Web Vitals, a subset of Web Vitals that focuses on three aspects of the user experience: loading, interactivity, and visual stability. In June 2021, Google plans to make page experience a ranking factor—so Core Web Vitals and media asset optimization will become even more important.
For years, Google has been updating its search algorithm to prioritize end-user experience, displaying the most relevant and helpful content at the top of search results. The latest—and maybe the most significant—update so far is Core Web Vitals (CWVs), which are new metrics announced a year ago that will, starting in June, begin determining search rankings. With this update, Google is being abundantly clear that visual experience of webpages is paramount.