The Purpose and Styling of Images
Bits & Bytes Recap
When it comes to creating a compelling web experience, visuals are far more than decoration – they are a powerful tool for communication, engagement, and brand identity. Whether you're building a blog, designing a landing page, or creating an online resource, the right image can grab attention, instantly convey meaning, and leave a lasting impression. In this article, we will explore why images matter, how to use them with purpose, and best practices for styling them effectively on the web.
Why should I use images?
The human brain processes visuals (such as images and icons) faster than text. Visual content helps users understand and absorb information quickly. Images also influence first impressions and engagement.
Did you know that, on average, users only read about 28% of text on a page? According to Visual Content Statistics for 2025: Continue to Engage and Amaze, Celeste Yates states that visual content gets 94% more views than text-only content. She also states that pages combined with visual and text content increases the users’ information retention by 65%! By including images on your page, you enhance not only the design but also the readability and effectiveness.
Use Cases
Images are most effective when used with clear purpose and intent. When they are used strategically, they can:
- Communicate information visually (and faster than text)
- Enhance the user experience by making the content more scannable, emotional, and memorable
- Support branding by maintaining tone and style consistency
- Assist SEO and accessibility with appropriate alternative text and image naming
Images that communicate information visually and enhance the user experience typically add meaningful context to the content on the page. For example, the “page break” that we have below includes text that reads “Finals are stressful. Come rest and decompress.” with a call-to-action button to register. We included an image that supports this message – a college aged student lounging on a couch in a room with shelves that have books and other decor items.
Images that are used to support your branding don’t always need to include the “U” logo. For example, the Center of Community & Cultural Engagement hosts a “Wellness Wednesdays” program. Their design included an icon of a lotus flower, often associated with wellness or personal health. This icon is used wherever the “Wellness Wednesdays” program is mentioned. By keeping the icon consistent throughout the site, users will automatically start associating the icon with information about the program.
Styling Practices
One of the most important things to remember when styling images is to use sharp, high-quality, and relevant images. Quality images help your site look more professional and a sense of authenticity. When adding images, consider mobile responsiveness by viewing the page on a phone or tablet to see how the image is positioned and sized on smaller screens. Also, keep images under 100 kb for optimal load.
You should also maintain a consistent style including tone, color scheme, and aspect ratios when it comes to images. You may even consider coming up with a theme based on your site's goals, and then pick images that fit the theme.
Q & A
Q: Is it better to use icons or photographs?
A: Both are great options to use on your site and can be used in tandem. Icons are great to support smaller ideas or pull focus to call to actions. Photos are more aggressive but can provide more emotion and connect to users. Whatever you go with, just be consistent in style and sizing.
Q: In what contexts does an obscure image communicate more effectively than a literal one?
A: Whenever picking an image, ask yourself what the mission or goal of your page is. Choose images that add to that mission or goal. If the image picked is very “on the nose” with the content but does not add value to the page, consider using a different image. Know that any image that adds to your goal will be a great image to use.
Q: If an image is just decorative and requires no alternative text, should I include it on my site?
A: Decorative images can enhance your design by elevating the primary content. They are useful for tying together overarching designs and branding. For example, using a nice pattern in the background of your main content can serve to break up sections on a page but doesn't need to necessarily be identified by a screen reader since it isn't important to understanding the page messaging. For more information on what a decorative image is, check out our Bits & Bytes on Image Accessibility.
Wrap Up
Images can serve as assets on a website when they are used thoughtfully and intentionally. Before adding an image, ask yourself: “What purpose does this serve?”.
Lastly, remember:
“A well-used image does more than decorate. It communicates.”
- Unknown
Happy Designing!