There are some site elements that can be shown as images and as text. For example main menu items are links to site pages. They can be text, and in that case we can choose font, color and basic formatting (underlined, italic, bold) and that would be it. They can also be images, and in this case text, we'll have full freedom of colors, effects, filters and other wonders of Photoshop. Then pictures are superrion? However ...
Next, if user tries to search the page (Ctrl + F), if text is in the picture, of course, it will not be found. Copy / Paste text from images will not work.
Images are mainly compressed, to occupie less space (JPG, GIF), but during compression quality is lost, so that the text is always more readable then "picture of text".
Last, but not the least, image will always occupie more space than text. This means that the pages with images instead of text will appear slower on browser,will consume more RAM on user's PC (so slow down other applications), images will be cached, so will spend the space on hard disk ...
I think now a things are more clear - when ever is possible to put images instead of text, it is desired to do it!
When creating web pages generally designers use JPG and GIF formats. It's rare to find a PNG image format on the site. Each of these 3 formats has its advantages and disadvantages. Only under certain circumstances benefits will come to express, in all other situations disadvantages will overpower, which will be reflected in the appearance of images and the whole page / site in general. Some web designers are using one image format on entire site, which is of course wrong.
GIF the format that supports limited number of colors - GIF image can have a maximum of 256 colors. For that reason, GIF is not suitable for images that should have a large number of color or hue, such as photos, color gradient, and the like.
On the other hand gif is not adding "noise" to the picture (except if "dithering" selected), and is very suitable to display text, charts, graphs and small pictures.
I think that is more than obvious what lack of quality can cause GIF format. Even worse, you will not believe, but in the example above GIF image file is almost 4x greater than a JPG file!
JPG is total opposite to GIF. Number of colors is not limited, but in purpose of reducing file size image is deformed. As noted above JPG is the best solution for images with many colors, photos, etc.. but they are not usable for large blocks with the same color, contrast images.... Here's an example:
Again the difference in quality is more than obvious, but in this case, GIF showed as much better solution. The size of each file is approximately equal. The wrong choice of image formats in the best case will only spoil the quality of the picture, and often much more - we increase the size of the file.
PNG - format, most rearly used. PNG is at least ready for compromises on the issue of image quality. It gives best picture quality with bigges file sizes.
In addition image formats, it is necessary to properly choose images compression level - this too will significantly impact image quality, layout look , file sizes, and it is necessary to achieve the optimal compromise.
Often, I met with the practice of forcing image dimensions, but it never proved useful. If the dimensions are not specified a browser will automatically determine them and properly display the image. If they are specified correctly, no purpose - the browser would already found the same dimensions and show the picture same way. But there is a possibility that somenoe will replace the image file, with picture of different dimensions, and then the browser will show new picture with dimension to old one!
Quality of images resized by browser will differ from browser to browser, but will always be worse than original.
I remember the example of gallery done by an amateur, where the same files were used to display image thumbnail and images them self. It's easie to imagine how muct time took thumnnails page to load, bacause thumbnails were aproximatelly 100 times bigger than necessary.
This is done because it is easier to manage one file per image, than two (the very image and thumbnail), but that obviously gives bad results.
See how it looks on the right - it's the same image from the example above, but when it have forced dimensions it looks "slightly" different. The image will look different from browser to the browser. Somewhere will be muddy, and somewhere will occure pixelized, but it will not be even close to the quality of the original.
For the same reason some developers (reputable companies, big brands web sites) use the technique of dynamically generated thumbnails on every page opening. On the server they keep large picture, and they handle only one file per image from administration, and all other image dimensions are dynamically generated when page is called. This is really loads the server and page displaying is very slow.
From all above it's easy to conclude that the best way is to show pictures what they are really are, without forcing any dimension from the browser or server.
It is essential that every image has ALT tag. If the image is only part of the design and don't have deeper meaning the ALT tag should be empty. Otherwise ALT tag should contain a short description.
