Rules to Better Websites - Graphics

​​​​

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!
  1. Do you add width and height properties to images in user controls?

    ​Framework pages (i.e., user controls and common layout files) should have width and height properties specified for all images that are used. This means that the page's layout will be rendered correctly while loading and when the user has images turned off in their browser.

    Images that have a height and width property set can improve your page’s load times by a few milliseconds. However, this will cause problems for any responsive behaviour of the page and should be used when appropriate. It is exceedingly unusual for an image in the site layout to not be placed using CSS, so it’s likely if this rule applies to you, you should switch to CSS and background-property.

    <img src="TopBar_Row1_Col2.gif" />
    Figure: Bad Example - User controls does not contain width and height properties
    <img src="TopBar_Row1_Col2.gif" width="86" height="20" />
    Figure: Good Example - User controls contains width and height properties

    We have a program called SSW Code Auditor to check for this rule.

  2. Do you avoid BMPs for the Internet at all times?

    Never use bitmap images (.BMP format) on your website or in emails. BMP is an uncompressed format, and typically has an unlimited color palette. This results in unnecessarily large file sizes, which makes it unsuitable for pretty much everything.

    As an alternative, the most ideal format for Internet-ready lossless images is PNG.

    We have a program called SSW Code Auditor to check for this rule.

  3. Do you avoid having unreadable screenshot galleries (aka thumbnails)?

    Many sites have screenshot galleries that offer a list of all the screens within an application, and an option to enlarge them. There's just one problem: you can't see what they contain!

    Bad Screen Gallery
    Figure: Bad Example - The contents of the screenshots are difficult to make out

    What we suggest as an alternative is to have one large image - full size - (and possibly a list of descriptions) to allow users to have a large screenshot to view right from the get go. This might look something like:

    Figure: Good Example - This is a viable alternative to a typical image gallery.

    Our Code Auditor User Guide provides a good example for this rule.

  4. Do you exclude width and height properties from image references in content?

    In the case of content (unlike a site's framework files), 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 likely to be changed a few times. Adding fixed widths to your images also destroys your content on any responsive websites.

    As a result, we have made a rule that content pages should not have the image dimensions specified in HTML.

    We do have one exception to this rule: any HTML content that is to be sent out via email, as Outlook blocks images by default and renders them as placeholders with very lengthy alternate text. The page is invariably stretched to widths that make the contents of the message somewhat unreadable.

    <img src="MyPic.gif" width="93" height="25">
    Figure: Bad Example - Including the width and height properties for content images
    <img src="MyPic.gif">
    Figure: Good Example - Exclude width and height properties for content images

    We have a program called SSW Code Auditor to check for this rule.

  5. Do you have a favicon in your webpage?

    A Favicon is a small image file included on professional developed sites. The favicon reflects the look and feel of the web site or the organizations visual identity.

    Figure: Bad Example - When you don't add a favicon the user sees a generic icon
    Figure: Good Example - Using the favicon gives your website professional look and feel

    Which formats to use?

    The size for the image you will use is 16x16 pixels, using either​ 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.

    Note: Some Internet Explorer versions supports ICO only. Search for an image converter in Google to create an ICO file.

    How to implement the favicon?

    1. Copy your company's favicon to the root of the site​
    2. Add the yellow code below inside the <HEAD> tags 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.

    We have a program called SSW Code Auditor to check for this rule.

    We have a program called SSW Link Auditor to check for this rule. We offer a rule sample page for demo scan.
  6. Do you keep developers away from anything related to design or look and feel?

    Developers should never do design work. A bad design can be dangerous for the project. It's the web designer’s responsibility to create the overall look and feel of the website and define anything related to layout, typography, color selection, branding and overall consistency. The designer is also responsible for any image processing, web optimization and browser/platform testing of the website.​

    Bad Design
    Figure: Bad design can be dangerous!
  7. Do you know how to save your graphics in the right format?

    If you've ever wondered why the formats of graphics on the web differ from each other, you're not alone. With SVGs, PNGs, and JPGs, it's hard to know which format you should use in a particular situation. Don't simply add any image that looks alright, it is very important to know the advantages and disadvantages of each format for optimization.

  8. Do you know how to use balloons in screenshots for instructions?

    Communicating problems is more effective when using screenshots. To make screen captures even better, add balloons that have the message (aka speech bubbles). The balloon is great because you can point to a specific part of the image. It is much easier than reading a 'wall of text'.

  9. Do you know not to include toolbar and taskbar junk in screenshots?

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

    bad example as the taskbar and the Googletoolbar have been captured
    Figure: Bad Example - This screenshot includes personal browsers
    Good example  the taskbar and Googletoolbar have been hidden before capturing the screenshot
    Figure: Good Example - This screenshot has been cropped to hide personal browsers

    Tips:

    1. Use a region screen shot if appropriate (however the URL is generally helpful in most browser screen shots)
    2. Go full screen e.g.​ F11 in Internet Explorer, then <Alt>+<Print>
    3. Always have the 'Auto-hide the taskbar' option checked
      Set toolbars to auto-hide
      Figure: Always have the 'Auto-hide the taskbar' option checked so you do be screen shots
  10. Do you know when to use JPG?

    ​In line with the statement above, all photographs should be stored in JPG format. JPG rationalizes the quality of the image by averaging out the colors in segments of the image that it defines. To see an example of this working, try lowering the quality of a JPG to minimum quality.
    100% Compression
    Figure: Bad Example – Low quality JPG (11.87k)
    Uncompressed
    Figure: Bad Example – Uncompressed JPG (159.6k)
    100% Compression
    Figure: Good Example – Compressed JPG (59.6k)
  11. Do you know when to use PNG?

    PNG is an alternative to JPG, heavily endorsed by some circles, mainly because of its open source and non-commercial nature.

    PNG boasts:

    • Alpha blending (24 bit transparency map support)
    • Unlimited and limited color palettes. This makes it a good alternative to BMP.
    • Multiple CRCs so that file integrity can be checked without viewing

    However, it has rather poor file compression and should be used sparingly.​

  12. Do you know when to use SVG?

    Line art graphics and anything with well defined shapes (logos, vector illustrations, e.t.c.) must be saved in SVG format.

    Some of SVG format advantages are:

    • Written in XML
    • Text-based
    • Official W3C graphics standard
    • Accessible for people with visual disabilities
    • Searchable
    • Can be animated
    • No pixelation
    • Small file size
    • Supports transparency
    • Text can be selected, copied, spoken by the computer, and indexed by search engines.
    Bad Example - Using JPG for line art
    Figure: Bad Example - this graphic is line art, but has mistakenly been saved as a JPEG. It loses resolution.
    Good Example - Using SVG for line art
    Figure: Good Example - the same graphic, saved as an SVG, no pixelation.
  13. Do you know where you can find some nice icons?

  14. Do you make sure your images are hosted internally?

    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.

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

    ​Figure: Bad example - using an external URL as image source. The image can be edited or deleted and there is nothing you can do about it

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

    ​Figure: Good example - Image is hosted internally. You have control over the image

    Note: For copyrighted images, it is important to always ​​mention the source.​​

  15. Do you make sure your website doesn't have multiple copies of the same image?

    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 web site. 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.

  16. Do you optimize your images for web?

    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. After that, you should run an image optimizer. 

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

    • 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. 
    • Use automated tools to ensure that all of your images are always optimized. E.g.: http://optimizilla.com​
    optimizeexample.png
    Figure: Optimizilla reduced the image below in 31%

    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.

    wp-smush.jpg
    Figure: WP Smush plugin saved 9.4MB from one web site
  17. Do you prefix your images appropriately?

    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
    BannerbanbanSSW.gif
    IconicoicoSSW.ico
    ScreenshotScreenScreenCodeAuditorMainWindow.gif
    Figure: Correctly named images
  18. Do you use image sprites to reduce HTTP requests?

    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.

    One image per Icon
    Figure: Bad Example - four images, one for each icon
    One image contains all icons
    Figure: Good Example - one image contains all the icons and CSS selectors make the browser display only the part you need
  19. Do you use image styles to ensure great looking content?

    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.

    Image without styles
    Figure: Bad Example - The image has no styles
    Image with styles
    Figure: Good Example - The image has CSS driven margin, padding, borders

    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 page is using <dl>, <dt> and <dd> tags.

        <div class="badImage">
            <img src="Images/imageWithoutStyles.jpg" alt="Image without styles" />
            <span>Figure: Bad Example - The image has no styles</span>
        </div>   
                        
    Figure: Bad Example - Inserting images and captions inside <div> tags
        <dl class="badImage">
            <dt><img src="Images/imageWithoutStyles.jpg" alt="Image without styles" /></dt>
            <dd>Figure: Bad Example - The image has no styles</dd>
        </dl>   
                        
    Figure: Good Example - Using the <dl>, <dt> and <dd> tags for images
  20. Do you use text rather than images where appropriate?

    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">
    Figure: Bad Example - using image for text header
    <h1>Welcome to My Page</h1>
    Figure: Good Example - this text can be easily rendered by the browser and recognized by search engine