What You Will Learn in this HTML Lesson
This lesson will help you prepare an image for use on your web page. You may want to use an image editing software program to adjust size, crop, and compress your picture before placing it into your web page with the HTML image tag (<img>).
Web images should be:
- RGB Color Mode
- Cropped and Sized
- Low Resolution
- Compressed File Types: .jpg, .gif, .png, or .svg
Images are created in various color systems, called “color modes.” An image scanned to black and white only is considered a grayscale image. Images prepared for high-quality press printing may be in CMYK color mode, which is designed for four-color process printing with cyan, magenta, yellow, and black ink. Monitors and devices like phones and tablets use light to create color, not ink. Images prepared for screens should be in RGB color mode, which is an image made out of Red, Green, and Blue light.
If your image is not already RGB color mode, then open it an image editing program, like Adobe Photoshop or GIMP, and change the color mode to RGB. In Adobe Photoshop, you can change the color mode by going to the Image Menu, select Mode and then choose RGB.
Size and Resolution
It is a good idea to crop your image and save it at your intended size. This is good for both your site, and for the people using it. The bigger your image is, the more bandwidth it takes for web visitors to download it. As you develop bigger and more popular websites, the costs of keeping bandwidth down become important, and not uploading oversized images is a big part of that. Moreover, bigger images take longer to download. Slow-loading pages frustrate readers, and this in turn increases the number of people who leave your site (called “bounce rate”). Finally, if you upload a huge image and use HTML to resize it smaller, this small complication can sometimes lead to code problems later.
You should measure the size of your image in pixels, since devices and monitors display in pixels. Some print designers might be used to measuring in inches or centimeters—it’s time to switch to thinking in pixels. You may want to save a copy of your image at twice the pixel size you need, based on your intended display size. The double-size image can be useful when adapting your web page appearance to higher resolution devices, like modern phones and tablets, which can be double the resolution of desktop monitors.
Compressing Images for the Web
There are three different compression formats you may use for images: JPG, GIF, or PNG. All three formats help reduce the file size of your image for faster downloading on your web page. There are advantages to each format. JPG is usually the best choice for photography, giving you good full color and a fairly small file size. JPG is the most commonly used format on the web. GIF is an older format that doesn’t support as many colors as JPG. The chief advantage to the GIF format is that is supports animation, (without needing any plug-in or special software to play it). The PNG format is good when you need transparency — something the JPG doesn’t support. So, if you have clear areas in your photo, choose PNG to retain the transparency.
When to Save Your File as a JPG
- Developed by photographers for photography.
- Best for art with textures, or soft edges.
- Support millions of color, 24-bit.
- Does not support transparency.
When to Save Your File as a GIF
- Best for flat solid areas of color, such as a pie chart, map, logo, or text.
- Limited to 256 colors, 8-bit.
- Supports transparency.
- Supports animation without any plug-in required.
When to Save Your File as a PNG
- Supports millions of color, 24-bit.
- Supports 8-bit transparency (colors can be semi-transparent).
- File sizes are usually much larger than jpg.
When to Save Your File as an SVG
- Scalable vector graphics.
- Resolution independent.
- Supports millions of colors.
- Supports transparency.
- more to come on when to use SVG!
You’ll need a good graphics program to compress images, such as Adobe Photoshop, Illustrator, or Fireworks. Or, look for a utility or free open source software like MS Paint or GIMP. GIMP is such an unfortunate name for a good free Graphics Image Manipulation Program. Another popular low-cost option is Sketch, which sells for about $99 and is similar to Illustrator or Fireworks. You can also get Picasa, Google’s photo editor for free. It doesn’t have as many options as GIMP, but is simpler to use.
Photoshop Tip: Generate Image Assets
Photoshop now includes a new feature that makes it really fast and easy to save compressed pictures from your layered Photoshop files. It only takes two steps to save your compressed images:
Name your layer with the file extension you wish to use (.jpg, for example), plus a number from 1-10 to indicate the amount of compression. If you need a second copy of the image at a different size, just add a comma to the layer name, the new size and second file name.
For example, the following layer name will result in two images, one double size:
toys.jpg7, 200% toys-large.jpg6
To actually generate the images, go to the File menu and choose Generate > Image Assets. It will show a checkmark next to “Image Assets” when the feature is already turned on. Now your compressed images have already been saved to a folder in the same location as your original Photoshop file. Anytime you make changes to you Photoshop file, the compressed updated image will be generated automatically. Sweet!
Scalable Vector Graphics
The SVG format is so new and exciting, next week’s entire lesson will be devoted to learning about this new image format.