As we head toward the end of the course, in this module we are covering a web design generally, and more specifically, using images on websites. First of all, we will be covering my Ten Simple Design Rules that will dramatically improve your web design. Then we will be reviewing background (CSS) and embedded (HTML) images and then plunging into how to prepare images for use on websites. Last but not least we will learn to make a simple JavaScript photo gallery that we will incorporate into the lab assignment for this week.

Ten Simple Design Rules

There is a lot more to web design, but if you keep these simple rules in mind it will give you a good start toward professional looking designs.

I have the Ten Simple Rules in a separate blog post. If you are taking CSCI1450 and reading this instead of the Module 12 Slideshow, go to the blog post and read the rules. Your final project design will be graded against these rules.

If you aren’t taking the CSCI1450 and just want the short version of the Ten Simple Rules, here they are:

1. Keep written text to under 5 inches. It’s too difficult for the reader to find the next line if the width is more than 5 inches.
2. Emphasize important points with white space.
3. Make headers clearly different from regular text.
4. Images are the same aspect ratio throughout the website. 
5. The header, nav, and footer are the same on every page of the website.
6. Never distort photos.
7. Don’t put text on faces or on the primary object of a photo.
8. Be consistent with design choices. Only use one or two fonts for a website. Choose colors and use them consistently. Choose a border-radius for images and buttons to use throughout the website.
9. Keep the header and navigation to under two inches in order to keep key content above the fold.
10. Use bright colors only as accents.

Background vs. Embedded Images

We covered both background and embedded images in Module 4. For your final project, you will decide whether to use a background or embedded images. There are pros and cons for using one or the other.

As a quick refresher, background images are added in the CSS with the background-image property. You used a background-image for the hero image on the puppies website. Embedded images are added in the HTML with the <img> tag. You used the <img> tag for the three puppies in Bootstrap columns last week.

Here are some guidelines to help you decide whether to use a background image or an embedded image.

• Use CSS background images when the image is in the background and not key to the content. 
• Use HTML embedded images when the image is important to content.
• If you would like to place text on top of an image, it is easier to put text over a background-image. You can also place text on top of an embedded image, but that requires absolute positioning. W3Schools has a great explanation of how to do it: CSS Positioning

Use background-size: cover in the CSS

The easiest way to use background images is to add this CSS: background-size:cover. However, when you do this you will lose part of the image because the “cover” value covers the entire space available without stretching the image. Since the space available will be different depending on the device, you could lose either the sides of the image or the top and bottom. Even so, it is the most practical setting for background images. 

Background vs. Embedded Images Examples

Example #1

This first example makes a very good background image. I would place the text in the clouds or the gray area at the bottom, although if you look closely there is a man walking at the bottom right, and you wouldn’t want to place text on top of him. A shadow on the text helps to make it stand out. To add a shadow to text, use the text-shadow property.

Example #2

This photo does NOT work well as a background image. It would work better as an embedded image. Of course, you should never place text on faces: See Design Rule #7. If you place text on a photo, you will likely need media queries to adjust where the text falls on mobile devices to make sure it doesn’t fall on their faces .

Example #3

This last one is a bit of a trick question. It can be either a background image if the topic is Spring, or an embedded image if the topic is ladybugs. This can be a great background image if the text is placed correctly. When placing the text on the image, be sure to place it in the blurred area and not on the flower or ladybug. In fact, you will find a lot of royalty-free artwork that has a blurred area so you can place text on the blurred area.

Images Review

Since this module is all about images, here are some reminders.

• Put your images in a folder called, “images”
• Use all lowercase letters 
• Do not use punctuation symbols and spaces except the hyphen (-). 
• Put a hyphen between words (for SEO)
• Do not change the file extensions (usually .jpg, or .png)

You need to have the rights to any image that you use on your website. Google images generally cannot be used on your website. Here are links to where you can find free and low cost images.

• Pixabay.com
• Freeimages.com
• 123rf.com: low-cost Royalty-Free images

Favicons are the little images that go into the browser bar. They are the little square images associated with a web page. All you do to add a favicon is have a file named favicon.ico placed at the root of the website. The favicon should be 32 x 32 pixels.

Image Sizes

Do you want this to happen on your website? NO! That is why images must be prepped for website use.

Never use images directly from your phone or camera. They will make your website sluggish. 

Exercise: Image Size

