START A COURSE

The HTML and CSS Blog:

Preparing Images for the Web

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
colorful cats

Use RGB for web photos, and save CMYK for print (colorful cats via Tumblr)

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.

RGB Color TV Screen

You can see the red, green and blue lights that create your TV screen image. All devices that use light to display images use RGB light combined to create millions of colors. This photo is zoomed in so close to the TV screen that you can actually see the individual red green and blue lights.

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.

Choose RGB Color Mode in Photoshop

Choose RGB color mode in Photoshop

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

Compression Formats

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.

The most common format used for pictures on the web is JPG

The most common format used for pictures on the web is JPG. Photography compresses very well (small file sizes) using the JPG format, which was created specifically for photos.

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.
This flat graphic image of a cat has been saved in the GIF format, which is ideal for simple, flat graphics

This flat graphic image of a cat has been saved in the GIF format, which is ideal for simple, flat graphics. GIF looks for rows of the same pixel color when it compresses.

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.
If your want an animated photo like this, GIF is the way to go

If you want an animated photo like this, GIF is the way to go

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.
a cat with a transparent tail and shadow, to show off PNG transparency

Image saved as a PNG so the cat’s tail and shadow can be layered over the background of this site (image for HeatherHavenStories)

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!
This simple vector-based graphic image of a cat has been saved in the SVG format, which allows the image to be scaled to any size and remain sharp.

This simple vector-based graphic image of a cat has been saved in the SVG format, which allows the image to be scaled to any size and remain sharp. Scaleable Vector Graphics (SVG) are created with vectors, not pixels.

Graphics Software

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.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.