Common Graphic Types & File Compression
Many common graphics file-types utilise mathematical compression techniques to make them smaller, so they take up less space on your drive, and download faster over the internet (which is especially important for websites - as otherwise pages can take forever to load).
.JPG files, for example, use a 'lossy' compression system which means that some of the data is lost during compression. The algorithm essentially works through the picture and removes a certain amount of detail information. How much it removes depends on the quality settings when the file is created. Lost information is never recoverable; once it has been compressed with a 'lossy' format, you cannot get back to the original data.
JPEG offers one of the best compression systems for full-colour graphics and photos - although there is always a trade-off between image quality and file size. It is one of the most widely used graphics formats on the Internet - as it can get images nice and small for downloading. If a JPEG is overly compressed, you will see compression 'artefacts', which look like a mosaic of coloured squares engraved into the picture. JPEGs can be 8-bit with 256 colours, or 24-bit with 16.7 million colours for photographs (which is the most usual). JPEG is named after the 'Joint Photographic Experts Group' - although .jpeg is normally reduced to .jpg, to fit with the standard three letter file extension rule.
.GIF (Graphics Interchange Format) is another widely used graphics format on the Internet. It uses a lossless compression system - which means that image quality is not affected as it's reduced down to its minimum size. GIFs are often used for banners and adverts were text legibility is important. (Using JPEG can make text difficult to read because of the lossy compression.) GIFs are limited to 8-bit or 256 colours - but they do allow transparency. This is very useful on web pages, as you can create buttons and icons that overlay other graphics or text without seeing a background box around them. The actual 256 colours that are used can be adapted and optimised to the graphic in question, so often 256 colours is plenty enough to allow smooth shading and anti-aliasing. Anti-aliasing is a graphics technique used to 'smooth' the edges of high contrast areas – particularly with fonts and line-art.
You can also use animated GIFs, which feature a number of pictures that are played in sequence. Many of the simple animating adverts and banners that you see on websites will be animated GIFs (although more complex animations are likely to be Adobe Flash.)
.PNG (Portable Network Graphics) files combine some of the benefits of GIF and JPEG. Like JPEG, they can be 24-bit (and therefore 16.7 million colour), and compress well - but using a lossless format. Generally they will be larger file sizes than a JPEG though. PNGs also allow for a variety of advanced transparency effects which offer more flexibility than GIFs.
Graphics File 'Bit Depth'
All graphics files have a certain 'bit depth'. This refers to how many bits are required to describe 1 pixel in an image. They can be 8-bit, 16-bit, 24-bit or 32-bit.
8-bit depth graphics files such as GIFs can display 256 colours.
24-bit depth is required for the full human colour spectrum of 16.7 million colours. 24-bit is also known as RGB, as it utilises 8 bits each for the Red, Green and Blue elements of a colour. This yields 256 x 256 x 256 different colours – which is 16.7 Million shades.
Sometimes, 32-bit depth is required. This is often the case where process printing is being used, because this requires the 4 colour elements of CMYK; Cyan, Magenta, Yellow and blacK. Again, 8 bits are used for each element.
Graphics File Caching in Browsers
The 'caching' of images in your browser is common; meaning that the image doesn't have to be reloaded more than once. This is useful and important to remember in web design, as once you load an icon or picture into a browser, it can then be used throughout the rest of the site without being reloaded (as it is cached in your local memory - until you clean out the cache and your temporary internet files). Web designers often force images to be cached when they want them to be available for immediate viewing later.
Image Licensing
When using images on your website it's important to understand image licensing. You cannot simply download or use any image you like from the Internet. Most images are owned by somebody and are therefore copyright.
There are many commercial photo libraries online where you can purchase images, and some offer monthly subscriptions, which can make it cheaper for regular users. There are also many free image sources available, although most do not allow any kind of commercial use. But you usually get what you pay for; free clipart and images are normally quite low in quality. If you do purchase images from a library, then be sure to read and understand the terms and conditions - as there may be restrictions on what you can use the image for.
And don't confuse 'Royalty-Free' with completely free. Royalty-free normally means that you have to pay once for the image to be downloaded - and can then use it as many times as you like. Completely free or public domain images have no up-front cost or licensing fees.
Adobe Acrobat Files (PDFs)
Adobe Acrobat files (.pdf) provide a standardised, platform-independent way of creating a document which will always look the same. Most companies produce their brochures, leaflets and flyers as PDFs so they can be emailed and downloaded from the internet.
To view.pdf files you need the 'Adobe Reader' which is free from http://get.adobe.com/reader - although most PC and Mac systems will have Adobe Reader pre-installed. (Since Windows 8, Microsoft now uses its own built-in PDF viewer, but you can still download and use the Adobe one if you prefer.) Adobe PDF's can be viewed from inside your web browser, or directly by double-clicking on the downloaded file from the file explorer.
To create your own PDF’s you will either need to purchase Adobe Acrobat - which is a commercial program (and not cheap for home use,) or a free alternative such as "PDF Creator" from http://www.pdfforge.org/pdfcreator (which also has much cheaper licensing options to utilise their 'plus' professional edition).