Photographs taken with digital cameras and smartphones are too large for the web. Download this image to your computer. You can download the photo with the secondary mouse click and “Save Photo As…”

https://webdevstudents.com/old/images/wolf.jpg

1. What is the height and width in pixels of the original image?
2. What is the max width of most monitors in pixels?
3. How many megabytes is this image?

The downloaded image way is too large for web use. See the answers below.

1. This image is 3854px x 2890px
2. Most high-res monitors are 1920px
3. The image is 3.4 MB (megabytes) or 3400 KB (kilobytes)

Images for the web should be 100 KB or less. This image is 34 times larger than what it should be for web use. What this means is that we need to do some prep work on images. I call the prep work “Images 1-2-3” because there are three steps.

Images 1 – 2 – 3

There are three steps to prepare your images for use on a website. 

1. Crop images to focus on your subject AND to fit the space and design. 
2. Resize images to so they aren’t wider in pixels than the maximum width you need. 
3. Optimize images to reduce their size (in kb’s) http://tinypng.org

We will look at each of these in more detail.

1. Crop

As a web developer, it is important to be in control of the images you display. You will need to crop images to fit. For the website design, it appears sloppy if images are a variety of aspect ratios and sizes.  Photo galleries and sliders work best when all the images are the same size and same aspect ratio. 

What is aspect ratio?

Aspect ratio compares the height to the width with a ratio. The old TV and monitor size was a 4:3 aspect ratio. Newer monitors and TVs use a 16:9 aspect ratio. The image below shows you some common aspect ratios.

Sometimes you need to calculate an aspect ratio, and there are handy online tools to do that. Here is one. Aspect Ratio Calculator.

Which aspect ratios should you use for websites?

For a website header, consider 4:1 or 3:1. The reason for this is to get more of the website “above the fold. For a photo gallery, 4:3 may be the easiest, because the images you take with your smartphone default to that aspect ratio. The templates for eCommerce websites often use square images. The key is to be consistent.

2. Resize

Images taken by modern smartphones can be over 5000 pixels is width.  Most website high res monitors are 1900 pixels in width. In order for the website to load quickly, it is critical to resize the photo to reduce the number of pixels to what is needed. We need some simple math to see what sizes the images should be. 

• Assume the widest screen is 1920 pixels, so make the widest image 1920 pixels. (There are some 4K and 5k monitors in the wild, but they are generally an exception.)
• Assume the <main> section will have a max-width of 1200px. 

Using these assumptions, let’s look at the pixels for a couple of web pages. The first one has a header image and the second one is a layout with text and images. 

Screen dimensions with Hero Image

1. Hero image is full-width at 1920 x 500. 

2. The main section is set to a max of 1200px. 

3. An image that will be placed next to text (eg. with col-sm-6) that is a 4:3 aspect ratio should be cropped and resized to 600 pixels in width and 450 in height. 

4. Note that the visible part of the screen without scrolling will fall in about the middle of the text and image. This is desirable, because users can see that there is something underneath the hero image to scroll to. 

Screen dimensions without Hero Image

1. The main section is set to a max of 1200px. 

2. An image that will be placed next to text (eg. with col-sm-6) that is a 4:3 aspect ratio should be cropped and resized to 600 pixels in width and 450 in height. 

3. If there were three columns, the image would be cropped to a smaller size, like 400px in width and 300px in height to maintain the 4:3 aspect ratio. 

From these two examples, you can see that the widest image should be 1920px for a full-width image.

For a photo gallery, a good aspect ratio would be 4:3 for landscape photography on your smartphone. 

      Eg. use 800 x 600px or 1280 x 960px.

For a photo that uses half of the width of the main section, use a width of 600px. 

How to Crop and Resize Images

Now that we know what we need to do, we need to learn how to crop and resize images. There are many ways to do it, and how you do it differs on a Mac and Windows.

Mac Instructions

Use the Preview app. Preview is the default image viewing and editing software on Macs.

Step 1: Resize. Go to Tools->Adjust Size to set the size for one side of the image.

Step 2: Crop. Crop the image by dragging your mouse over the image. You will see the height and width of the image as you drag. Once you have the image to the correct size, then crop the image. You will see the crop button in the toolbar at the top of the page

Made a mistake? Simply hit Command Z to reverse out your change

Windows Instructions

Use Paint 3D.

