This article provides a basic introduction to creating and using graphics for your website. It covers the essentials of using jpg and gif file formats, scanning and resizing photos, and optimizing graphics for web use. The aim is to help you personalize your website with your own graphics, even if you're a beginner.
When it comes to graphics, two acronyms you'll frequently encounter are jpg and gif. While the technical details behind these formats may not be crucial for you to understand, knowing when to use each one is important.
Before you start creating your graphics, familiarize yourself with your scanner software. You should be able to select either the gif or jpg file format when saving your scanned images. This option could be located under "Save As" or "Export", or it might be in the settings you adjust before scanning.
When scanning images for web use, set the scanning resolution to 72. This is the resolution at which computer monitors display images. Although a 72-resolution scan may not look good when printed, it will look great on the web.
Next, consider the size of your photo. A 2x3 inch photo can appear quite large on a webpage, so you may need to reduce your photo's size during or after scanning. Experiment with different sizes to find what works best for your webpage.
Once you've scanned your photo at a 72 resolution and adjusted its size, save or export it as a jpg. You'll likely have the option to choose the quality of your jpg. If possible, choose "low" quality or a low number (like "3"). The goal is to use the lowest quality or number that still results in an acceptable photo. This leads us to a key principle of web graphics design: all graphics should be as small as possible in terms of file size. Smaller files load faster, use less server space, and are less likely to cause issues with web browsers.
When it comes to gif files, these are best for graphics with flat color areas, like a drawing you've made in a paint program. If your paint program doesn't support exporting as gif, you can print your artwork at a high resolution, scan it at 72, resize it, and save or export it as gif 89a.
One key difference between gif and jpg is that in gif files, the background of your image will be transparent. So, if you scan a drawing with a white background and save it as a gif, only the drawing will appear on the web, not the white background.
Unlike with jpg, you don't have a quality choice when saving or exporting in gif. However, you may be able to choose the number of colors used. Fewer colors result in a smaller file size, so experiment with different color numbers to find the smallest file size that still produces a satisfactory graphic.
In summary, there are three main points to remember:
Now that you've got the basics, it's time to start creating your own graphics!
