How To Center an Image Using HTML Programming

Arranging images on the website can easily be done by using HTML codes. Your website is written in HTML, and placing images on the site requires that you use the proper attributes and tags.

1. Prepare the image.

Edit the image before placing it on the website. Take into consideration the image size and format so it will be optimized for your web page. Some people resize the images through the website editing software which does not really change the size of file. You have to reduce the file size if want your images to load faster on the Internet browser. Use an image editing software like Adobe Photoshop to optimize your images for the web. You can resize the image and even reduce the file size with the software. The images height and width can easily be manipulated in Photoshop. When you are done editing the image you can save the image file to a format like JPEG or GIF. Both file formats can compress the image enough to reduce the file size and speed up its load time on the website.

2. HTML image centering code

Some of the HTML tags used for centering images are deprecated meaning that there is a new standard code used on browsers and the old tags will cease to function in the future. The image attribute is still used as the standard code for containing the image’s information like the location, description, height and width. The image attribute is written like this:

<img src=”image.jpg” alt=”image description” height=”50” width=”50”>

Web designers used the “center” tag to center their images on a web page back in the day when they weren’t deprecated. So the image will be placed in between the “center” tags this way:

<center><img src=”image.jpg” alt=”image description” height=”50” width=”50”></center>

Since there is a new standard for centering images this method can no longer be used.

The Paragraph and DIV tags are widely used on websites that browsers accept as the new standard. Coupled with the “align” attribute, you have more control over the image’s placement on the website. You can move your image left, right or center with the tags and “align” attribute. Using the DIV tag you can center your image this way:

<div align=”center”><img src=”image.jpg” alt=”image description” height=”50” width=”50”></div>

Using the Paragraph tag you can center your image this way:

<p align=”center”><img src=”image.jpg” alt=”image description” height=”50” width=”50”>

These are the more acceptable ways to center images on a website.

Edit your images with the right image and file size before you put them up on the website. Don’t try to edit the image with your web page editor because it won’t present the same results as it would on an image editor.

 

Share this article!

Follow us!

Find more helpful articles: