We’ve added several images to our Tuts+ Town website, but we haven’t talked about images in detail yet. In this lesson we will touch on the more commonly used types of images on the web and some image editing techniques.

Don’t forget to ask any questions in the comments section at the bottom of this page!

Images On the Web

We are not complete strangers to using images on the web. Our Tuts+ Town website used four images. We were able to add those images in our HTML and then resize and position them with CSS.

There are many things to think about when using images on the web, such as which format is best, where to get the right images, and how to use them.

Throughout this lesson we will be applying effects to the following image, a map of Tuts+ Town:

Tuts+ town map

Types Of Images

The most commonly used images on the web are JPEGs, PNGs, and SVGs. Let’s talk about what they are exactly.

JPEG

A JPEG is an image with one of the following file extensions: “.jpeg” or “.jpg” These images will likely make up most of what you will come across and use on the web.

They are fantastic for creating a smaller photo image file size to more easily use on the web or send through email, for example. This lower file size, however, means you’ll also get a lower quality image.

PNG

A PNG is an image with a “.png” file extension. While a JPEG will give you a small loss of image quality, a PNG will not. These files will look as sharp and crisp as the original, but in keeping this quality the file size can be much larger than a .jpeg.

PNGs are a good choice for line drawings, text, and icon graphics that already have a smaller file size. It is also possible to have a transparent background with a PNG, unlike with a JPEG.

SVG

Scalable Vector Graphics, SVG, are images that can be resized to both large and small sizes without getting all pixelated and blurry looking, like a more traditional JPEG or PNG would. These images are saved with a “.svg” file extension and are perfect for illustrations and company logos.

All the images used throughout Tuts+ Town are SVGs! If we were to go back into the CSS for our site and change the width of any image to 1000px it would make it huge and crystal clear.

SVG is on the right – much clearer!

Where to Get Images

There are a lot of handy places to get free and free to use photos on the web.

While some images may not cost anything, they can require us to follow certain rules, such as mentioning the photographer’s name wherever we use it. Other images can be free to use only for personal projects and may not be used for a business.

Always be sure to check the licensing (or permissions) when you’re not certain, but for now let’s talk about a couple of options which are both free and free to use.

Cupcake offers a variety of well made photographs. When you find one that makes you happy you can just click the Download High Res link, give it a filename and save it to your computer.

FancyCrave is another website for completely free to use photographs and it has a great selection to choose from. We can grab these by clicking the Download link and saving to our project’s folder.

For SVG icons IcoMoon has a lot of free graphics to choose from. Once we highlight the icons we want by clicking on them, we can select Generate SVG... at the bottom left and then select Download.

Editing Images

A lot of web designers use image editing tools, like Photoshop, to make changes to their photos before using them on a website. These changes can be anything from changing the colors, getting rid of shadows, to cropping.

Most computer operating systems will have a program on them that can manage some very basic edits. “Preview” is a great option if you have a Mac computer, which will allow you to resize, crop, and save images in other formats. To access Preview we can run a search on our computers (magnifying glass on top right of your screen!) or open an image by double-clicking it, as it is likely set as our default image display program.

On a Windows computer “Windows Photo Viewer” or “Paint” will likely be the default image programs we can use, again, allowing for some basic alterations.

Cropping

When we’re talking about cropping we mean removing the outer parts of an image.

Cropping can be really handy when there is only a section of a large image that we wish to use; it’s even possible for cropping to take on other shapes, like circles!

Editing With CSS

As well as changing the size of an image with CSS there are a number of filter effects available, such as making an image black and white, transparent, or adjusting its brightness level.

Grayscale

We can convert images to black and white in our CSS using the filter property.

Within this property we include grayscale and then a percentage value within parenthesis (brackets).

Here’s a quick look at some CSS that will produce a completely black and white image:

img {
filter: grayscale(100%);
}

Opacity

Opacity refers to making something transparent, or see-through. The opacity property takes values from .0 to 1, with .0 being completely see-through (invisible) and 1 being not see-through at all. All values in between give a different strength of transparency.

For example, if we set opacity: .5; on a series of circles in a CSS document, the result would look something like this:

This type of effect on an image can be great if we are looking to make an image a bit less noticeable on a page, so that text on top of it stands out more.

Blur

We can also make an image blurry using CSS filters. Within the filter property we need to use blur followed by a pixel based value within parenthesis.

img {
filter: blur(5px);
}

The higher the pixel value, the more blurred an image will be.

Note: For a more complete list of CSS filters you can check out this resource. Just click on the CSS tab of any demo to see how it’s done.

Conclusion

In this course we explored some commonly used image formats on the web, as well as a few effects that can be applied to these images. Getting our images ready for a site can be a task that varies from super straightforward with minimal tools required, to pretty complex edits requiring powerful tools.

Next we will be discussing design basics, where we talk about how to use what we arrange on the web page.