Build Your First: HTML & CSS

Loading the player…


Introduction to image types in websites:

Next up, let’s review the images. When planning a site build, we need to decide whether images should be inline images, defined in HTML markup, or background images, defined in the CSS code. Inline images are normally used for images that are content-related where they add additional meaning to the surrounding content. Background images, on the other hand, are normally used for decoration. These images add to the overall design but are not as important to the content. Now there are times when images could be either inline or background images as we’ll see soon. First let’s look at the possible inline images.

Working with inline images:

Now in our header area, there’s a logo called correlate, and there’s also an Apple Store icon. Now I’ve decided these two would be best done as inline images. Down below we have two large images which I think should be both inline images, and we also have a little avatar icon, which again could be an inline image. Now this one is slightly more contentious, we have four logos and another Apple Store icon. Now, theoretically the logos could be a sprite, which we’ll talk about soon, but in this case, I thought our best is inline images.

Working with background images:

But what about background images? Well the most always one is the banner itself that has to be a background image, cause we’re going to swap it out, and change it at smallest grain. And then we have background images for things like our bicycle and for our phone, and save, et cetera. Now again these could be inline images but I felt that they were much more decoration than content-related so they’re more background images. And then we have four little background images for our icons. Now, this brings up the subject of sprites.

Working with sprites:

An image sprite is a collection of images placed into a single image. A web page may have many images, each image generates a server request. Images using sprites allows us to reduce the number of server requests, which decreases load time and improves the performance of the website. Now while you could use powerful image editing tools like Photoshop, Fireworks, Illustrator or Sketch, you can also use one of the many free online image sprite generators. Some examples include Sprite Cow, CSS Sprite Generator, and SpritePad. And in our case, we’re going to take those four little icons and push them into one sprite image.

  • H Max

    Thanks for those sprite generator tips. Never heard of them. Great sources.