Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Changing the Size of an Image on Your Webpage

One of the most important procedures in designing a webpage is proper sizing of images. There are two ways to resize an image. 1. Use a graphics application. 2. Set the width and height attributes in the html img tag.

o Actually there is a third method: Set the img elements width and height properties using CSS (Cascading Style Sheets). The advantage of doing it with CSS is that it allows you to dynamically resize the image. This article, however, is about html.

Actual size image
Actual Size Image 236 x 238 pixels
Resized image
Image resized to
118 x 119 pixels
<img border="0" width="118" height="119" src="cheese.jpg" />

The easiest method is to Set the width and height attributes in the html img tag, however this has a disadvantage. Using this method, the browser has to perform the work of resizing every time the page loads, thus lengthening the page's load time.

Using a graphics application to resize the image

I recommend using a graphics application to resize the image, and then uploading the resized image to your web site. The graphics application that I recommend is the free Paint.Net application.

There are two important things to consider when resizing an image. 1. Maintaining the aspect ratio. 2. Loss of resolution.

The aspect ratio is the ratio of the image's width to its height. If, when changing an image's size you do not maintain the same aspect ratio, the image will appear distorted. In a graphics application you can simply set a checkbox, configuring the application to maintain the aspect ratio.

Aspect ratio not maintained
Aspect ratio not maintained
when resizing image.

But if you resize an image by setting the width and height attributes in the html img tag, you'll need to perform a calculation to maintain the aspect ratio. For example, if you double the width of the image, you must also double the height.

If you resize an image to a larger size, the graphics application or browser must fill in missing data. The graphics application or browser can't guess what detail to fill in, so an enlarged image will be blurry. In a graphics application might be able to use the application's sharpen feature to recover some of the missing detail, but this is only possible to a limited extent.

There is an image format that does not lose detail when you change its size. That is the vector graphics format. A vector file does not contain pixel data, but instead it contains instructions about how to draw the image. There are several different vector file formats, not all compatible with all browsers, and because the browser must draw the image, they slow page load time.

More HTML Code:
• Add an Image to a Web Page
• Using del and ins Tags to Mark Up Editing on HTML Page
• How to Troubleshoot an HTML Table
• HTML List Basics
• Use HTML Target Attribute to Specify Where to Open Document
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections
• Make an HTML Element Editable
• HTML Text Tags Basics
• Setting the Number of Items Visible in a Select List
• Form Input Labels

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268