Programming.a.baby - (WebDesign) Images on Web Pages

Web Desgn - Article 2

How Easy

This is a Article about images on web pages, yes is true that I've more articles about web pages like htm5 and Css articles, but we want to focus only in the web design and quality of what we send and insert in web pages.

If you already know something about Html, you can check my other articles about HTML5 or my other articles about CSS where you can style like a "pro"

I let this article easy to understand, so all people can read and use it

...

Step 1 - Including the Image

I know that the first thing you want to know is how i insert a image inside a web page

If you already know, then go to the Step 2, if you think don't know or you don't know all, then stay in this step and learn the good procedure

Put the image in the same folder where you have the Html document (web page)
Edit you html document with your favorite Html editor, or if you like with notepad (right click the html document and select "open with" --> Notepade or edit if you already have an editor)
Inside the code between the "<body>" and the "</body>" paste the follow code

Please take a look on the Html code that i provide for you as example "Sample 1 - Html Code "

Some explanation about the code

Sample 1 - Html Code

<html>

<head>
 <title>My Title</title> 
</head>

<body>

 <div>
  <img src="image1.jpg" alt="info about image" style="border:0px; width:auto; height:auto;" />
 </div>

</body>

</html>

Step 2 - Explain me please

Some explanation about this little code

<img src="image1.jpg"
- This is the source "same patch",name "image1" and type ".jpg" of your image
alt="info about image"
- This is a description of the image in case there is some error with the image displaying (obligated by new web 2.0 good procedures)
style="border:0px;
- If you want no border in the image you give Zero pixels, or you give 1px or plus if you want a image border (for element's border style please refer to my Css articles to learn more)
width:auto;
- The width size in Pixels "100px;" or percent "100%;" or auto "auto;" which mantains the aspect ratio and original size of the photo/image
height:auto;" />
- The height size of your image, following the same procedure as the width size

Now, about what kind of image you can put in a web page

Image Extension Type

For high resolution images, use ".png" images (not always supported by old browsers), if you think that some people that are watching your photos use very old browsers with old computers, then use ".jpg" that all browsers support
For clip art, non high resolution, use ".gif" or you can also use the ".png"
Do not use ".bmp" images because they are normally big size and hard to load
Avoid to use images bigger then 150 KB size, unless you will only use 1 or 2 images in that page and, or if the web host server where you have your images and web pages has a big speed conexion and web sites are loading fast

Image Type Samples

See all 3 photos

PNG type

JPG type

GIF type

Samples

I made Four (4) Images with 4 Types, the First one i didn't Upload here because even Hubpages having a great upload they would not aloud "BMP" image's type, but I've the information of each one to give you

So, at measure you are taking a look on the 3 images at your right you will see that each one has a different resolution, try to click each one of it and check the real size

If you also right click to check image properties you will see they are "JPG" types, but only because when i upload them, Hubpages converted all to this type, in reality they have 3 types

The first is a PNG
The second is a JPG
The third is a GIF
All of them have 300px width and 300px height

All result in different weights, and this will decide how fast you web page can loadbut also show a type of quality that you need for the application type you want to do with your web site

Now check the results with the four images i made:

The BMP image type result in a file weight of 264 KB
The PNG image type result in a file weight of 59 KB
The JPG image type result in a file weight of 38 KB
The GIF image type result in a file weight of 32 KB

...

Next Web Design Articles »»»

Programming.a.baby - (WebDesign) Background Images
Of course it would be good if before you read this Article you would understand a bit of Html and Css, but why am i here, if is not to make it simple, explaining you how to do. One way or the other, you can...

««« Previous Web Design Articles

Programming.a.baby - (WebDesign) Create a Web Page
You want to create a Web Page You do not know how to make one You don't have an editor Making a simple Web Page is not difficult, but would requires experience if you want to make something more complex...

Others are also reading...

Programming.a.baby - (WebDesign) Create a Web Page

Programming.a.baby - (WebDesign) Background Images ( picture background design for your ) ( web design programming )