img width and height attributes

A student asks…

“Just to clarify, the primary purpose of the width and height attributes is to reserve space for the image, not to actually resize the image, correct? “

The width and height attributes on the img tag actually do both; they reserve the screen real-estate and also resize the image.

Reserving real-estate

When you think about, what is HTML markup? It is a collection of content surrounding by tags giving instructions to a browser. All of it is ASCII text. There are  no embedded images or media like you might have in a pdf, or Word document. All resources other than text are referenced as external files. For example, look at the following example:

<img src="images/logo.gif" width="100" height="50" />

The browser is being instructed to reserve a place on the screen 100 pixels wide and 50 pixels tall for the logo.gif image, in the images directory, that will be referenced as an external file. Since all media resides outside the HTML file, then what we are doing is preparing a place on the screen where the media will be shown.

Providing Dimensions

The attribute values of width=”100″ height=”50″ state that a definite amount of screen space is being reserved. The image will be forced into those dimensions. If we do not provide the dimensions, the browser will calculate them based on the actual image dimensions; which may or may not throw off our design. Many designers recommend providing the dimensions to take that additional computational burden off the browser.

Here are some things to think about

  • If the image dimensions we provide are not the same as the original dimension, some distortion will take place
  • If the original image dimensions are much larger than the ones we specify in the attribute values, then we are wasting bandwidth. The entire image has to be downloaded and then resized before rendered. Why download a 1 MB image and resize it, if a 20 kB image will do?
  • If the original image dimensions are much smaller than the ones we specify in the attribute values, then the image will appear pixelated because it is being scaled up.

Best practices

Remember, you always have to think about the output. Keep different versions of the image to be used for different output resolutions. For example, if you have a 1 MB version of a logo for printed material, resize it for web delivery. Determined how many colors, and what size you need for the screen and then save an appropriate version for the web that has the needed dimensions, color depth, and resolution (72ppi). Put those dimensions into the width and height attribute values of your <img> tag. In that way, the image is web optimized. What you see in your image editing program is what you see on your web page. You are taking the resizing calculation burden off the browser, maximizing bandwidth, and preventing your image from distortion problems.

About archiving files

Definition

According to the Merriam-Webster online dictionary, an archive is a repository or collection especially of information 1. Using this definition we can say that to a web designer, an archive is the collection of all the files necessary for a web site to function properly. A web site is a collection of files. Those files, which can reside in one or more folders (directories), will often include the following types of information:

  1. HTML formatted content
  2. Graphics (image files like jpg, gif, and png formats)
  3. Videos
  4. Audio
  5. External CSS (Cascading Style Sheet)
  6. External Javascript
  7. Flash

Imagine taking your entire web site, with all of its html, images, CSS files, and media files and saving them all into one file that can easily be backed up or sent to another person over a network or through email. Next imagine compressing that one file so that it is smaller than the sum total of the entire web site. That is a web archive. When the file is decompressed, it returns to its previous size, each folder is recreated in the right hierarchy and each file is placed back into its original folder.

Archiving can be used in the following situations:

  1. You need to send a folder of files to another member of a design team
  2. You do not have direct access to a web server and need to send the web site archive to the webmaster. The web master will then decompress the file and place the files in the correct folder on the web server (this is more common than you might think).
  3. The project is completed and you want to back up the project without wasting a lot of space. For example, it it is a large project, you want it to be able to file on a single CD or thumb drive
  4. You are taking an online class and the instructor wants you to upload your project to a submissions folder for a grade
  5. You are backing up different versions of the design process and will name each archive with a date so that you can document the project timeline or simply be able to revert back to a previous design idea

Compression formats

There are many different types of archiving and compression formats. Some only archive, some only compress, some do both. Several of the most common are .zip, .sit, .tar, .rar, and .tgz. Wikipedia has a great article on the different formats and their purpose and platform2. For our purposes, we will only examine the process of creating a .zip archive because it is supported natively on both the PC and Mac platform. The term natively means that no additional software is required beyond the most current version of the operating system. There are software applications designed to create, and expand archives, however we will look at the ways to create the .zip archive using the built-in tools that come with Windows and OSX.

The process

While you can individually select specific files on a one by one basic to include in a compressed archive when it is better to do so, to archive an entire web project it is usually easier to select the root directory file that contains all the files you want to archive. For example, let’s say we have a folder named unitA. The unitA folder contains all of the files necessary to complete the unit A activities.

In Windows

  1. Select the unitA folder
  2. Click the right mouse button. You will get a context sensitive menu
  3. Select the Send to option. A submenu will appear
  4. Select the Compressed (zipped) folder from the options. A new file will be created and named unitA.zip

The following YouTube video from TeccaTV explains the process nicely

In OSX

  1. Select the unitA folder
  2. Press and hold down the Control key and then click the mouse. You will get a context sensitive menu
  3. Select Compress “unitA” from the options. A new file will be created and named unitA.zip

This YouTube video from Mike Brandt illustrates the Mac procedure

 

Extracting an archive

Extracting or expanding is the term used to describe taking an archive and returning it to its original set of files and folders. On both the PC and Mac platforms, the .zip format files are self-extracting. This means that double-clicking the .zip file will automatically create a new folder with the same name and create a copy of all of the files and subfolders in the correct order and hierarchy. No special software is needed.

Note: An assumption is being made that Windows XP and OSX are being used. If you are using an old version of the operating systems, then a third party software application may need to be used to create and extract the archives.

References

1.Definition of archive. Merriam-Webster online dictionary. http://www.merriam-webster.com/dictionary/archive
2.List of Archive Formats. Wikipedia. http://en.wikipedia.org/wiki/List_of_archive_formats