HTML Part 5 – Images

In the previous part of our guide, we discussed linking. While links are really helpful for making your website functional and better integrated to the world wide web at large, websites can really pop with the use of images.

Optimizing Images

While it is easy to just learn the code and dump in images on your website, optimizing images for the web is a much better rout to take. By optimizing, we mean making the image in a proper dimension for the website and compressing it for fast load times. If one were to create a high resolution (like, 300DPI) with substantially large dimensions (say, 8000 x 12000 pixels), even if one were to use code to resize it, the file size will remain extremely high. This can create a number of problems.

For one, you use up a lot of web space unecessarily. Even though many hosting plans offer space that are tens of Gigabytes or even hundreds of Gigabytes (as of 2013 anyway) in storage, using up that space with unoptimized images isn’t necessarily wise because if you manage to use up that storage space and need it for something like a large file later, going back and optimizing your images would be a substantial amount of work which should have been done before uploading those images.

Another problem with unoptimized images is the use of bandwidth. In some parts of the world, even though high speed bandwidth is offered, there are very strict bandwidth caps. It wouldn’t be advisable to contribute to users getting closer to those caps jsut for the sole purpose of those users simply looking at your site. In addition, most hosting services have a limited amount of bandwidth they can distribute to each user (I personally never believe ads that say hosting services offer unlimited space and bandwidth. Sometimes, bandwidth is metered still. Yuck!). So, whatever your bandwidth limitations are, it’s best to avoid using it all up in serving unecessarily high resolution images on your site.

In addition, unoptimized images can slow down page load times. Many users get annoyed when a website takes forever to load. Sometimes, it’s just a slow connection somewhere along the line. Sometimes, a site is hosted in a country far away and the data physically needs to travel farther (for North American users, for instance, if you are viewing a smaller website hosted in the geographic middle of Russia, the pages might take an extra second to load more than normal). Sometimes, it’s simply because images aren’t optimized on the page.

Those are a few reasons why it’s good practice to optimize your images for the web. The question is, is it difficult to optimize images for the web? Not really depending on your experience with using images on a computer. There are multiple methods of optimizing images and multiple programs capable of doing so.

For Windows users, the quick and dirty way is simply using Paint. It isn’t perfect by any stretch of the imagination, but it is an extremely accessible solution.

Optimizing Images Using Paint

So, let’s say I have the following image that I was really proud of (Yes, I’m being very hypothetical here):

Unoptimized

Let’s say I was so proud of this image that I really wanted to post it on my site. There is one problem though. Look at where I have my arrow pointed at. That is the picture dimensions (this image is being measured in pixels, so the dots on your screen that make up what you see essentially). The size of this picture is way too big. If I were to just post this image raw on my website, it’ll either run off the screen or take a long time to load. Inconvenient in any case.

We need to shrink this down to whatever is suitable for the website. What size that is really depends largely on how you are building your website (is it a photo gallery? Is it a thumbnail? Is it an avatar?). Ideally, you need to determine the optimal dimensions that best suit your needs. Worst case scenario, you can simply pick a number and hope it fits. In that case, always be a little smaller than what looks good because you need to organize content around it in a vast majority of cases.

Let’s say, for argument sake, that the maximum width of our image for our design is 100 pixels wide. For that, we can just click on the button with two little boxes. That will open up a window that shows a few resizing options. What we need is to measure this image by pixels and not percentage. So, we click on pixels. This will show the dimensions of the image in pixels. Before making adjustments, make sure the “Maintain aspect ratio” checkbox is ticked. Otherwise, your image will suddenly become stretched if you make any adjustments. Here’s a highlighted image of what I’m talking about:

HTML_Images_2

In the horizontal text box, type in 500. This will automatically adjust the vertical dimensions to a pixel value that doesn’t cause any stretching. In my case, this is what I saw:

HTML_Images_3

From there, just click OK and the image will be resized. I’ve zoomed in to 100% in the optimized version of my image:

HTML_Images_4

The next step is to save this file. Click on the blue button on the top left hand corner with the menu icon and down arrow. Use “Save As…” so you don’t lose your original high resolution picture. At that stage, you’ll be given a small variety of formats. I recommend either the PGN format or JPG format. Both, in this case, will work. If it’s a small icon with a limited number of colours, then the GIF format might be ideal instead.

