Adding Images To Your Pages Using HTML

You can use any plain text editor like Notepad or TextEdit on Mac to add images to the body of your webpages. If your template is mobile or responsive do not exceed about 290 pixels in width for the image, or use the responsive code below. 


See Also…

• Replacing webpage pictures

Quick code to make an image responsive
Select, copy and paste the following css style code. Add it to your image to make it flex for desktop, smartphone and mobile devices. Remove any height and width code.


style=”max-width: 100%; height: auto;” 


In your HTML page, add the above code as highlighted below: 


<img src=”picts/sample-image.jpg” style=”max-width: 100%; height: auto;” alt=”Description”><br> 




Responsive image using a new class
This will create a new class you can use to make any image responsive. If your website or template has a global .css file like a “style.css”, add the following code to your .css file. You can add it anywhere on it’s own line, or add it to the bottom of the file. 


.resp-image { max-width: 100%; height: auto; } 


In your HTML page, add the new class as highlighted below: 


<img src=”picts/sample-image.jpg” class=”resp-image” alt=”Image”><br> 


If your image already has one class, like a border class, add the new class name with one space like the following example: 


<img src=”picts/sample-image.jpg” class=”img-borders resp-image” alt=”Image”><br> 




Basic HTML image code
Non-responsive, for images less than about 290 pixels wide (or for any sized non-responsive image). To add a .jpg graphic into the body of your webpage, select, copy and paste the following HTML code into your webpage:


<img src=”picts/sample-image.jpg” alt=”Image Description”><br> 


Now create a .jpg graphic called “sample-image.jpg” and put it into your picts folder. Remember that hosting is case sensitive so don’t use any capital letters on either the page code or the image file name. Make sure your page code and the graphic name match exactly. 



Sample Image #1 




To center the image on the page, add css centering tags as shown below: 


<div style=”text-align: center;”>
<img src=”picts/sample-image.jpg” alt=”Image Description”><br>
</div>

Sample Image #2

Adding an image with a link
Perhaps you want your graphic to link to another page as well, use this code: 


<a href=”your-page-name.htm”><img src=”picts/sample-image.jpg” alt=”Image Description” style=”border: 0px;”></a><br> 



Sample Image #3 




Or you can make the graphic link to another website. The link below goes to ebay.com for example: 


<a href=”http://ebay.com“><img src=”picts/sample-image.jpg” alt=”Image Description” style=”border: 0px;”></a><br> 



Sample Image #4 

Basic responsive image
Use the following code for a basic responsive image. This is the simplest code for an image that will flex to fit the space and not exceed it’s actual dimensions. Size your jpg image to the widest size you want the image to display on the webpage. 


<img src=”picts/responsive-image.jpg” style=”max-width: 100%; height: auto;” alt=”Image Description”>





Responsive image with a link and caption
The following code allows you to add any size image to a responsive website or template html page with a link, top and bottom margins and a centered caption. A max-width is included so the image will not exceed 650 pixels in width.




Note: This webpage is responsive. Narrow your browser width to see the image respond. 




<div style=”text-align: center; font-size: 16px;”>
<a href=”your-page-name.htm”><img src=”picts/responsive-image.jpg” style=”width: 100%; max-width: 650px; height: auto; margin: 5px auto 5px auto; border: 0px;” alt=”Image Description”></a><br>
Sample Responsive Image<br>
</div>

Sample Responsive Image