Web is the visual environment, but even though the text makes up the majority of the content, the image still plays an important role. Just browse through some of the existing Web sites, and we'll see a lot of things to talk about.
Even skilled Web designers can make the mistake of processing photos for posting online. For amateur designers, due to lack of experience, the error is more likely to occur. This article is intended to help you understand the most basic principles of image processing for the Web to minimize unwanted errors.
There is a saying in the design industry: "Junk will be thrown in the trash." This is especially true when we choose photos to process postings. Photos in Web pages are often compressed and therefore of relatively low quality. Once posted, the quality of the image can not be improved, so when choosing the original image, you must select the higher quality images as possible.
If the original image is not a digital photo, it's a print (a photo taken with a conventional camera or a photo taken from a magazine), you will need to consider more. Firstly, the resolution of the printed images is very different, while the correct resolution of the images used for the Web is 72 pdi. However, when scanning prints for digitization, you should note that no such scan is done at such low resolution. What happens if you later need to increase the size of the image for the Web page or realize that if you crop it, the image will fit. That is very difficult to do if you scan photos in low resolution. If you scan at high resolution, such as 300 pdi, you will have more options for later processing.
There are many other problems that can occur when scanning prints. If you own a scanner with a relatively low profile, the color of your scanned image may be different from the original image, although recent improvements in graphics software can help you make that much of a difference. fast. For example, the "Enhance" menu in Adobe Photoshop Elements has a number of options that you only need to do with one click to handle contrast or color correction; Or the "Adjust" menu in Jasc Paint Shop Pro also offers similar features.
The most commonly scanned images from magazines are scars, which are dependent on the type of magazine paper. However, if you scan the image at 300dpi resolution and apply a smooth Gaussian Blur effect, the fish bone fracture will decrease or disappear when you reduce the resolution or size of the Web image. The details of the image will be clear again if you carefully use the "Unsharp Mask" filter. If you use Photoshop or Photoshop Elements, you can have similar or even better results using the "Despeckle" filter (Filter - & Noise - & Despeckle) for the original image.
Number Era
An abundant resource for Web graphics is digital photography. The most common problem here is the hardware used to capture the original image. If you have a low profile digital camera, due to high compression, there will be rough spots in your photos. The color of the image is not clear, unless you choose a good brightness for the subject. In this case, the following tips for image processing also work: Use quality enhancements for original images in graphics applications to improve the color of your digital photos and apply them. Apply Gaussian Blur in a gentle way to reduce the roughness of the JPG.
There are 3 things you always have to remember when choosing the original photos. First, you should only use the photos you are entitled to use (if not later may have problems with copyright issues). Second, you often save the original image files, then work on a copy in case you want to get back the original image. If you make a lot of changes to the image being processed, such as cropping the image, increasing the resolution or size, save the image as a different file after each major change so you can go back. Previous step if something goes wrong. Finally, when saving images in these intermediate steps, you should use uncompressed file formats (or compressed JPEG formats set to 0%).
It's always a good idea to keep in mind that you are working in a digital environment and so there are many other aspects involved. Consider carefully what part of the original image you will be creating the Web image, as part of the image may look nicer and more impressive than the whole. Another thing to keep in mind is to use filters very carefully. At the hands of professional designers, filters work very well but if you use the wrong dose, your photo looks more amateurish.
Since you are free to edit your photo, you may be able to perform some actions, such as removing unwanted elements from the original image. It's really easy to do, just in time and clever use of cloning tools. Most people agree that it is best to do the same thing at the resolution of the image as it was scanned, but with some minor changes, in some cases it would be more effective if you done at 72 dpi resolution. That's because at that resolution, the number of pixels you need to manipulate will be less, the execution time is also significant savings.
Explain more about the file format
Once you have done the editing work on the original image, when saving the edited image to disk for use on the Web you need to select a suitable format. There are two types of formats most used for photos on the Web, and each format has certain rules that you need to know.
JPEG is the most suitable format for snapshots, with consistent toning and coloring. This is because the JPEC format supports up to millions of colors and so the image looks good even when compressed. JPEC is a lossy compression format, which means that the details and color of the original image will be gradually reduced as the compression ratio increases and the compression algorithm "deliberately" removes the information that the naked eye not felt. In the case of photos used for the Web, you can compress up to 50% of the image that looks crisp. If you increase the compression ratio, you can see that the JPEG image areas on the original image are highlighted with blurry colors. When the compression ratio is at its maximum, the original image looks like it was made up of blocks and in practice, there is almost no reason for you to compress at such a rate. If the file is too large, reduce the image size or use another image if you do not want the Web page to become too heavy.
Most applications allow you to save images in progressive JPG format. Compared with the standard JPEC format, the size of the file saved in this format is larger but the image can be downloaded in several steps. First, a low-resolution version of the image appears almost instantly in the browser window, and details are gradually added to the original image.
Another popular format is GIF. This is a lossless compression format, meaning you will not see a reduction in detail and color when you increase the compression ratio as in the JPEG format. When saving images as GIFs, the colors will be "locked" in the most efficient way, but the format is only allowed up to 256 colors. As such, the GIF format will not fit in the photos, because the saved image will lose color and quality is no longer the same as the original image. However, the lossless nature of the compression algorithm makes this format very suitable for low-color images and especially for images with uniform color areas. So you usually get company logos or line art images that are usually saved in GIF format.
GIF is also a good format for creating images containing text content. PCs and MACs have only a few fonts that can be shared, making it difficult for Web designers. Text based graphics can be a solution. Although you should not use GIFs to express all the text to display, because artistic fonts are often difficult to read and text based GIFs can not be enlarged, scaled, or copied to Other applications, but in case if only a short text, high requirements on fine art, this format is very suitable.
GIF also has a number of options for saving your photos. Interlaced GIFs, like progressive JPEGs, allow images to be downloaded in several phases. The color palette can also be further reduced from the default 256 colors and the lightweight file format adds up to kilobytes without compromising image quality. If you want to try it, you can use the "Web-safe" palette, though in reality it should not be used, because this palette is very limited when most computers today are capable of displaying up to millions. color.
Another interesting option when saving a GIF image is saving the image with a transparent background. However, it is also not a complete transparency. For example, if you create an image of a text on a blue background (with anti-aliased anti-aliased effect) and then remove the background of the image and save it as a transparent GIF file. Then you put this image into a Web page with a red background, the results will see the background color of the Web page in the image area is not the same as the original. This is a common error on many Web pages, so you should pay attention to set the background color of the GIF image the same as the background color of the Web page. Removing the background color of a GIF image is usually a good idea because its background color and the corresponding color values defined in HTML pages may be slightly different.
In addition to the two basic formats mentioned above, what format should be used for Web images? The answer is no. Although in the environment of a given operating system, Web browsers can handle other file formats well, but usually they are not compatible with other operating system environments. If you try to use images with uncompressed TIF or BMP images in Web pages, it is unlikely that you will.
Of the other two formats that have been developed for displaying images online, one is not fully supported in different environments, and the other is only suitable for certain "special" conditions. The first, PNG (Portable Network Graphic), combines the best of both JPEG and GIF features, completely transparent, not transparently limited to GIF86. But the problem is that Internet Explorer does not support this, and as soon as newer versions of IE can support the majority of users are still used to the old browser and thus, the advantage The PNG format does not have much meaning at the moment.
Flash, used to manipulate animation, is also a "candidate" for Web graphics, is very effective to put on the network vector images or use for large text copy (Flash files are usually small size more than GIF files). If using Flash, save your documents as Flash 6 or lower, because not everyone has the latest plug-ins to see your site.
There are a number of other principles you must follow when designing images for the Web and putting your designs into actual Web pages. Regardless of the format you selected, the file must have a resolution of 72 dpi. You must also follow the file naming rules. In general, the space character in the filename (which can be replaced by an underscore) should be avoided and a good rule is to use lower case. Always remember to add file extensions (although many automatic graphics editing programs do this for you). The proper set of GIFs is .gif and JPEGs are .jpg (.jpeg is also used in some cases, but not common).
You may have heard a lot of different opinions, so there is not really a general rule regarding the size of the files used for the Web. Most graphical programs have an indicator that tells you the approximate download time from the network, but actually depends on your site, the target audience, and so on. other. For example, you often have to balance the quality of the image and the time it takes to download the file. Note that image files used for many different pages will be cached by the browser, so you may not need to compress them too much. Moreover, if you set up an online gallery, the viewer will highly request the quality of the photo and they are willing to accept the long download time. Another common mistake people make is to change the size of the image in the Web designer. Except for some special cases, you should not stretch the image to the original image, but do it on the original image in the graphic designer. If the image is blurry after a reduction in resolution and resizing, use the "Unsharp Mask" filter to restore the lost details.
