You would think that we would’ve covered something so basic as images much earlier. You might also think that the person preparing these lessons simply forgot to make the images lesson earlier. Well maybe that’s true, but you should welcome something so simple after all that jazz about bits, bytes, and binary counting.

This lesson will go through adding images in simple ways like as centered page headers as well as other ways like incorporating them into your paragraphs so that you have better layout

Adding Images to Your App

Finding Your Image

Adding images to your app is simple. First you’re going to need to find an image you want. I’m going to use the YEI logo in my app. Feel free to download it yourself:

YEI Remake1

Put it in the Right Place

Make a new directory and call it something like, “pics” or “images”. Here’s what my directory looks like. You won’t have a file call ‘README.md’ of course. That’s the file that holds the text that shows up beneath the file list when you look at these project example repositories on GitHub.

Screen Shot 2014-05-19 at 11.39.22 AM

Add it in Code

Go to the place in your app’s code where you want the image to show up. I’m going to put mine on the first page right above the navigation list. Here is the syntax for adding images in HTML:

<img id="image-id" src="image-folder/image-name.png" />

It’s important to give it an id. We’ll talk about that soon.

How Does That Look?

Screen Shot 2014-05-19 at 11.44.11 AM

 

That doesn’t look right. For one it’s huge. For two it’s cut off on the right side. When we added in the image, we didn’t specify how big or small we wanted it so it just made it full size. We need to specify some things about the image. To do that, we’ll use another language called CSS.

Making Your Own Style Rules

  1. Create a new file called “custom.css”
  2. Add a link to it in the <head> of your app, just below where we link to the main stylesheet
    • Just add the code <link rel=”stylesheet” href=”custom.css” />
    • Put it directly below the link to “style.css”

CSS Crash Course

CSS stands for Cascading Style Sheets. Cascading refers to how styles trump and flow into one another. CSS is how we change the color, size, position, and various other things about the HTML elements that we put into our apps.

Syntax

#element-id {
  property: value;
  property: value;
}

Let’s go over what all these parts mean:

  • #element-id  This is what we call the “selector”. It is how we identify the element that we want to alter. Notice that we start it off with a pound sign. When we’re identifying an element by its id, we use a hash tag.
  • {  We enclose our style rules in curly braces
  • property  This is the thing that we want to change about the element. It can be something like “color”, “font-size”, or “text-align”
  • :  a colon goes between the property and value
  • value  This is how we want to change that thing.  Paired up with the properties above, we could set them as “blue”, “16px”, and “center”
  • ;  a semicolon ends a property/value pair
  • } Closes out the CSS

Let’s pretend that we have a paragraph with the id of “rhubarb” and we want to make it have size 16 purple text that is center aligned. We would write the code as follows:

#rhubarb {
  color: purple;
  font-size: 16px;
  text-align: center;
}

That’s just an example. We’re going to be using a different set of rules. And they require their own explanations.

Styling Our Image

So I want my image to

  1. Be smaller
  2. Be centered

That’s plenty easy to do.

Changing the Size: width

Sizing is generally handled by the height and width properties. We’ll be using width. The reason for this is that we have to make sure that nothing is wider than the width of the screen. It will also automatically scale the height for us.

To alter the height of our image, we’ll just follow the syntax as laid out above:

#logo-img {
  width: 80%;
}

According to that, the image I put in that was so big will now be 80% of the size of the window. We could have used a different unit of measurement other than percent like, pixels(px). We use percent so that it will change size depending on the size of the screen that our users are viewing it on. Take note that in the following two example images, the image takes up less space, but always the same proportion of space no matter how big the window is.

Screen Shot 2014-05-19 at 11.53.06 AM

Screen Shot 2014-05-19 at 11.53.13 AM

It’s kinda awkward to tell from the pictures, but the second image is of a much wider browser window. The window got wider, but the image always takes up the same proportion. Now we just need to keep it from hugging the left side.

(side note: i’m changing the app navigation panel on the front page back to a list view. I think it looks dumb as a navbar. Just telling you this so you don’t get confused by it changing looks.)

Setting the Alignment: margin-left and margin-right

As you’ve noticed, the image, while the size we want it, is jammed against the left side of the page. English uses a Roman alphabet, so we’re used to reading things left to right. That’s why everything in web design automatically justifies itself to the left of the page. If we were in a society based on a language that reads right to left, like Arabic or Hebrew, then the opposite would be true. Check out this link to see what I mean.