1. Crop the image to the desired aspect ratio (4:3 for the lab photo gallery)
2. Go to Canvas Mode (in the ellipse)
3. Resize one side of the image to the desired size to adjust the image to fit. Make sure you have both the Lock Aspect Ratio and Resize Image With Canvas checked. 

When you make the 1200 x 400 image for the lab, it may work better to resize one side of the image first, and then crop. 

If you haven’t had to resize and crop images before, the cropping and resizing may be challenging for this lab. However, by the time you have cropped and resized the images for the lab, you will be a pro at it. If you already know how to crop and resize images and have tools that you prefer, any tools are fine.

3. Optimize

Whoa! That was a lot learning how to Crop and Resize images. The good news is that optimizing is very easy. All you need to do is use the tinypng.org online tool. Just drag your images into the tool and it will resize them.

Exercise: Images 1-2-3

Before we move on, lets practice with at least one image.

Let’s try out Images 1-2-3 on one of the images we need for the lab assignment. Here is a screenshot of the lab assignment:

Step 1. Download the images zip file

Photography Website Images

This is the images file we will use for the lab assignment for this week. 

Step 2. Choose your favorite image

Look through the images and pick out your favorite animal photo. This will be the hero image for the lab for this week. 

Step 3. Crop and Resize 

Resize and crop the image to 1200 x 400 pixels. 

Step 4. Optimize

Go to tinypng.org, drag in your image file, and download it back to your computer.  

Save your photo. You will use this for the header image in the lab assignment. If you would like to do the prep work on the other images right now, the rest will be cropped and resized to 600 x 800 for the photo gallery. 

Two Ways to Code Hero Images

There are two ways to code hero images.

1. As an embedded image <img>. This is what we will do this week.

2. As a background image with text on it. This is what we did for the puppies lab last week and for Pacific Trails.

Is it Better to Make the Hero Image Embedded or Background?

It depends. If you want text on the image, a background image is easier to manage. If you want to show the entire image at all screen sizes, then an embedded image will work better. Of course, an important factor is the type of image…if the image is part of the website content, then it should be embedded.

Background and embedded images respond differently on mobile. It will be easier to see how the options play out in the next exercise.

Exercise #1: Embedded Hero Image

1. Go to JSFiddle.net
2. Add an image with the code below:

<img class="header-image" src="https://webdevstudents.com/old/images/guitar-store-cropped.jpg" alt="guitar shop" height="400" width="1200">

Now add some CSS to the image:

.header-image{
	max-width: 100%;
	margin-left: auto;
margin-right: auto;
	display: block;
	height: auto;
}

This is the code that you will use for the lab assignment for this week. Note that there is a class called “header-image” that we use to style the header.

Drag the side of the browser JSFiddle browser window.  The entire image is always displayed at all screen widths. 

Your JSFiddle should look like this:

Exercise #2: Background Hero Image

Now lets see what happens with a background image. 

1. Add a div for the background image, with text in an <h2> on the image:

<div class="header-image">
<h2>The best prices for guitars in St. Paul</h2>
</div>

Add this CSS to the fiddle:

.header-image{ 
   background-image:url(https://webdevstudents.com/old/images/guitar-store-cropped.jpg);
   height: 200px;
   background-size:cover;
   background-position: center top;
   background-repeat:no-repeat;
}

Drag the side of the JSFiddle browser window. The text is always shown, the height stays the same, but the edges are cut off.

You need to choose images that will work when cut off.  You can position the image to control what part of the image is cut off with the background-position property. Even so, this image is a challenging one to use as a background image.

Your JSFiddle should look like this:

JavaScript Photo Gallery

Last but not least, we need to learn how to use the JavaScript photo gallery we will be using for the lab assignment this week. Follow this link to see how the JavaScript onclick gallery works.

https://jsfiddle.net/smetoxen/9d4jrr3n/17/

Clicking on the thumbnail photo is an onclick event that switches the main photo. What you need to do is change this photo gallery for the lab assignment to be the animal photography gallery.

Lab Instructions

For Lab 12 you will make an animal photography website using Bootstrap  and JavaScript using “Images 1-2-3”. For the Puppies Lab, I provided images that were already cropped, resized, and optimized. For this lab, you are required to do the cropping, resizing and optimized yourself. 

Lab Instructions:

Lab Instructions

View Live Lab Assignment

Download Lab Project Images