Web Design Web Design

Optimising Images for use on the Internet

 
 
Joomla Content Management System For Your Business
I am a Web Developer & I own a Web Design & SEO firm based in Melbourne, Australia. Over the last 9 years, I have developed many websites and worked with many different content management systems. I have designed and built my own content management systems and I have seen many half done open source systems come and go. So, it co... Read more


 Home | Web design

Optimising Images for use on the Internet

This Web Design Article is Brought To You By - Matthew Bagley

PEG Images
This image format is a lossy format. This means once the image is downloaded it is decompressed into memory and displayed, this format is ideal for most photos, drawings and high colour concentrated images.
GIF Images
This format consists of a grid of tiny pixel squares, this is a lossless format as unlike JPEG nothing is decompressed it contains all the information and colours in the file. GIF images can also contain transparent pixels which make these images ideal as overlay images. With the GIF format there are multiple options for the amount of colours to use in the image with a maximum of 256 colours so this format is not ideal for photos. Another good feature of GIF’s is that they can be animated
PNG Images
This format was created to become the new and improved GIF format. The format of PNG is a happy medium between JPEG’s and GIF’s as you can hold a greater number of colours while still allowing the use of transparent pixels. So why not use PNG’s for everything you ask? Well because not all browsers support the PNG format correctly.
Now that you understand the differences in the image formats it is time to get to work.
Saving your work for the World Wide Web
To save your work for the World Wide Web in Photoshop select the File menu and select save for web. Most graphics editors have a similar feature to this. Once you are in the feature along the top you will see various tabs, select the 2Up view as this will show you both the original and the optimised image.
Photo's
For most photo’s you will be using the JPEG format as this gives you the best support for the amount of colours whilst being low in size. In the preset drop down in the top right hand corner (image 1) select JPEG High. Now you can look at the image size and the time it will take to load in the bottom left corner of the screen (image 2) you can also change this from 28.8 to 56.6 by right clicking on the speed and selecting the 56.6 / ISDN speed. This will help you get a minimum time to download that image. To help you choose the output file size we have developed the following ideal file size chart.

Image Type - Ideal File Size - Maximum File Size

Background Image - 2Kb - 5Kb

Layout Header - 15 to 20Kb - 35 to 40Kb

Artworks - Any - Any

Product Images / General Page Images - 10 to 20Kb - 30Kb

Layout Images

Most layout images will be suitable for the GIF format as they don’t contain a lot of colours

  • Web Design Products on our marketplace

  • So with this tutorial you will be able to understand how to optimise your images to reduce bandwidth usage and to speed up internet browsing About the Author: Matthew Bagley is the owner of Paramiliar Design Studios (http://www.paramiliar.com) Working with many companies their aim is to give your business the online potential it deserves. Visit http://www.paramiliar.com/articles.html to find more articles written by Paramiliar Design Studios
    Please Rate The Article From The
    Web Design Category

    Optimising Images for use on the Internet

     

    Not yet Rated

    Web Design Related Articles Via RSS

    Boost your websites' search engine ranking! Attract more repeat visitors! Automatically, consistently update your content via Really Simple Syndication (RSS). To syndicate the above article and other Web Design related articles on your blog or site, simply click on the XML Icon above to grab the RSS feed.

  • Free website – starting your own page, presenting your talent
    Most of us resort to the Internet in order to find information on a wide variety of subjects. This immense collection of facts provides the answers to a large percent of our questions, being filled with attractive websites. Toda...
  • Getting Your website Right
    The temptation to rush through the creation of your website can force you to compromise on a great many fundamentally important aspects of solid website operation - compromises that you will ultimately need to go back and correc...
  • Top Tips for Web Design
    Content is King. The most important thing to remember about popular web sites is that they are always rich in content. Stick to your subject. Don't try to be all things to all people. Keep your goal in mind. Creating a web si...
  • Database development – powerful marketing strategy, strong online presence
    The Internet started its long history in 1969 and became quickly one of the most useful technologies for information research. Accessible in educational facilities, government institutions and various types of industries, this i...
  • The importance of a website maintenance service
    When you think about the Internet, you think about worldwide access to a large quantity of information, products and services. This amazing computer network system represents the perfect place for business expansion, helping pro...
  • The beauty of web design
    Conscious of the selling powers presented by the Internet, more and more businessmen have turned towards the Internet to promote their products and services. Today, it is more than clear that we live in the age of information, w...
  • © 2008 Article24.info All Rights Reserved.