To resize a picture using HTML tag the attributes width (width) and height (height) are provided. Pixels are used as the value, and the arguments must match the physical dimensions of the picture. For example, in Fig. 10.6 shows an image that has dimensions of 100x111 pixels.

Figure: 10.6. Original size picture

Accordingly, the HTML code for placing this figure is shown in example 10.4.

Example 10.4. Picture dimensions

If the dimensions of the image are specified explicitly, then the browser uses them in order to display the empty area corresponding to the image during the loading of the document (Fig. 10.7). Otherwise, the browser waits until the image is fully loaded, and then changes the width and height of the image (Fig. 10.8). In this case, the text may be reformatted, since initially the size of the picture is not known and it is automatically set small.

Figure: 10.7. Image dimensions are not specified and it has not loaded yet

Figure: 10.8. Image loaded, text reformatted

The width and height of the image can be changed both up and down. However, this does not affect the loading speed of the image, since the file size remains unchanged. Therefore, be careful when reducing the image, because it 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.

In fig. 10.9 shows the same image as shown in fig. 10.6, but doubled in width and height.

Figure: 10.9. View of the picture enlarged in the browser

The code for such a figure will remain essentially unchanged and is shown in Example 10.5.

Example 10.5. Resize a picture

Such resizing is called resampling, and the browser algorithm is inferior in its capabilities to graphic editors. Therefore, it is necessary to enlarge the image in this way only in special cases, otherwise the picture quality deteriorates too much. Better to use a graphics program. The exceptions are pictures containing rectangular areas. In fig. 10.10 shows a pattern file that is 54 bytes and has an original size of 8 by 8 pixels, increased to 150 pixels.

Figure: 10.10. Enlarged image

Browsers use two algorithms for resampling - bicubic (gives smoother edges and smooth tonal range of colors) and nearest points (preserves the original set of colors and sharpness of edges). Recent versions of browsers use the bicubic algorithm, while older browsers, on the contrary, use the nearest point algorithm.

The photo will be resized based on the specified size in centimeters (millimeters, inches), as well as taking into account 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 for vertical (portrait) position:

Standard paper sheet size a4 size - 21x29.7 cm or 2480x3508 pixels at 300 dpi. Sizes of other sheet formats can be seen on the Wikipedia page, but do not forget that the sizes 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 does not change in any way. You will be presented with another processed picture.

Instructions

First, try to find the picture using search engines. Enter your query, and then select the search settings tab. Google, for example, has the Search Tools button, while Yandex has an icon with sliders. Then 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 required size, then it can be adjusted to the frames 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 - you 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 Adobe Photoshop, but you can use other graphics editors.

First way. Click "File" - "New ..." or the key combination Ctrl + N. A window with settings will appear in front of you. Specify the parameters of the width, height and the required color resolution there. Then open the image you like in the browser, right-click and select "Copy picture". Then return to the program and press the combination Ctrl + V.

The picture will appear in the graphics editor window. Then click "Edit" - "Free Transform" or the combination of Ctrl + T. Key points will appear, with the help of which you can adjust the picture 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.

Second way. You must first go to your computer, then click "File" - "Open ..." (or the combination of Ctrl + O) and select the desired image. Then select "Image" - "Image size ..." or press the combination Alt + Ctrl + I. Uncheck the "Maintain aspect ratio" checkbox and select the desired size. Then press the OK key.

Images are part of almost any website, so resizing is essential. You can change the size of the picture in 2 ways: in a graphics editor or programmatically in the html code in css.

If you do not set the size of the image in the css code in html, then its height and width on the site will be the same in pixels as the original file. That is, you can resize the image without css and html, using only a graphic editor and it will automatically resize on the site if you do not specify its size. But there are cases when you need to programmatically resize the image in css to html.

1. Changing the picture in the graphics editor

You can resize the image in any graphics editor (photoshop, gimp, xnview) and it will automatically resize on the site in accordance with the original dimensions.

Advantages of the method:

The picture is loaded faster because you do not need to download unnecessary data (pixels), which will then be compressed programmatically.

Graphic editors do poorly compress images less than 200 pixels in width and height.

Whenever possible and appropriate, try to resize it in a graphics editor, so that the images load faster than with a programmatic change. The difference in speed can be tens of times.

