Image Style Guide and Best Practices
Images play a crucial role in web design, serving as powerful visual elements that enhance user experience and convey brand messaging. Selecting the right images can significantly impact website engagement and conversion rates. By focusing on quality, relevance, and optimization, you can ensure that images not only complement your content but also improve your site's loading speed and SEO performance.
Remember to consider accessibility when choosing images, providing alternative text descriptions to make your content inclusive for all users. As you approach your web design strategy, incorporate images thoughtfully, prioritizing aspects like consistency, aesthetics, and functionality. Ultimately, the right images will help you create a compelling online presence that resonates with your audience and drives your business goals forward.
Containers
Each image is placed in what is known as a “container”. Containers are invisible boxes that control how the image appears alongside other content on the page. A container can be a long rectangle, a shorter rectangle, or a square. Every website has a layout of images and text in relation to each other. Each image and textbox are placed in containers that can be adjusted depending on the size of a viewer’s screen. For example, someone using a mobile phone is going to see a different layout and size of images and text because their screen size is smaller than someone who is using a computer screen. The way that web developers address that issue without having to have completely different websites for each user and screen reader is to create a universal code that basically just says, “This is a box.” It doesn’t matter what size of box it is yet (we’ll get to that later). It’s more important to understand that there is a box and that the content must go in it.
How Images Display on the Web
File Types: .jpg, .gif, and .png are the best image files to use on most websites.
File Size: Use images that are 500 KB or less to help your site load quickly. The limit for the total storage available for images is 20 MB.
Aspect Ratio refers to the relationship between an image's height and width.
Image Width Keep in mind that images with a narrow width may look good on mobile devices but can be blurry on a computer just because a computer has a wider screen. 2500 pixels in width is usually an ideal to aim for. You can upload images that are smaller than 1500px wide, however they may appear blurry.
Resolution To find your image resolution you can multiply the dimensions of the image and divide that number by 1 million. The results would be in megapixel or MP. Image resolution refers to the level of detail in an image, determined by the number of pixels it contains. It's often measured in pixels per inch (PPI) for digital images and dots per inch (DPI) for printed images. Higher resolution means more pixels, leading to sharper and more detailed images, but also larger file sizes.
Legalities
Legal Image Ownership
It’s not legal to download images from social media or a google image search to use on your website unless you have the express permission of the person who posted the image.
You must have the legal ownership or copyright of the images that are on your website because you can be held liable and that can be very expensive.
If you are using your own images that were taken by a professional or yourself then you can ensure that you won’t find yourself in trouble with a copyright infringement.
Alt Text
Alt text is a line of code that is not usually seen by the average user but is read by devices. An example of a use of this would be a e-reader device that someone with visual impairments might use to navigate the internet. They might not be able to visually see the image, but a brief description can help them with that piece of information that might be relevant to what else is on the screen. Including alt text in every single image on your website is crucial because search engines are looking for that and making sure that your site is ADA compliant. An ADA compliant website is going to come up first in a search engine query over one without it.
Building Your Image Library
Stock Images & Graphics
A web designer can provide you with some stock images and some have the ability to create a few graphics for your website if needed. Keep in mind, though, that images that are personalized to your business are a better experience for your audience. It makes your website look more authentic and professional. When using a large quantity of stock images, you run the risk of another similar business or website using that image as well.
Social Media or Google Images
Social media and Google images may be a lower resolution or size because the platforms have size restrictions. That may not look good on your website. For example, Facebook has a maximum file size of 4 MB. You may need to use a larger file size than that to get the resolution and clearness that you are hoping for on your website. The best practice is to try to find the original source of the image. That means looking through your phone, computer, or having the photographer upload the originals to a drive.
Photographer
You may need to hire a photographer for personalized images of good quality. They can come to your business or location and help you get a personalized experience. Professional photographers are oftentimes a local business and it is a great way to re-invest in your own community.
The most important thing to remember about images for web design is that quality matters much more than quantity. Unique images that are personalized to your marketing and align with your branding are going to go much further for you in the long run and will add more value to your business as a whole. Quality images are an investment in your business and it reflects how you will be perceived by potential new clients.