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:
Adobe Stock (they often have free trials running): https://stock.adobe.com
Shutterstock: http://www.shutterstock.com/
iStock: http://www.istockphoto.com/
Getty Images: http://www.gettyimages.com/
Fotolia: https://fotolia.com/
Picography (free, more niche/hipster): https://picography.co
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!