Earlier, we used “text-align: center; ” as an example of how to center align a paragraph. You would naturally assume that there was some property like “image-align”, but there isn’t. Not sure why we can’t have something like that, but oh well.

Since the lords of CSS haven’t given us something that would be so useful as an image-align property, so we will alter the image’s margins. Margins are the invisible areas to the top, right, bottom, and left of an element. They are what gives space between elements. Notice all the whitespace in between paragraphs? That’s a margin. By default, the browser adds a margin between block-level elements like lists, paragraphs, headings, and images.

At any rate, we need to get that thing centered. We’re going to do that by setting the invisible space on either side of the image (i.e. the left and right margins).

Using the margin Property

There a couple ways you can do this: one is easy to remember but inefficient, the other is a little more complicated but will save you time and space if you learn it. They both have to do with how you specify which side of the element you are altering the margin for. Remember that every element has margins on the top, right, bottom, and left.

Easy Way

You can simply specify in the property which side you’re altering like this:

#logo-img {
  margin-left: 10%;
  margin-right: 10%;
}

That would set the invisible space on the left side of our image to take of 10% of the page and the invisible space on the right side of our image to take up 10% of the page. Here’s an abstract representation of what we’re talking about.

Imagine the blue area is our image and the purple areas are its left and right margins.

The ‘Hard’ Way

You don’t need to learn this, so this will be brief. You can set the all the margins at once. Just write all 4 values you want starting with the top and working clockwise. To get the same result as above, you would write:

#logo-img {
  margin: 0 10% 0 10%;
}

In this case, “0” is just a placeholder. It means “leave as is”. If you put “0%” it would be a different story. Either way, here is the final result

Screen Shot 2014-05-19 at 11.58.58 AM

Nice and pretty!

Mid Lesson Break

Incorporating Images Into Your Text

The <img> tag can be dropped right into a paragraph like so,

I added the id “logo-img2″ and gave it the following style in my custom.css file to make sure it wasn’t huge:

#logo-img2 {
  width: 40%;
}

Here’s how it looks

Screen Shot 2014-05-19 at 12.03.58 PM

That’s sort of there, but not quite. The image just kinda jumps in there, shoving everything else out of the way. We want the text to wrap around the image. To do that we’ll use the CSS property “float“.

Float

As I rambled about earlier, elements are automatically aligned left, and take up their own line. Float makes it so that two elements can be next to each other. This property can do great things or cause headaches, but the name of the game here is simplicity so we’ll just use it in simple ways. To get the desired effect, just add “float: right;” to your CSS. It will end up looking like this.

#logo-img2 {
  width: 40%;
  float: right;
}

After doing that, my app looks like this:

Screen Shot 2014-05-19 at 12.05.16 PM

Now that looks good.

You Said This Lesson Would Be Simple…

You should know by now not to trust me. There’s just one last thing before this lesson’s project.

Image Optimization

We need to make sure that the images we’re including in our app are not any bigger than they need to be. Big images mean big apps, and people don’t like downloading those.

Here’s an article from Google on the issue.

Tutorial Using Preview in Mac

Here is a version of the YEI logo

It’s pretty big; both in dimensions and file size. It’s 640×328 pixels in size and the file is 245KB. What can we do to cut this down?

Cropping

We can eliminate some of the empty whitespace by cropping it out. Use the Select Tool to outline the area you want to keep. I want to get rid of the white on the sides and a little bit of the wave on the left. Here’s my selection

Now I just go to the menu bar and choose “Menu>Crop”. Doing this made the image smaller, but we need it much smaller.

Scaling Down

Go to the menu bar and choose “Tools>Adjust Size”. Here you can set the image to be whatever size you want. You can count on the normal size of a screen being about 280px wide, so let’s set it to that.

You can see there at the bottom that the file size is getting smaller again.

Changing Image Format

I made this logo on a program called “Sketchbook Express”. This program, like Photoshop, allows for layers. To have layers, you need to save files in the .tiff format. That’s good for designing things and you should keep a .tiff copy on your computer, but .tiff is a very large format. We need to go simpler.

Go to “File>Save As”. This will create a copy of the file your working on and allows you to choose the format you want to save the copy as. GIF will do for us.

Notice any difference? I don’t. There is a difference in size though. When we started, we had an image 245KB in size. Now it’s 24KB. We managed to shave it down by a factor of 10!

Project

Add some images to your proposal.

GitHub