Summary: To make the page does not have excessive weight and load quickly, it is necessary to reduce the weight of the images, ie, optimize them for use on the web.
Despite improvements in bandwidth and improvements in processors, it is still recommended that websites have a reduced weight to avoid having problems or delay in loading.
Undoubtedly, one of the major difficulties facing the facing web designers is the use of images. The use of images, both for the decoration of the page to be part of the content, is indispensable.
Given this, the only option to have web designers is the optimization of images for use in your pages. For design to have the view that its creator has planned, it is necessary that the length and width of the images is not modified, so the only option that we have is with reduced quality.
Reducing the image quality does not necessarily affect your view on the website. This is because the images obtained from a camera, scanner, or other means, generally have an optimal resolution for printing or revealed, that is well above the minimum necessary to look good on the computer monitor.
What is modified on an image for optimization?
The images to be used in the design of a website can be modified in various parameters for the purpose of reducing their weight.
The parameter used to modify the weight of an image is the resolution , which is measured in dpi (pixels per square inch). A digital camera obtains resolutions of 300 dpi, and print quality (although they can be obtained higher quality prints) is 200 dpi.
These resolutions are not necessary in an image to be displayed on a web page, since a resolution of 72 dpi is recommended for use in this environment, because the vast majority of monitors have higher resolutions .
Other modifiable parameter is the Colour. A high quality image (called true color as it is about the ability of the human eye in detecting colors) has a color depth of 32 bits per pixel, of which 24 bits are for color (almost 17,000. 000 colors), and 8 bits are allocated to the transparencies.
By reducing the depth range of 16-bit color (High Color), a weight reduction of the image is obtained. For images that use few colors, minor scales can be used, such as 256 colors or less.
The GIF format goes further, since each image keeps its own color scale, which greatly reduces the amount of information (and therefore weight) containing an image file.
The image files may contain additional data (metadata), which also influence the weight thereof, so often, the image optimization programs remove them as a method of reducing the amount of information contained in the file.
How to optimize an image?
There are several ways to optimize an image for use in web pages.
Some editing programs have plug-ins for optimization and others have incorporated these features. Adobe Photoshop has tools to define some parameters to optimize image quality, thus reducing its quality for use on the web, as to enlarge for use in printing. GIMP does not have functions for defining the quality of the processed images, but the saved allows the modification of some of them (depending on the format) to reduce its size.
Another option is the use of specific tools, both programs and online tools, some of which are described below. You can also use some tricks to good effect.
Platinum web Media, web page design agency in Adelaide, Australia.
RIOT: Free software to optimize images
RIOT is a software image optimization free of very low weight and portable (can run from a USB memory device), which has two windows in which the original image and the result is displayed after adjustments to be made.
In testing with this program, the results are very good. In a high-quality JPG format, weight reduction of the images was achieved up to 6: 1, which means that an image of 600kB to 100kB would be about a reduction in quality that is not visible using default parameters.
In PGN images with transparencies , reduction is lower, although the numbers remain equally good as weight reduction of the image is achieved to something less than 3: 1.
Another feature of the program is that it only works with formats JPG, PGN and GIF, allowing the format change, which means that if we are optimizing one JPG picture, we can save it as a GIF or PNG. The program also has the option to set the weight you want the image to have, reducing the quality to the desired weight.
You can increase the rate of decrease of the weight of the image and change settings. The interface is extremely simple, although it is in English version.
There are several sites that perform image enhancement . One is SiteReportCard , a page and other services and tools for web designers, offers online image optimization. This optimization is performed by lowering the quality of the colors and image sharpness. The page displays the option to optimize an image found in a website, for which the user entered in a field the URL of the image (for example, http://www.abc.com/images/image_1.gif ) or upload an image from the user’s computer. In either case, the page returns five copies of the initial image in different sizes (and logically different qualities), which can be downloaded to the user computer.
Save web images to Photoshop
One of the great wonders that have Photoshop is the tool to save optimized images for web (File> Save for Web).
This tool is essential once you know. You can reduce the weight of the images dramatically maintaining its quality.