Rules to Better Websites - Graphics - 14 Rules

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.

Every time you add an image to your content, make sure it:

• Is readable if it has any text on it
• Has been optimized
• Looks consistent with others on the same page
• Has at least 800px width (except for logos, icons, and profile images)
• (optional) Is not in dark-mode - Light background images look better most of the times

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.

The first thing is to save your graphics in the right format and size. After that, you should run an image optimizer.

Some tips and techniques to keep in mind as you work on optimizing your images:

• Use automated tools to ensure that all of your images are always optimized (E.g. Optimizilla)
• Don't be afraid to dial down the "quality" settings if the results are very good and byte savings are significant
• Remove unnecessary image metadata like geo information, camera information, and so on

---

WordPress

If your website is running on WordPress you should install and activate the plugin WP Smush. It scans every image you upload – or have already added to your site – cuts all the unnecessary data and scales it for you before adding it to your media library.

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.

SVG

Stands for "Scalable Vector Graphics".

SVG is best suited for scalable vector graphics, ideal for logos, icons, and illustrations that need to maintain quality at any size or resolution.

✅ Advantages

• Scalability - SVGs are vector-based, meaning they can be scaled to any size without losing quality. This makes them ideal for logos, icons, and illustrations that need to look sharp on all devices, from mobile screens to large monitors - No pixelation
• File size - Since SVGs are based on XML, they often have smaller file sizes compared to raster images, especially for simple graphics
• Editability - SVG files can be edited with code or vector graphic software, allowing for easy customization and animation

❌ Disadvantages

• Complexity - SVGs are not ideal for complex images like photographs, as their file size can increase significantly with added detail Browser compatibility - While most modern browsers support SVGs, there may be limited support for older browsers or devices

Best use cases

• Logos
• Icons
• Simple illustrations
• Infographics

Examples

PNG

Stands for "Portable Network Graphics".

PNG is best suited for images that require transparency or lossless compression, such as logos, icons, and illustrations with sharp edges.

✅ Advantages

• Transparency - PNG supports transparent backgrounds, making it perfect for images that need to be layered over other content
• Lossless compression - PNGs use lossless compression, meaning they retain all image data, resulting in high-quality images without any degradation
• Color depth - PNGs support a wide range of colors and are excellent for images with text, sharp edges, and flat colors

❌ Disadvantages

File size - PNG files are generally larger than JPGs, especially for complex images, which can slow down page loading times Limited animation - Unlike GIFs, PNGs do not support animation

Best use cases

• Images with transparency
• Logos and icons where color quality is critical
• Graphics with sharp edges and text

JPG (AKA JPEG)

Stands for "Joint Photographic Experts Group".

JPG is best suited for photographs and complex images where rich colors and gradients are essential, with some trade-offs in compression and quality.

✅ Advantages

• File size - JPGs use lossy compression, which significantly reduces file size, making them ideal for large images like photographs
• Widespread support - JPGs are widely supported across all browsers and devices, making them a safe choice for most web applications
• Good for complex images - JPGs excel at compressing images with complex color variations, like photographs, while maintaining acceptable quality

❌ Disadvantages

• Loss of quality JPG compression is lossy, meaning that some image data is lost during compression, which can result in a noticeable reduction in quality, especially after multiple edits and saves.
• No Transparency - JPGs do not support transparent backgrounds, limiting their use in certain design contexts.

Best use cases

• Photographs
• Large, detailed images
• Web banners

Examples

WebM

Stands for "Web Media File Format".

WebM is best suited for high-quality animations and video where performance and file size efficiency are crucial.

✅ Advantages

• Superior compression - WebM uses advanced video codecs like VP8 and VP9, allowing for higher compression without a significant loss in quality, resulting in smaller file sizes compared to GIFs
• High quality - WebM supports full-color depth (24-bit) and high frame rates, making it ideal for high-quality animations and video with smooth playback and vibrant color
• Audio support - Unlike GIFs, WebM files can include audio, offering a more versatile option for multimedia, tutorials, or short clips that require sound
• Performance efficiency - WebM is optimized for efficient playback, reducing CPU usage and battery drain, especially important for mobile devices

❌ Disadvantages

• Limited compatibility - WebM is not supported by all web browsers (e.g., older versions of Safari and Internet Explorer), which can lead to accessibility issues without fallback options like MP4 or GIF
• More complex implementation - Embedding WebM requires more knowledge and effort than GIFs, particularly if fallback formats are necessary for cross-browser compatibility

Best use cases

• Video-based animations with audio
• High-resolution web animations (e.g., UI/UX interactions, tutorials)
• Short videos with complex visuals or gradients that would be degraded in GIF format

GIF

Stands for "Graphics Interchange Format".

GIFs are appropriate for simple, short loops where universal compatibility and quick implementation are key.

✅ Advantages

• Animation - GIFs are widely known for their ability to support simple animations, making them a popular choice for memes, short looping videos, and animated icons
• Transparency - Like PNGs, GIFs support transparency, although the transparency is binary (fully transparent or fully opaque), which can lead to jagged edges in some cases
• Widespread support - GIFs are supported across all major web browsers and devices, ensuring compatibility

❌ Disadvantages

• Limited color palette - GIFs are restricted to a 256-color palette, which makes them less suitable for complex images or photographs that require rich color depth
• File size - Animated GIFs can be quite large in file size, which may slow down page loading times, especially if multiple GIFs are used
• Quality - Due to the limited color palette and lossy compression, GIFs are not ideal for high-quality images or graphics with subtle gradients

