Rules to Better Websites - Graphics

The quality of your images is a subconscious message to your audience.

Using high-quality images on a website is essential for creating a visually appealing and engaging user experience. High-resolution images enhance the site’s aesthetics, build credibility, and improve user engagement. If you use low quality pictures, then you unintentionally suggest the same message about your product.

However, it's important to balance image quality with performance, ensuring fast loading times without sacrificing clarity.

For this reason, we encourage you to choose only high quality photos and to avoid unprofessional cartoons and clip-arts.

A nice looking image can be harmful to your website if it's not optimized. It's important to optimize images for the web because the fewer bytes the browser has to download, the less bandwidth the client uses, and the faster the browser can download and render your content on the screen.

If you've ever wondered why the formats of graphics on the web differ from each other, you're not alone. With various options like SVG, PNG, and JPG, it can be challenging to know which format to use in a particular situation. Choosing the right format is crucial, not just for the aesthetics of your website, but also for its performance and optimization.

When want to show an image from the web on your website, the easiest way is to just copy the image's path and add it. This is not a good idea as the original host of the image can delete it, which will cause a broken image in your website.

It is important to sensibly name your images. We don't use "img" (in the same way we don't use "tbl" for tables).

However, for special types of images we do include a prefix.

Image files are outside the realm of most database developers mind sets. So I've seen many very messy websites that have duplicate images all over the place. You only need an image in one place in your website. The rule is that if it is used once, it goes in the associated directory - e.g. /ssw/Company/Images OR if it is used more than once, the image is moved to the root images directory - e.g. /ssw/Images. One of benefits of avoiding duplicate images is speed up web surfing for your users.

A Favicon is an image file included on professionally developed sites. The favicon reflects the look and feel of the website or the organizations' visual identity.

Using text rather than images has multiple advantages:

• Downloads faster - a users patience extends to about 7 seconds.
• Cheaper to update - a simple find and replace.
• Discoverable by search engines - if people can't get to your site, what's the point of it being there?
• Readable on an iPhone - Images will either be resized or require scrolling, which would create difficulties for readability.

Screenshots are a great way to explain instructions or share information, but if they’re blurry or too small, they quickly become useless. With so many different devices, screens, and resolutions, unreadable screenshots are a common mistake.

Always check that your screenshots are clear, properly cropped, and readable. If people can’t see what you’re showing, your message gets lost.

Screenshots are a very important part of websites these days. Ensure they are clean and free of distractions like browser tabs, toolbars, debug windows, and taskbars.