INTRODUCTION TO WEB GRAPHICS

The developer who wants to use graphics for his websites has two alternatives:

  1. to buy images by a graphic's specialist. In fact, scanning images or downloading images to insert them into webpages is not good, just for the characteristics of the images themselves, which generally are not suitable for direct use.
  2. to get an image editor and learn how to use it. At least for those functions needed in our website.

The functions that are used to process an image, both to adapt it, and checking the lesser weight, are mainly among the following:

  • Cropping the image to take only the needed slice or frame.
  • Resizing the image is to reduce the weight and to suit the needs of our pages.
  • Removing the background that we don't care.
  • Making the image blurred or/and semitransparent.
  • Saving the image for the web in one of the following formats:
    • GIF
    • PNG
    • JPG (in this case the image can't have transparent background)

The Adobe Photoshop software is in my opinion one of the best in the market: it is easy and intuitive and allows many tricks even to a dumb like me. But you can use any other, provided there allows you to manipulate images sufficiently to your needs.

In practice, images have to be (a) sized, (b) adapted to our needs, and finally (c) saved for the web in the best format, that is, which allows the best quality with the lowest weight. I will not explain the differences between the various formats because the software should allow you to preview and to check characteristics, including the time required to download the image according your line's speed.

Note: 

  • The 'weight' in KB is the factor which depends on the time it takes to download the image.
  • Read this to understand file sizes (Bytes, KB, MB, GB, TB) Click http://myrepono.com/faq/4