2. Changing the picture in the css code on the site

Pros:

It is faster and more convenient to set the size. This reduction method is usually used for convenience. For example, when one image can have many different sizes, it is often more convenient to change the values \u200b\u200bfor the same programmatically than to upload all the format options of one image, edited in a graphics editor.

Small pictures, less than 200 pixels in height or width, are efficiently compressed, unlike graphic editors. If you want your website to be less than 200 pixels in size, it is better to have the original size larger by 30-50% (260-300 pixels) in order to maintain good quality when downsized.

At the same time, the difference in the speed of loading the site will not be felt, since small images take up very little space and with an increase in their size by 30% you will not notice any changes. But notice the difference in quality.

Images compressed programmatically take longer to load because resizing occurs only after downloading the original version. Therefore, if the size of the picture is more than 200 pixels in width or height, then it is better to compress it in a graphics editor to make the site work faster.

How to resize image in html using css

To resize images in html using css properties are used width (width) and height (height) inside the style attribute. You can write only width or height, and the remaining unspecified value will automatically change while maintaining the aspect ratio of the picture. For example, by specifying only the width of an image using width, its height will automatically change, keeping the aspect ratio. And vice versa, if you specify only the height, its width will also automatically change, keeping the aspect ratio of the picture.

Sample code without specifying image sizes

Result in the browser

Page code

Sample code with image resizing in .css

Result in the browser

Page code

style \u003d "width: 150px;"\u003e

In both examples shown above, the same image is used with a size of 300x184px (width and height). In example 1, the image was displayed in the browser without changes with the original size of 300x184px, since the width and height were not specified in the css. And in example 2, the picture was displayed in the browser reduced by 2 times since the width was set to 150px, the height was automatically changed to 92 px accordingly. As you can see, the height property does not need to be specified at all since it automatically changes proportionally to width.

If you supply both parameters: width (width), height (height) and they will not correspond to the proportions, then the picture will have exactly that size, but in compressed or stretched form, depending on the values.

Why is it undesirable to enlarge pictures

Important: An increase in the size of a picture is accompanied by a loss of quality. When changing in any way, it is important to set the values \u200b\u200bless than in the original image, i.e. only reduce.

If you set the size in pixels larger than the original image, the quality will deteriorate. And the loss of quality will be clearly visible, because the computer cannot add new pixels, it can only increase the size of existing ones. The more the picture is enlarged from the original value, the worse its quality and the more clearly visible square pixels.

Before answering the question “ how to insert a picture into HTML?», It should be noted that it is not worth overloading web pages with a huge amount of graphic material, since this will not only improve the visual perception of the resource by the user, but also increase the page load time.

PNG, GIF and JPEG graphic formats are most often used for creating websites, and for design work with images - the graphics editor Adobe Photoshop, which has rich capabilities for compressing and resizing images without losing quality, which is incredibly important for web development.

How do I insert an image into HTML?

To insert an image into an HTML page, a single simple tag is used:

,

where xxx is the image address. If the picture 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 so happens that the image on the website simply does not load. For such cases, there is the concept of an alternative text.

It is shown in place of the picture when it is unavailable, loaded, or in the "no pictures" browser mode. It is added using the alt attribute of the tag .

An example of adding alternative text to a graphic file:

Sizing images in HTML

In order to change the display dimensions of a graphic 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 page layout, displays the text, and then loads the image itself.

The picture is placed in a rectangle with the specified dimensions, and if the parameters are less or more than the original, 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 size of the picture is constant and does not depend on the user's screen resolution), and in percent (the size of the picture depends on the screen resolution).

For instance:

Remember that the moment you resize the image, you must maintain its aspect ratio.

To do this, it is enough to specify the value of only one of the parameters ( width or height), and the browser will calculate the value of the second automatically.

Image location in HTML

As with many HTML tags, let's 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, the graphic insert can be a link and, when clicked, redirect to any address recorded in full or abbreviated form.

How can I make a picture a background in HTML?

The image can not only be inserted into the page as a visible object, but also made the background. To define an image as a background, it is necessary to write the background \u003d "xxx" attribute in the tag, where xxx is the image address 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 prepared page and write the following lines:

Background with text.

The background picture on the page is set.