A look back at the 1990s through the 2020s shows how website design imagery vibrantly transformed from static, pixelated, flat symbols, to fluid, high-quality, dimensional visuals. Now, today’s challenge for web designers is taking advantage of the advanced visual technologies to find a stylish visual language that enhances your site’s overall aesthetic, user experience and performance.
In this article, I’ll review the role of imagery in web design, the manifold types and the game-changing tools available (like these free icon packs). Then I’ll sit down with Adi Huri, creative product manager for WOW (Wix’s visual innovation team), to uncover five best practices for implementing visuals when it comes to how to make a website.
What role does website imagery play in 2022?
A picture speaks a thousand words, and I have to agree when it comes to your website’s visual impact in 2022.
We live in a world overwhelmed with images: The average adult spends about 30 minutes a day browsing Instagram’s whopping 95 million daily-uploaded photos. On top of that, we encounter between 4,000 to 10,000 advertisements daily.
That being said, when you design a website, you want visitors to look at something new. Choose imagery that doesn't just follow trends, but helps audiences remember your stand-out brand identity. Today, you can take advantage of advanced UX design tools to create a striking visual experience for your visitors that doesn’t sacrifice performance or security.
Types of website imagery
In this section, I’ll go over the image types you may use while creating your website. I’ll also include each type’s purpose with tips to help you optimize, plus some examples of each type in action.
Photography
We usually see product or event photographs as strictly marketing tools, but website photographs can do so much more than just sell merchandise and tickets. Website photography can visually draw people into your design, selling not just one product—but an entire vibe. You can also apply plenty of tools, like filters or cropping, to enhance your images’ visual identity.
To start, consider using these two common photograph types on your website:
Stock photographs
Many websites requiring a high volume of imagery or limited resources opt to use high-quality stock photos on their website. Though not exclusive to your brand identity, they can portray more universal visual ideas (e.g. generic nouns: people, like "families"; places, like "beaches"; things, like "breakfast"; and ideas, like "partying.") Stock photos always have a license attached to them, too.
Tip: Wix offers its users an entire library of exclusive stock photography for users to easily apply to their websites. An enthusiastic in-house team produces most images to reflect current trends, too. If you can’t find what you like, you can also integrate royalty-free images from popular collections like Shutterstock and Unsplash within the Wix Editor.
Custom photographs
On the other hand, websites need custom photography to visually represent their distinctive elements, whether through headshots for an About Us page, product photography, or proof of client work. While custom photography can be expensive, today's mobile devices can do a good job fulfilling many of your website's photography needs–just make sure the photos look professional and are high-resolution files.
Video
If photographs deliver a vibe to website visitors, video does to an exponential degree. With wider angle ranges, lengthier messages, animation and more, videos can help website visitors effortlessly engage with more content. Because of this, designers constantly seek to integrate this powerful optic tool into websites, whether with traditional formats or more trendy, cutting-edge video tools:
Traditional video player
Whether embedding a stock video in your site’s design for decoration or uploading an original video to boost your marketing game, traditional video can act as an informative tool and engage both first-time visitors and loyal customers.
Tip: Wix supports the most popular types of video files and allows you embed videos in your site with as little as one click. Additionally, you can stream video directly from Vimeo and YouTube onto your website with convenient Wix Editor integrations.
The user-friendly Wix Video Maker makes it easy to customize your media’s design and display.
Transparent video
Transparent videos are exclusive to Wix, using an invisible background to bypass the traditional mp4 streaming limits, resulting in animated images that jump right off any device screen. Designers can use this unique technology to complement and give character to a modern website. Plus users can view these high-quality micro animations from any browser or device.
Tip: Wix collaborated with artists, designers and global users to create an exclusive transparent video collection. Can’t find anything you like? Upload and customize your own dynamic designs with our one-of-a-kind tool that lets you manipulate color, rotation, size and animation.
VideoBox
Wix’s VideoBox is not your traditional video player. The decorative web design tool allows users to take videos beyond the traditional format, employing unique effects to create super cool visuals for your site.
From overlays to customized buttons and behaviors, and even adding shadows or borders—you can also apply a Video Mask to cut your media into unique shapes to create an impressive visual effect.
Video Mask
You can also apply a Video Mask to cut your video into a unique shape and create an impressive visual effect. You can choose from thousands of shapes and vector art or upload your own SVG file with a custom shape.
Vector art
Vector files, also known as SVG (scalable vector graphic) files, refer to illustrations built using mathematical formulas. These malleable files allow for customization of shape, size and color. While we may take these sophisticated graphics’ ubiquitous internet presence for granted, you may not realize vector files single-handedly changed the web design game.
Tip: Wix WOW team’s exclusive Vector Art collection includes thousands of bespoke vector illustrations and icons commemorating important social dates, holidays, seasonal trends and unique causes (such as our latest collection supporting Ukraine). These visuals can expand to any size without pixelation—an essential quality for today’s designer that is ideal for performance.
You can also upload your own SVG file and customize it with the Wix Editor: on top of playing around with color, opacity, size, shape and animation—try flipping and rotating these visuals for special effect.
As text files, SVGs are especially vulnerable to malicious security attacks. But thanks to Wix’s sanitation engine, you can upload your own Vector Art with the piece of mind that it won’t breach website security.
Backgrounds
Composing your imagery includes choosing a website background to set the tone for your visitors as they arrive and scroll through your site.
Basic backgrounds, such as solid colors or patterns, can serve as a strong foundation for your site’s content. For those who want a more expressive backdrop, choose from these impressive options:
Image backgrounds
You can use high-resolution graphics or photos to strengthen your site’s visual story. But you don’t have to limit your background to just one image—for example, you can add strips to break up the content or include multiple images. An image background can become even more interesting with other easy-to-apply modern hover effects, image layers and filters.
Tip: When paired with Wix’s 13 scroll effects, you can combine your imagery with an even more engaging quality like parallax scrolling, a technique which slows down your website background’s pace, resulting in a 3D effect as visitors scroll your site. Or try freeze scrolling to hold your background image in place as visitors work their way through your site’s content.
Video background
We’ve already touched on how video impacts audiences today—so it’s no surprise that many website designers now choose video backgrounds over static images to engage users.
Tip: The Wix editor includes three video overlay options to add even more depth to your background.
Gradient background
Website gradients are color transitions departing from one central color point and gradually blending into another. A hot web design trend in 2022, this strong aesthetic looks modern, advanced and adds depth to your design.
Tip: While gradients are complex designs, Wix brings it down to earth. From radial and linear gradients, to our very own cutting-edge Fluid Gradient, you can implement the Wix Editor’s ready-to-use backgrounds without any custom coding.
As you can see in the image below, gradients can also be combined with an image in your site's background.
Expert website imagery design tips
I sat down with Adi Huri, Creative Product Manager for WOW, to point out website imagery best practices. We also hand-picked a few of best websites from Wix users websites to visually inspire you:
Website imagery tip 1: have fun with image tools
Today’s built-in tool arsenal allows you to easily apply visual effects that were once only attainable with complex code or digital design programs.
“We at Wix have created these visual tools to make your life easier and help your website stand out. We always have performance in mind,” says Adi. “These aren’t only for starters, but can save anyone with a vision time and money to create quality visuals”.
Huri adds, “For example, tools like our Video Mask that allow users to crop their own videos into custom shapes, filters or overlays is something we once needed professionals and external software to create. Now, anyone can apply these effects in seconds”
Website imagery tip 2: add a favicon to your website
Your website imagery should uplift your design, amplify your branding efforts and feel organic for visitors. When choosing vector art, photos or backgrounds, aim for styles that form a cohesive aesthetic with your brand assets. Most importantly—include your logo for visitors to see in your site’s imagery.
With this in mind, don’t forget one tiny element: your website’s favicon. This tiny icon is displayed on the tab at the top of your website browser, as well as your bookmark bar, history and in search results pages.
“A favicon plays an important role in website navigation,” says Adi. “I don’t know about you, but I have about a hundred tabs open right now—and if a website doesn’t have one, I won’t be able to re-find it as I browse from one site to another.”
OK Drugs’s online CBD shop nails a cohesive presence—from the color scheme and type design, to product photography and, of course, the favicon.
Website imagery tip 3: don’t forget social share images
Huri emphasizes that website owners often overlook social share images—or the image displayed when a URL is shared on apps like Facebook and Whatsapp. Even if your shared webpage doesn’t include imagery, social share images can give audiences a good visual preview of your site.
For each website page, choose a social share image that reflects its topic. Since every platform has its own criteria for social sharing images, titles and descriptions, make sure you preview before pressing publish.
Website imagery tip 4: pay attention to quality
We’ve moved past pixelation, blurriness and imbalance (unless, of course, your site hits on the nostalgic Y2K aesthetic trend.) However, those crystal clear visuals shouldn’t come at the cost of your loading speed. Get the best of both worlds with these rules of thumb:
File formats
With so many types available online, make sure you upload the best file format for your illustrations, photographs, videos and more.
Use high-resolution media
On top of selecting authentic, relevant imagery for your design, make sure the files are also high resolution.
“We understand how important performance is—and create tools that provide you with advanced features, doing everything on the backend to make sure it will be optimized for the web” says Adi. “We always have performance in mind, so this shouldn’t stop you from choosing high-quality media. We will optimize it to the exact dimension displayed on screen, without any loss of quality.”
Website imagery tip 5: make your images accessible
Web accessibility gives everyone the opportunity to interact with your website, regardless of ability.
When it comes to your site's imagery, include alt-text to enhance the experience for visitors using screen readers. The HTML text accurately describes the content and function of your site’s images in a brief sentence or a few words. Write alt-text as concisely as possible. Without alt text, screen readers can only notify a user that the page contains an image.
“Sometimes you will see alt text that is not descriptive enough. But our imagery is not meant to be just a technical description for visitors—it plays an important role in setting the vibe of your site,” Adi says. “We need to elaborate with more information to help people who can’t see properly discern what you want to communicate with your visuals.”
Adding descriptive alt text touches on another aspect of your site’s performance: SEO. Search engines use alt text to decipher your website’s photos and graphics, making it an important practice for improving organic search performance.