You can’t go to any website without seeing some type of image on the site – pictures, logos, etc. Many of these are files which are loaded onto a web host server and then displayed when you browse the Internet. We are going to talk about how to set up images and have them show correctly, avoiding the situation when they sometimes do not look so good or don’t show up at all. In this article, we will refer to pictures but generally applies to any graphic you add to a website.
Start With High Resolution Pictures
For pictures to show well on the Internet, you should begin with quality high-resolution digital pictures. The best display will come from pictures taken with a digital camera although you can scan them in and still come out with good images. When you download those pictures onto your computer, the files are digital and usually in a “print quality” resolution, meaning they will be 300 dpi or better.
Tip: “dpi” is dots per inch and refers to resolution. As a standard for the Internet, pictures should be loaded onto the web at 72 dpi. If you want to print that great picture, it should be a minimum of 300 dpi.
Another Tip: If you have to scan in a picture, make sure you set your scanner settings to 300 dpi. That way you will get a good file you can use to upload with.
You want to start with high resolution pictures even though you will reduce the dpi to 72 when you load them onto the Internet. Why? Because you may need to “crop” (trim) or enhance the photo before you save it to upload. That way you will not lose any of the picture quality.
Use the Right Code
Putting pictures on a web page requires a specific code in the web page. The standard HTML code format to show a picture is:
[<] [img src=] [“images/myhouse.jpg”] [border=”0″ width=”170″ height=”200″] [alt=”this is a photo of my house”] [>]
(When putting in the code, do not use the brackets. We just put them there in this example to help in describing each part of the code. )
The [<] in the example is called an opening tag and the [>] is the closing tag for the code. You have to put them in for the code to work.
[img src=] is the abbreviation for image source. This tells the computer that the information following img src= shows what the characteristics of the picture are.
[“images/myhouse.jpg”] tells the computer the folder where the copy of the picture is stored. myhouse.jpg is the name of the picture file stored in the folder images/. The apostrophes are required. When your website files are uploaded onto your web host server, you usually load a folder that shows all of your graphics, pictures, etc. The name of that folder is what is going to show first, followed by a / and then the picture file name. The picture can be a .jpg, .tiff, or .gif, and that should also match the actual file name.
Tip: If you upload your pictures along with the website files without putting the pictures in a folder, then you would only show the name of the picture file, i.e., “myhouse.jpg” without the images/ or the /.
[border=”0″ width=”170″ height=”200″] tells the computer what picture size you want to show on the website and whether or not you want to show a border around the picture. The “170” says the picture is 170 pixels wide and “200” says the picture is 200 pixels in height. The number of pixels (the standard measurement of photos) will vary depending on the size you want to show. The “0” after border= says you do not want a border.
Tip: You want to make sure that the width and height in the code matches your actual picture width and height or it might show up looking distorted, stretched or scrunched up.
[alt=”this is a photo of my house”] serves several purposes. With today’s technology, those persons who are visually impaired may use software to “read” websites. By putting this code in, which is now a coding standard, the software will read the picture code and then tells the user what it is. Secondly, a side benefit is it helps the person working on the picture codes to identify which picture they are working on.
How We Get Photos Ready
As a web designer, we use Adobe Photoshop to work on pictures, images, logos, etc. Once we know where the picture is to be placed, we determine the size it can be and then re-size it to fit the space.
Sometimes we have to “crop” (trim) the picture. For instance, we might have a real estate agent who wants to show off a picture of a house he wants to sell. Looking at the picture, for whatever reason, the house isn’t centered in the photo and there is a lot of trees, sky, etc. What we would do is take the photo and trim it so that the house is in the center of the picture. We always trim before we reduce the dpi of the photo to keep the resolution quality of the photo. Once it is set the way we want, we then “save for the web” at 72 dpi, upload the photo file where needed and make sure the code matches.
Note: When reducing any photo resolution down to 72 dpi, the actual size of the photo will also change to smaller numbers. So it is important to make sure the width and height matches in the coding after the photo is set up for the website.
And there you have it. Questions? Feel free to email us about any questions you might have and we will see what we can do for you. Thanks for stopping by.