• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 11/2/22

Use the best images possible

When adding images to your code, there are a few things to bear in mind, like intellectual property and file formats/sizes that ensure the best browsing experience.

Finding images

As you continue building websites, you'll have opportunities to add many different kinds of images. Some, you can make yourself. You can create charts to show relevant figures, use your own photography for an article, mark up screenshots to illustrate a concept, or hand-draw illustrations to accompany a story.

Some images, you just can't get yourself, though. This is not an excuse to use copyrighted images without attribution or photographs that aren't yours. 

Stock images are a safe choice when you're in a tight spot and need visuals to accompany your text!

Here are some solid options if you need stock photos:

Now that you have the resources where you can find the perfect image(s) for your needs, let's do a brief rundown of image formats.

Image formats

We covered in the last chapter that images should often be saved in their own folder in their codebase. There are several different image formats (otherwise known as file types) available, and you should be sure to save or use image with the one most suited to your page's needs:

JPEG

Most digital cameras save photos in JPEG or JPG (they're the same thing) format because it can blend red, green, and blue to produce many colors. JPEG is a good format to use when adding a photo with many colors or with photography in general. After all, the JPEG stands for Joint Photographic Experts Group. Sample image files could be  winter_landscape.jpg  or  family_portrait.jpeg  .

GIF

Everyone loves animated GIFs. That's because this file type is perfect for animated images. It's less suited to photography though because it can't handle as many colors. You can still use it for still photos with very few colors, like simple logos. It also allows for transparency, which JPEGs do not. A sample image file could be  brand_logo.gif  or  dancing_bear.gif  .

PNG

There are two different types of PNG formats, PNG-8 and PNG-24. The latter allows for more colors, but both formats allow transparency and do not result in quality loss when saved over and over again (unlike JPEGs). PNG stands for Portable Network Graphics. A sample image file could be  simple_illustration.png  or  transparent_background_cutout.png  .

SVG

If the name "Scalable Vector Graphics" doesn't give it away, SVG images are vector images. They can be scaled up or down and not lose any quality. However, they're only suited to simple images like logos or flags. Sample image files could be  logo.svg  or  american_flag.svg  .

One of the most important things you can do when building great web pages is to keep your image sizes reasonable and to measure your images in pixels. If you want to show an image at a size of 200px by 200px, it should be saved at that size. This will help your pages load faster!

Example of certificate of achievement
Example of certificate of achievement