HTML:Multimedia

Main Page >> Website fundamentals >> Workbook >> HTML >> Everything non-text

Introduction

This page is about Multimedia and consists of information related to accessibility, file formats and image manipulation. There are recommendations on software you can use to edit your website images etc. Although this is not part of the HTML workbook, this page can help you with graphics etc in your website assignment. It has been written by a student to help other students so please feel free to add anything. If you wish to contribute to this page, you can do so by clicking on the "Edit" tab at the top.

Multimedia on the Web

There are lots of Multimedia on the Web including, but not limited to, Flash animations, graphics, audio sounds and games. It can be fun to include on your website, but many web designers/developers forget the important keyword: ACCESSIBILITY.

Accessibility

Your website visitors/users will become irritated if they have to wait for an image or animation to appear. Some Web browsers may not support the file format of your image, the required plug-in may not be installed, or the user may not have the necessary hardware to listen to audio or navigate.

Some of your visitors/users might use dial-up connections or are connected to a slow network, so waiting for an image, animation or sound means they have to waste time. TIME IS MONEY, and if they don't want to pay, they might leave your site altogether.

Where possible, try and provide alternative solutions. The visitor may have disabilities such as sight, hearing and mobility difficulties, therefore may be unable to read your text/font, see a particular image or hear a sound. Like mentioned on the 'Images' page previously, you should provide Alt text should an image fail to appear. If you use sounds or videos on your website, written transcripts are always a good idea.

If the visitor is able to navigate and view your website efficiently it will persuade them to make future visits as well as attracting more visitors to your site.

Macromedia Flash

If you love Macromedia Flash, you may be tempted to decorate your website with flashing pictures, scrolling text, animated buttons and bouncing smilies. Although it can be fun for some visitors, it can annoy others who are visually impaired or would much prefer quality content.

Creating websites in Flash should be taken into consideration. If your visitor has not installed the plug-in on their Web browser, they cannot view your website correctly. If you do use Flash, consider accessibility concepts.

Adobe Software

There are lots of software from Adobe you can use for designing your website and other Multimedia applications:

Adobe Illustrator: This program from Adobe is perfect for graphics and illustrations. If you are very hands-on with designing I recommend this program. I create a lot of Vector-based designs and illustrations using this.

Adobe Photoshop: This is a must-have for designers. It is a perfect image editing program that lets you do loads of creative fun things with photos.

Adobe Kuler: As you've probably guessed by now, I'm a huge fan of Adobe's products- they really are good! I recommend you try out a software package called Adobe Kuler. You can create, share and download website colour schemes.

Check out Adobe.com for downloads, tutorials etc.

GIMP (GNU Image Manipulation Program)

A FREE alternative to Photoshop is GIMP (Image Manipulation Program) that has all the necessary tools without the cost- check out gimp.org for details of how to get this FREE application.

You can also find tutorials for GIMP at GIMP.org.

Inkscape

Inkscape is similar to Adobe Illustrator, as in it allows you to create vector based designs. It is free (Major selling point) and Open Source. Visit Inkscape's website

Pixlr

Another software I have recently come across which works like Photoshop but is completely free is Pixlr. You can open up files and edit images in the browser window, and then save them onto your HD. Just thought I'd give it a mention. Pixlr

Website colour schemes

Do you struggle with colour combinations when designing websites or other Multimedia applications? I have found a program called Color Wheel Pro, (American) which is a "software tool that helps you create harmonious color schemes based on color theory." It allows you to "preview your color schemes on real-world examples — websites, logos, product packages — not just on a row of ordinary color boxes." Find out more and download the trial version: Color Wheel

Optimising images for the web

All your images/graphics for your websites should be Optimised. This means to reduce the image to the required size, BEFORE putting on your website. It is bad practice to alter the size using code. When the browser renders (loads) your website, it loads the original image size, not the specified one. Therefore, if the original image is big, it will take twice as long to download. It may become a problem if you attempt to submit your website assignments with big file sizes too.

Some students have asked me (Cara) to help them with this. I thought it would be easier to put it on the Wiki here, as a general reference. I know Matthew has mentioned GIMP here, however these tutorials are for Adobe Photoshop. I suggest you try the tutorials mentioned above for GIMP.

Resizing images:

1. Open Adobe Photoshop and locate your image [File >> Open >> ...]
2. Click on "Image" at the top for the drop-down menu.
3. Scroll to "Image Size" and click it.

(or Ctrl + Alt + I if you prefer shortcuts like myself)

4. Towards the bottom of the window you should notice check boxes. Make sure the "Constrain Proportions" check box is selected, or your image will become distorted when you re-size it.
5. I recommend that you re-size your image using pixels, as screen sizes/resolutions are measured using these.
6. If you alter either the Width or Height, the image will re-size in proportion.
7. Re-size your image.
8. NEVER save your original file when you re-size it , in case you need to amend it in the future. Save it as a copy using [File >> Save As...]. DON'T use Ctrl + S because this will save the original image.

Saving/Optimising the re-sized image for the Web :

1. Open up the re-sized image (not the original file) [File >> Open >> ...]
2. Click on [File >> Save for Web]
3. You should see a new window with 4 previews in it. Depending on the type of image, use the drop- down menus to select the file extension you require e.g. .png. The top left box shows a preview of your original image. The top right box shows a preview of what your image will look like with your chosen file type (so you can compare the quality). The two bottom boxes shows your images in .jpeg format, the left with 30 Quality, the right with 10 Quality. You can use my file type guide below to help you.
4. Make sure the 'Optimise' check-box is checked. This optimizes your image, therefore compresses the file. The smaller the file the quicker it is too load on your website.
7. Click 'Save'. A pop up box with appear. Choose where your image is to be stored (preferably the same folder as your web pages), and an easy-to-remember file name. Click 'OK'.
8. Click 'Done'.

You now have a re-sized, optimised image ready for your website. If you find that your image is still too big or small, open up the original document and repeat the above steps. Remember to save a copy, not the original image.

Before you save any image, you should decide on the file format. As mentioned on the other image page, the most common file types are .JPEG (or .JPG), .GIF and .PNG

File Formats- What's the difference?!

If you want good quality images, it is important to understand what file format you need. You don't need to know what they all mean, but here are some points to help you:

.JPEG-- This is the default image format for digital images. It is stored as a 24-bit full-colour image. It is perfect for photographs with lots of colour and/or detail. The only disadvantage is that every time you edit and save a .jpeg, it alters the quality because data is lost every time it is re-saved.

.GIF-- Unlike .jpeg, .gif files only store 256 colours as an 8-bit image. The resolution is very low. This format is better for logos and designs with a lot of the same colours. They can be created as static logo and banner designs or small animations. If you have a small image and want to minimise the file size, you can use .gifs.

.PNG-- Very similar to .jpeg, and is up to 30% smaller than a .gif. You can compress high resolution images with .png and not lose any quality. This file is a good replacement for bitmap images and supports transparency. You can create transparent images with smooth edges instead of jagged, white outlines.

Transparency on Images

Transparent images means that it is an image with no background, or is replaced with another background colour or image. Photoshop allows you to do this easy. The links below provides really good tutorials to do this.

absolutecross.com

sluniverse.com

Please note - some browsers (especially older browsers) do not support transparency. If you are using an image on a plain colour background, remove the image background and replace it with the same colour as the web page background. Then use CSS where necessary to layout your image on the page.

---

I hope this helps! Created by Cara Hughes 0615410
(minor mods and addition of GIMP by Matthew Green) - well done to Cara for the addition - very useful!

Related Pages

<categorytree mode=pages>HTML</categorytree>