Best use cases

• Simple animations (e.g., loading spinners, small banners).
• Memes and short video clips
• Low-color images with transparency

Optimization tips for GIFs

If you decide to use GIFs on your website, here are some optimization tips to ensure they don't negatively impact performance:

• Reduce the number of frames - Fewer frames can lead to a smaller file size without drastically affecting the animation quality
• Optimize colors - Use tools to reduce the color palette of your GIF to the minimum needed for acceptable quality

BMP

Stands for "Bitmap Image File".

❌ Avoid BMPs for web use

While BMPs offer high-quality images, their large file sizes and lack of compression make them unsuitable for web applications. If you need high-quality images, consider using PNG or JPG instead.

---

Choosing the Right Format

Understanding the strengths and weaknesses of each format can help you make informed decisions when adding images to your website. Here are some general guidelines:

• SVGs for graphics that need to be scalable and maintain clarity across all screen sizes, like logos and icons
• PNGs when you need transparency or when dealing with images that require high-quality, lossless compression
• JPGs for photographs and other complex images where a balance between quality and file size is important
• GIFs for simple animations, low-color images, or when you need a format that supports basic transparency. GIFs are a go-to for creating engaging, lightweight animations and small graphics

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.

The right way to do this is to copy the image locally and upload to your own server, so you have total control over the image.

<img
  src="https://some-external-url.com/images/open-extension.png"
  alt="Open extension"
/> 
<dd>Figure: Open extension</dd>

<img src="https://ssw.com.au/images/open-extension.png" alt="Open extension" /> 
<dd>Figure: Open extension</dd>

Note: For copyrighted images, you should always mention the source.

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 Type	Prefix	Example
Banner	ban	banSSW.gif
Icon	ico	icoSSW.ico
Screenshot	Screen	ScreenCodeAuditorMainWindow.gif

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.

Which formats and sizes to use?

The format of the image must be one of PNG (a W3C standard), GIF, or ICO. You can export your favicon in all necessary sizes on Favicon Generator website.

How to implement the favicon?

1. Copy your company's favicon to the root of the site
2. Add the highlighted code below inside the <head> tag in your HTML

<head>
  <title>Page Title</title>
  <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
</head>

Figure: One line of HTML lets you add your company's icon to your web page

This works for most websites, including ASPX WebForms, MVC and WordPress.

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.

<img src="Images/Heading_Welcome.gif>

<h1>Welcome to My Page</h1>

Screenshots are a very important part of websites these days. Be careful to avoid unnecessary toolbars and taskbars in screenshots.

Tips:

• Use a region screen shot if appropriate (however the URL is generally helpful in most browser screenshots)
• Go full screen
• Always have the 'Auto-hide the taskbar' option checked

Many websites have screenshots images to illustrate content instructions. With so many different screens sizes and resolutions, you probably have seen a screenshot that was unreadable.

You don't want that in your website! Always make sure the screenshots you share as content are readable to the user.

Only keep what is relevant

Crop your image when you can, keeping only the relevant areas of the image.

In the cases where you do need a full screenshot, it's a good idea to allow users to open the image in a bigger size, using lightboxes for example.

Mobile screenshots

Most times screenshots bad readability is caused by too small texts in images, however too big images can also make it difficult for the reader to follow.

Modern mobile devices have extraordinary screen resolution, which makes screenshots huge. Another problem is that these screenshots are in usually in portrait dimensions (image is taller than it is wider).

When adding a mobile screenshot, make sure its width is about 50% of a desktop screen.

Many people will simply "plonk" an image onto a web page in between or next to a block of text. This interrupts the flow of the page and gives a disjointed, unprofessional impression.

A good technique is to set a CSS style to images. This style will be consistent and easy to be used by any person who might edit the website content.

It's also important to choose the correct semantic formatting for images. Different HTML codes might give the same look and feel, but the best way to add images to your site is using <dl>, <dt>, and <dd> tags.

A sprite is an image that has all of your other images inside of it, so if your sprite has 5 images, you’d be getting rid of 4 HTTP requests and speeding your site’s loading time up by the time for each of those 4 requests latency. You will use CSS selectors for each link to display only a portion of the image sprite - effectively showing just the image you need.

The benefits to use CSS image sprites are:

• to save bandwidth
• to reduce HTTP server requests
• to speed up page load times

Ensure that the file size of your master image isn't greater than the sum of its pieces.

Specifying the width and height properties for an <img> tag of HTML can sometimes turn out to be more trouble than it's worth, particularly if the image is later updated with different dimensions. If the height / width ratio doesn't match that of original image, the image might be stretched.

Adding fixed widths to your images may also disrupt the responsiveness of your content.

In other words, you should not have the image dimensions specified in HTML unless you have a very specific reason to do so. Use CSS if you need to specify images dimensions.

<img
  src="images/codeauditor-logo.png"
  alt="Code Auditor logo"
  width="150"
  height="100"
/>

<img src="images/codeauditor-logo.png" alt="Code Auditor logo" />

Specifying the width and height properties for images on your web pages can sometimes turn out to be more trouble than it's worth, particularly if the image is updated with different dimensions. Adding fixed widths to your images also disrupt your content on any responsive websites.

In other words, you should not have the image dimensions specified in HTML unless you have a very specific reason to do so. Use CSS if you need to specify images dimensions.

<img src="MyPic.gif" width="93" height="25">

<img src="MyPic.gif">