HTML_Images_5

Once you have decided on a format, then click on that format. You’ll see a new window pop up. Find a place on your hard drive that you’ll easily find (or, preferrably, in a folder that contains your whole website on your hard drive) and give it a short, yet easy to understand name. Don’t use uppercase or spaces if you can help it or otherwise, it’ll be a little bit more difficult to link to your image later.

HTML_Images_6

When done, click “Save”.

Optimizing Images Using GIMP

GIMP is the GNU Image Manipulation Program and is free and open source. It allows for more in-depth image manipulation and can be used on multiple platforms. You can download GIMP via their homepage.

When one opens GIMP, they’ll notice the three windows that it opens up. One is the Toolbox, the second is the main image window, and the third is the Layers window. In the main image window, click on “File”, then “Open”

HTML_Images_7

Next, open the image in question. If it’s near the desktop, just select Desktop on the left hand menu and browse from there. If it’s near the C drive, click on the C drive in the left hand menu and browse from there.

Now, click on “Image”, then “Scale Image…”:

HTML_Images_8

Next, make sure the chain link is connected to scale properly (as shown)

HTML_Images_9

Now, type in 500 in the “Width” text box. After that, click on the text box for “Height” and the numbers should automatically adjust. This is what I got:

HTML_Images_10

From there, just click on the “Scale” button (72 resolution is fine).

Now, click “File” and “Export”:

HTML_Images_11

Select the destination folder, choose a file name, browse to the destination folder tht you want to save the image as, select a file type by pressing the plus sign next to filetype (image shows what happens after you click on the plus sign), select a filetype of your choice, then click “Export”.

HTML_Images_12

In the new window, typically, the default settings are fine. In this example, I used the PNG format. In this case, just hit “Export”

HTML_Images_13

Way to go! Your image is ready for the web!

Embedding Your Image

Embedding your image in HTML is a bit like linking in general. You direct the browser to read something from a destination. First, we need an ideal setup for our website. If you are not using any special packages and are creating a simple static page, your folder system might look something like this:

HTML_Images_14

Essentially, place your images in their own separate folder to keep your site tidy. As your site expands and grows, a tidy website will make your growing website easy to manage.

Next, we need to start editing our HTML document. I’ve started with the following:

HTML_Images_15

Next, I add in two lines of code. The first is just text in the paragraph tags explaining what this image is.

<p>This is my happy face picture!</p>

Next is the line of code with the image:

<img src=”images/happyface.png” alt=”Happy Face”>

Like so:

HTML_Images_16

If you save and close the text document, then test it afterwards. You’ll see your image appear below the line of text.

The “img” tag tells the browser that what it is reading is code to display an image. after the space is information about this picture. “src=” tells the browser to load the image from a particular source – basically, “Where is this picture file? Right here.” Finally, there is the “alt=” portion of the code. This is simply metadata that is used to describe the picture. If, for whatever reason, the image doesn’t load, this text is put in its place. Alt code also helps search engines to find and organize your images in their search results. In addition, alt text is useful for those who are visually impaired. Those people use programs like JAWS and if an image appears, that program can tell the user what the image is through the alt text. So, where possible, it’s a good idea to use alt text.

What can be added to this code is height and width. Height and Width can re-adjust images and scale images down to a different set of dimensions. Again, ideally, you’d have these images at the proper dimensions before uploading, but height and width can also be used to create placeholder images on your site. So, a placeholder piece of code might look something like this:

<img src=”” alt=”placeholder” width=”200″ height=”100″ style=”background:#888888″>

I’ve added the style=”background:#888888″ portion so that I can see where the image is going to ultimately sit on the page. This can be extremely useful when planning out the design of your site whether you are using basic code or advanced code. when you have an image ready to go, you can simply remove the style portion of the code and insert the location of wherey ou’ve uploaded your image to in the “src” between the quotation marks. So, here’s my text file now:

HTML_Images_17

Now, here’s the output:

HTML_Images_18

we should note that while there are ways of aligning content with HTML code, this is best handled with CSS as methods like “center” and “div align=center” are deprecated tags. We will cover CSS in another tutorial.

Up next, we will be covering how to create lists.

Part 4 – Links – Internal, External and Anchor | HTML Guide List | Part 6 – Lists


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.