You’ll hardly find a website that doesn’t use images. One can’t overlook the fact that we’re living in a digital era, and thus, adding images help to increase engagement rate on your site. There are some stats that will further illustrate why adding images to a site is so important. According to a few sources, articles with images get 96 percent more views while a press release gain 45 percent views and so on. Plus, around 67% of consumers say that image-quality is very important for choosing and purchasing a product from an e-commerce site.
So, now that you’ve become convinced about adding images to your site make sure to embed them in the best possible way. Unfortunately, not all of us still understand how to place images in the website in the right manner. Remember, while adding images ensure that they’re relevant and helps to interact your message clearly, and are high in quality.
Did you know that search engine such as Google index your images just like text? That’s true, just like Google indexes the keyword placed in your text, similarly it deploys crawlers to index and rank your images as well. In order to make your images search engine optimized you’ll have to pay focus on trimming image sizes to optimize the site performance.
How to Work With Images in HTML?
In order to optimize your images for your website when using HTML as your choice of markup, you will have to understand about image tags that lets you insert an image on your site’s web page in the best possible manner. For example, let’s have a look at the following code:
2 | <img title="Trending Product" alt="Some of the latest trending products of our company" src="images/products/trendingproduct.jpg" /> |
In order to use the image tag correctly, you’ll first have to understand about each and every attribute of the img tag, as listed below:
The title attribute:
When a user will hover over the image placed in your site, its title will be displayed in the form of a pop up. Now see the above code, here when your site visitors will move their mouse over the image, they’ll see a pop up with the text “Trending Product,” which will the name of your product (make sure to keep the title descriptive, and gives information about what the image is about).
The src attribute:
src also referred to as source is specifying the location where your image is stored – it can be either an URL or an image folder within your directory.
The ALT attribute:
Alt is the most important attribute of the image tag. The text within the Alt attribute is used when some doesn’t load or is being used by some visually impaired. Also, search engine uses to determine how to index an image. The alt attribute is very useful not only for the visually impaired, but also optimizes your SEO. Since, this attribute is so important make sure to use it correctly by giving right description about your image with relevant keywords.
Size of the image:
A lot of sites suffer one common problem while adding images that is slow page loading time. So, make sure to define the correct image size. So, if you don’t want to degrade your site’s performance ensure to cut down the image file size but without sacrificing it’s quality. For instance, if your image appears as 60×60, then use an image file of size 60×60. If you’re using a large-size image 600×600 image, and tells the browser to resize it to 60×60, the browser will still load the large image and later resize it to a smaller size. But make sure not to let your browser shrink the larger image to a small one. For this, you can make use of an image editing program instead.
How to Work With Images in CSS3?
The web is filled with lots of CSS tricks that helps to optimize the image, however here we’ve discussed about a single trick that you’ll find quite useful when you can’t change the image on your site’s page, because you don’t have access to HTML. You can achieve your objective using the CSS box-sizing property.
For example, if you want to replace an img tag on your site with an image that is hosted somewhere else, but don’t have access to the markup (as shown in the code below) you can use the box-sizing property to keep dimensions fixed and add the other (new) image as the background image.
1 2 3 4 5 6 | <body> <!-- .header across website on other pages with different children, so no background image is added--> <div class="header"> <img class="newBanner" src="http://xyz1.com/banner.png"> </div> </body> |
Code after including CSS3 box-sizing property:
/* All in one selector */
1 2 3 4 5 6 7 8 9 10 | .newBanner { display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: url(http://xyz2.com/mynewbanner.png) no-repeat; width: 150px; /* Width of new image */ height: 234px; /* Height of new image */ padding-left: 150px; /* Equal to width of new image */ } |
Conclusion
So, if you too want to use the image in the right way in HTML and CSS3, then hopefully this post will help you understand about how to use image tag correctly in HTML, and the CSS3 trick that let you replace an existing image with another one hosted elsewhere.
About The Author
