“A brand is not just a logo, it’s the overall impression & experience you give to your audience.” — Amy Locurto
Take a second to think about your favorite brand. What makes it stand out from its competitors? For example, let’s talk about Apple. The marketing strategy behind Apple exceeds the elegant, minimal logo that we all know too well. The success of the company can be attributed to its strategic use of marketing. But what does that mean? How has it grown to become one of the most valued brands in the world?
A purposeful brand entails supplying a vision and feeling that is more than a logo. Achieving the success of this visual involves turning the ordinary into something alluring. One particular method of achieving this is through custom imagery for your website.
Looking at our first example, Apple has a thorough guide for app store marketing in branding. Its regulations highlight the rulebook in creating powerful communication for success.
In its marketing guidelines, Apple highlights the significance of custom imagery and authenticity as a tool: “Feature your app in a realistic and authentic manner when creating custom photography and video. Reflect the visual style of your company.”
The key to this guideline is the “visual style of your company.” Marketing strategy research concludes that an abundance of content, copy, and information doesn’t work as well as it has in the past. A reason behind Apple’s success can certainly be attributed to its simple, authentic use of imagery and design. The use of modern and minimalistic brand imagery is consistent throughout all mediums, whether it is packaging, Apple store design, or the Apple website.
A Fast Company article reiterates the importance of this by concluding that Apple “has created a brand culture that has attracted a passionate brand community of followers who identify with the brand’s innovativeness, simplicity, and coolness.”
In the world of websites, the concept of creating compelling, custom visual assets is worth more than you might think.
Using Images Online
Now that we’ve discussed the importance of website imagery let’s focus on the specifications for using photographs on your site. A question we often get from our clients is, “If I send you the photo, can you try to use it on the website?” While we try our best to incorporate each photo, we’re unfortunately not always able to. Here are two rules of thumb that our design and development team follows:
Pixel Specifications for Screen Devices
The number of pixels a photograph needs is largely variable in how the developer plans on using each asset. Our developers work with photographs every day and always see the same confusion. A common misunderstanding with photographs revolves around the difference between pixels for print and screen devices. Our rule of thumb is to match the pixel dimensions of the photograph to the screen size, offering a clear image without any blurring.
Compressing Your Photographs
While photographs absorb a large amount of visual space, they also occupy the most downloaded bytes when loading a website. Because of this fact, compressing and optimizing your images can help you improve your website’s performance by saving downloaded bytes. Compressing your photos means the fewer bytes downloaded in the browser, the faster your page can load for the user to render and read the on-screen content. While it sounds like an ideal situation for your website, you might not understand the implication of using photos that affect the load speed of your website. A Fast Company article “How One Second Could Cost Amazon $1.6 Billion In Sales” reviews the extensive research regarding the tolerance of slow website speeds can be compared to waiting in line or receiving slow service in a restaurant.
“Research on U.S. Net habits suggests that if this sentence takes longer than a second to load, many citizens will have clicked elsewhere already.”
You might be asking how this affects your website. It’s all about impatience. The article explains that one in four website visitors will leave the site if it takes more than four seconds to load. The implications of this statistic are shocking and can cost your company more than you might imagine.
“Amazon’s calculated that a page load slowdown of just one second could cost it $1.6 billion in sales each year. Google has calculated that by slowing its search results by just four-tenths of a second they could lose 8 million searches per day—meaning they’d serve up many millions of fewer online adverts.”
By this point, you get an idea about the importance of having web-optimized images for your website. Luckily for us, there is a myriad of resources we can use to make this happen.
Image optimization can be tricky — there is no one correct answer to reducing the size of various files. We have to consider the pixel dimensions, file format and quality of the photo. Unless our images are transparent or require a larger amount of colors, we prefer to save images out in JPEG format at a minimyum. When saving photos out in a JPEG format, you can control the compression level in programs such as Photoshop.
After you’ve saved out your custom image, there are further steps you can take to ensure your compression rate benefits your website. One of our favorite resources is TinyJPG. TinyJPG drives home the value of this tool, explaining that “JPEG is the most popular format for photos on your websites and apps. Many JPEG files do not use optimal compression, wasting valuable bytes.” Drag and drop your files into TinyJPG and watch the compression happen before your eyes.
Image Compression into 2021
While JPEG is good for most amateur web designers, WebP lossless images are typically thought of as the next-gen format of web imagery. Not only are they compressed for optimal page loading and site speed optimization, but don’t lose image quality during dynamic resizing. For those who are also looking for some small level of copywriting infringement, they are also more difficult to reuse as they don’t easily scrape from a standard website. You can learn more about WebP lossless images in this Google article.
Finishing Thoughts
When done properly, visual images do not only compliment your online persona but help unify your brand, sometimes creating emotional connections without ever needing to include words. As with all great branding, creating a stunning online presence takes both deliberate thought but also the right technical skills to generate a cohesive presence. Where a picture might be worth a thousand words, if your pictures are pixelated or take too long to load, the “words” your photos are trying to convey will be washed out, forgotten before they ever appear on whatever size screen they should be appearing on.
Lastly, if you need help figuring out the mechanics behind putting a photo on a site, just let us know. It’s not just our job, we love finding the right imagery to convey a diverse story!
