Instruction
First try to find the picture with search engines. Enter a query, and then select the search settings tab. Google, for example, has a “Search Tools” button, while Yandex has an icon with sliders. After you need to select the item "Size" and specify the exact values. Or, for example, if you need a photo with a good resolution, select "Large".
If there is no picture with the desired size, then it can be adjusted to the frame yourself. There are ways. The first is that you first create a document with the desired size, and then change the picture. The second is the opposite - open the picture and change the size. There is essentially no difference: it all depends on your preferences and goals. Examples will be considered in the program Adobe Photoshop, but you can use other graphic editors as well.
First way. Click "File" - "Create ..." or the key combination Ctrl + N. A window with settings will appear in front of you. Specify the width, height and required color resolution parameters there. Then open the image you like in the browser, click right button mouse and select Copy Image. Then return to the program and press the combination Ctrl + V.
The picture will appear in the graphics editor window. Then click "Editing" - "Free Transform" or the combination Ctrl + T. Key points will appear, with the help of which you can fit the image to the size of the working window. As soon as you get the desired result (by the way, you can go beyond the boundaries of the working area), click "File" - "Save as ..." or the key combination Ctrl + S.
The second way. You need to first go to the computer, then click "File" - "Open ..." (or the combination Ctrl + O) and select the desired image. Then select "Image" - "Image Size ..." or press Alt + Ctrl + I. Uncheck "Keep aspect ratio" and select the desired size. Then press the OK key.
To resize a picture using HTML for a tag attributes width (width) and height (height) are provided. Pixels are used as the value, and the arguments must match the physical dimensions of the image. For example, in fig. 10.6 shows an image that has dimensions of 100x111 pixels.
Rice. 10.6. original size picture
Accordingly, the HTML code for placing this figure is shown in example 10.4.
Example 10.4. Drawing dimensions
If the dimensions of the image are specified explicitly, then the browser uses them to display the empty area corresponding to the image during the loading of the document (Fig. 10.7). Otherwise, the browser waits for the image to fully load before changing the width and height of the image (Figure 10.8). In this case, text reformatting may occur, since initially the size of the picture is not known and it is automatically set to small.
Rice. 10.7. The size of the image is not specified and it has not yet loaded
Rice. 10.8. Image uploaded, text reformatted
The width and height of the image can be changed both up and down. However, this does not affect the download speed of the picture in any way, since the file size remains unchanged. Therefore, reduce the image with caution, because. this may cause confusion among readers, why such a small drawing takes so long to load. But increasing the size leads to the opposite effect - the size of the image is large, but the file is loaded faster relative to the image of the same size.
On fig. 10.9 shows the same image as shown in fig. 10.6, but doubled in width and height.
Rice. 10.9. View of the image enlarged in the browser
The code for such a drawing will remain almost unchanged and is shown in Example 10.5.
Example 10.5. Resizing a picture
Such resizing is called resampling, and the browser algorithm is inferior in its capabilities to graphic editors. Therefore, it is necessary to increase the image in this way only in special cases, otherwise the image quality deteriorates too much. It is better to use some kind of graphics program. The exception is drawings containing rectangular areas. On fig. Figure 10.10 shows a pattern file that takes 54 bytes and has an original size of 8 by 8 pixels, scaled up to 150 pixels.
Rice. 10.10. Enlarged Image
Browsers use two algorithms for resampling - bicubic (gives smooth edges and a smooth tonal range of colors) and closest points (preserves the original set of colors and sharp edges). Latest Versions browsers use a bicubic algorithm, and older browsers, on the contrary, use a nearest point algorithm.
The photo will be resized according to the specified size in centimeters (millimeters, inches), as well as the specified size in DPI, according to paper printing standards. Dimensions in cm, mm and inches can be specified with an accuracy of thousandths, for example, instead of the 15x10 format, you can set 15.201x10.203 cm.
Table with standard photo sizes in a vertical (portrait) position:
| Photo format in centimeters (cm) | Size in millimeters (mm) | Size in pixels (for print 300dpi) |
Aspect Ratio (in landscape orientation) |
| 3x4 (after manual cutting) | 30x40 | 354x472 | 4:3 (1.33) |
| 3.5x4.5 (after manual cutting) | 35x45 | 413x531 | 4:3 (1.33) |
| 9x13 | 89x127 | 1063x1535 | 10:7 (1.43) |
| 10x15 | 102x152 | 1181x1772 | 3:2 (1.5) |
| 13x18 | 127x178 | 1535x2126 | 7:5 (1.4) |
| 15x20(≈A5) | 152x203 | 1772x2362 | 4:3 (1.33) |
| 15x21 | 152x216 | 1772x2480 | 4:3 (1.33) |
| 18x24 | 178x240 | 2126x2835 | 19:14 (1.36) |
| 20x25 | 203x254 | 2362x2953 | 5:4 (1.25) |
| 20x30(≈A4) | 203x305 | 2362x3543 | 3:2 (1.5) |
| 30x40 | 305x406 | 3543x4724 | 4:3 (1.33) |
| 30x45 | 305x457 | 3543x5315 | 3:2 (1.5) |
Standard paper sheet size A4 format- 21x29.7 cm or 2480x3508 pixels at 300 dpi. Dimensions of other sheet formats can be seen on the Wikipedia page, but just do not forget that the dimensions are listed there in millimeters and inches, i.e. in the settings on this page, you need to select the appropriate value.
If you need to resize a photo without taking into account DPI (dots per inch), that is, only respecting the proportions of the specified format, then for this you need to set the "Size in DPI" parameter to "0" in the settings.
The original image is not changed in any way. You will be given another processed picture.
This lesson is a kind of continuation of the previous one, in which we considered, now it's time to deepen your knowledge and look at the CSS properties of the image.
Image dimensions in CSS
Let's see what's new here, I created an img class in which I set the dimensions of the image, width is the width, and height is our height, I indicated the dimensions more than the original ones so that you can clearly see how the image will change.
For clarity, I will give an example where there will be a lot of text, and you will see what indents from the image are in this example we will use the margin property which will give you a chance to evaluate its capabilities.
For clarity, I will give an example where there will be a lot of text, and you will see what indents from the image are in this example, we will use an image without setting indents so that you can clearly see the difference.
In the browser we see the following:
In this example, I made indents from the image thanks to the margin parameter, which gave us indents from all four edges of 20 pixels. Here you can do more tricky manipulation, you can set the indent from a specific edge, for example:
- margin-top - margin from the top side
- margin-right - margin from the right side
- margin-bottom - margin from the bottom side
- margin-left - margin from the left side
Accordingly, here you can adjust everything more finely, or set the indent from just one or two sides without touching the others.
In browser:
We set the frame around the image, thanks to the border parameter, first we set the width of the frame using border-width, we set it in pixels, then the style of the frame, that is, its appearance border-style, there are several values for you to choose:
And the last parameter we will adjust is the color of the border, which is set by the border-color parameter.
In the browser we see:
As you understand, we assigned the background to the body tag thanks to the tag selector, since it occupies the entire document, we can also assign it to other tags. The background parameter made the background a picture for us, the address to which we write in parentheses. You can also manipulate the background, for example:
background: url(proba.png) repeat-x;
The background will repeat only along the X axis, that is, horizontally in one line.
background: url(proba.png) repeat-y;
The background will repeat only along the Y axis, that is, vertically in one line.
background: url(proba.png) no-repeat;
The background will not repeat, but only one image will appear.
background-size: 500px 200px;
it additional parameter A that sets the image's background size, width, and height.
Image transparency with CSS
In the browser we see the following:
This property came with the advent of CSS3 and actually received quite extensive use. Implemented using the opacity parameter sets the transparency of the image, values from 0 to 1, and the second filter parameter: alpha(Opacity=50); does the same for Internet browser Explorier because older versions do not support the opacity parameter, values from 0 to 100. In the example, I specially made two images so that you can clearly see the difference.
This concludes the CSS Image Properties lesson, I hope this lesson was useful to you and inspired you to further study the language and gain new knowledge.
Publication date: 2014-04-22
Before answering the question how to insert image in html?”, it should be noted that reloading web pages huge amount graphic material is not worth it, since this will not only improve the visual perception of the resource by the user, but also increase the page load time.
When creating websites, graphics are most often used. PNG formats, GIF and JPEG , and for design work with images - graphics editor Adobe Photoshop, which has rich options for compressing and resizing images without losing quality, which is incredibly important for web development.
How to insert an image in HTML?
To insert an image into an HTML page, a single simple tag is used:
,
where xxx is the address of the image. In the event that the image is in the same directory as the page, the tag will look like this:
However, high-speed and stable Internet has not yet reached all corners of the globe, and it happens that the image on the website simply does not load. For such cases, there is the concept of alternative text.
It is shown in place of the picture at the time of its unavailability, loading, or in the “no pictures” mode of the browser. It is added using the alt attribute of the tag. .
An example of adding alternative text to a graphic file:
Assigning Image Sizes in HTML
To change the display dimensions of an image file, use the height and width tags, where height is the height and width is the width, measured in pixels.
When using these attributes, the browser first allocates space for graphic content, prepares the general layout of the page, displays the text, and then loads the image itself.
The picture is placed in a rectangle with specified dimensions, and if the parameters are smaller or larger than the original ones, the picture is stretched or compressed.
If the height and width attributes are not used, the browser loads the image immediately, delaying the display of text and other page elements.
These parameters can be specified both in pixels (the image size is constant and does not depend on the user's screen resolution) or in percentages (the image size depends on the screen resolution).
For example:
It should be remembered that at the moment when you change the original size of the image, it is necessary to maintain its proportions.
To do this, it is enough to specify the value of only one of the parameters ( width or height), and the value of the second browser will calculate automatically.
Image location in HTML
As with many HTML tags, to apply the align attribute, which aligns the image:
- the picture is located above the text;
- the picture is located below the text;
- the picture is located to the left of the text;
- the picture is located to the right of the text.
Link picture
This is done as follows:
As you can see graphic insert can be a link and when clicked, redirect to any address written in full or abbreviated form.
How can I make an image a background in HTML?
An image can not only be inserted into a page as a visible object, but also made a background image. To define an image as a background, you need to add the background=”xxx” attribute to the tag, where xxx is the address of the image, specified in the same way as in the examples above.
For example, let's set the following texture image as a background image:
Save the image in the folder with the page prepared in advance and write the following lines:
Background with text.
The background image on the page is set.