In creating graphics there are two types of composition that graphics editors utilize: vector and raster. In vector graphics editors a line or shape is described by the mathematical formulas that define it along with associated data on colour and opacity. In raster editors the image is defined by the colour and intensity of light to be displayed by each pixel in a defined grid or canvas. Each of these methods of creating graphics have their advantages and disadvantages.
Vector graphics
Vector graphics editors like Adobe Illustrator, CorelDraw and InkScape, allow you to create images in an SVG (scalable vector graphics) format. This means that if you designed an icon, you could reproduce it at different sizes without any change in the sharpness of borders. It also means that if you needed to have your graphic on your website (even at different sizes) as well as in print it would be easy to deliver the optimal file for each type of delivery. What vector graphics does not do well is complex shapes and lines that do not follow an easy mathematical formula – ie. photos. For the most part, you will display graphics created with vector editors in a raster format. Even though your vector-created image is easily and seamlessly exported at 50px and 500px, you will likely display it on the internet as a GIF, PNG or JPG image – all raster file types. On the internet the only common method of displaying an image rendered in a vector style is the new canvas element, an emerging standard in HTML5.
Raster graphics
Much more of your experience in creating images for the web will be with raster graphics editors. From expensive software like Adobe PhotoShop or CorelPhoto to free software like Gimp to everyday tools like MS PowerPoint or Paint, we all have experience with raster graphics editors.
The thing to remember about raster is that it is not scalable upward. This means that if you create a great image at 400 pixels wide by 300 pixels high, and then need to display that image at 700 pixels wide, you will lose clarity in the boundaries of elements within your graphic. For this reason you should always develop your graphic at the largest scale you could possibly need it, and then export copies for web display at the actual sizes needed.
Image Resolution
When developing images for the web in a raster format (and when exporting images developed in a vector format into raster), it is important to create a working version that is the right size for your intended display. Raster images that are larger than needed can be ‘scaled’ within an HTML page but each user will still be downloading a larger image file than is necessary. If you attempt to display a small raster image in a size larger than it was created for you will incur pixelization, examples of which are shown below.
In each case below, the images on the left and right are the same. The width and height attributes in their ‘img’ tags have been set to display them at their proper resolution on the left and at 300 px by 225 px on the right.
| Images displayed at their proper resolution | Images displayed at 300 px by 225 px regardless of their proper resolution |
|
|
|
|
|
|