Being engaged in self-development of design, take seriously the images used. You should not take photos for exclusively entertaining content or related decorations. They really decorate the resource, but also enhance the effect of the article and attract readers. If you did not know, this is a great way to promote a site and increase conversion. Therefore, now we will learn how to choose the right images and insert them into the markup. And also we will understand how to reduce images in html, process them and add effects.
Introducing the img tag
There is a special tag in the hypertext markup language that tells the browser that it will now receive an image. This is an img tag. It has two required attributes:
- src - to indicate the source;
- alt - for description.
As a source, you can specify the URL path to the image or its web address. And also you can embed photos that are on the local computer. In this case, the full or relative path is indicated. For example, the image is located in the img folder in the working_directory directory on drive D. And the document with index.html markup in the site folder in the same working_directory directory.
Full will look like this:
<img src="D:/working_directory/img/file_name.jpg alt=" ">
Relative to be indicated depending on the location of the document that refers to the image file:
<img src="../img/file_name.jpg alt=" ">
How to reduce image size in html
Each image has a size. It is usually measured in pixels. If you take a file with a height of 1200 pixels, a width of 3000, paste it into the markup and open it in a browser, then at best you will see half of the photo. And if you do this on a tablet at 500px, then only one fifth will be visible. That's because the browser downloads the full file size. But this task is easy to handle if you know how. In HTML, only one word helps to reduce the picture - width:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <img src="///.jpg" alt=" " > </body> </html>
Width is an optional but useful attribute. Through width, you tell the browser how wide the photo should be displayed. The default unit of measurement is a pixel. Therefore, there is no need to completely write width = "250px" in order to reduce the picture. In HTML, as in graphics programs, percentages are used to indicate sizes, as well as rem or em. The height attribute sets the height. If it is not in the description, the browser sets the value: height = "auto", which is very convenient.
Image Adaptation
The point of adaptation is to make the site look good on all devices. Starting with a three-inch BlackBerry screen, ending with widescreen monitors. But this does not mean that the size of the photo needs to be calculated with a ruler for each device. Then how to reduce the image in HTML so that it looks great on both mobile and laptop computers.
The width attribute will come to the rescue again, only now you set the value to it exclusively in percent:
<img src="///.jpg" alt=" " width="100%">
The browser will understand this entry as an indication to display the photo over the entire width of the screen. After that, you specify the following construction in the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
The viewport tag scales pages, including images, to the screens on which they are viewed. Now we have an adaptive photo on the site that will look great on all devices.
Image block container
You will not always need photos in full screen, in most cases the size will need to be adjusted to the surrounding blocks with text or video. Therefore, train yourself to wrap the img tag in a div container:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="img-wrapper"> <img src="///.jpg" alt=" " width="100%"> </div> </body> </html>
Now, to reduce the image on the site in html, as well as increase it, you only need to specify a width of 100%. The size of the image now completely depends on the container block that you will control in the CSS document. For example, add the effect of increasing the photo when you hover over:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .img-wrapper{ display: block; width: 80%; max-height: 50vh; margin: 0 auto; padding: 0; box-sizing: border-box; overflow: hidden; } img{ transition: all .5s ease; } img:hover{ transform: scale(2); opacity: .7; } </style> </head> <body> <div class="img-wrapper"> <img src="///.jpg" alt=" " width="100%"> </div> </body> </html>
The picture is doubled, but does not go beyond the container block. Now you are completely ready to work with images. The main thing is to use them in moderation. Pictures significantly affect the download speed. Replace them with background gradients or CSS animations if possible.