The optimal use of images requires recalculating the height and width of the original for correct insertion into the site design. Typically, the image is entered by the visitor, the manager of the online store, an employee of the company, etc. The input of information and images is determined by the purpose of the web resource.
In all cases, you need to fit the actual image to the place that is allocated to it on the web resource page.
HTML tag for displaying drawings
To display a picture in the browser, the img tag is used. The developer indicates in this HTML tag the size of the image, the width of the frame, and the actual address of the file containing the image. The img tag does not have the ability to specify image positioning. You can only specify the actual size or resizing.
This example shows the real image in real size at the location of the img tag, a reduced image by 50% in height and width, and a distorted version when only the height indication was changed.
A practical way to resize an image in HTML, as well as its actual position, is to use CSS.
Here, the img tag contains an indication of the source of the image, and its dimensions and position are described in the CSS stylesheet. It should be noted that, as in the case of img, resizing in the stylesheet proportionally affects the size of the image.
Image Sizing Place
There are two options for how and where you can recalculate the height and width of the picture. The server version (e.g. PHP) is static, the browser version (JavaScript) is dynamic.
The use of the server language occurs when processing large amounts of data and is focused on the formation of databases, for example, on the assortment of goods in the online store.
By uploading drawings of goods to the store, the manager may not have to worry about how this or that product will look. The developer of a web resource (online store) can develop an algorithm to automatically determine the required sizes for any product: the refrigerator and the swimming cap will be displayed equally well.
JavaScript features are usually used not to recalculate the height and width of images, but to increase the comfort of the visitor. For example, the developer can assign an event to a tag containing an image of the product, and moving the mouse on it will show the product in an enlarged form.
Image loading is not needed here, but if a small image was used, then enlarging the image will lead to blurred outlines.
The practice of using JavaScript to resize images in HTML is popular. It is especially important not only to enlarge the image, but also to show its parts in a separate window (tag). For this, two images of the same product are usually used: one is the main, the other is detailed.
Other image presentation options
The direct use of the img tag is in demand in everyday practice, but not for images in context: product in a store, employee photo on a personnel sheet, screen of the site development process, link to a presentation or portfolio.
Ideally apply the img tag for small pictures - pictograms. This is convenient, practical and does not require the use of a CSS table to describe this tag.
It is more convenient to use HTML and image sizes in a div or span.
In this example, the div tag with the scLine identifier contains an image that is positioned using CSS. HTML image sizes are set by CSS rules. Inside this diva there is an img tag, which can also be easily positioned, and it can also be set to the desired size.
The main feature of this solution is that the HTML div tag and the size of the background image can form an auxiliary design for img application. The img description style may remain unchanged, but the style of the external tag may change. The developer can formulate many interesting solutions and create a comfortable display of graphical information.
Using CMS and manual development
Just use HTML. Image size, position and transparency are easy to change. Just hook up a JavaScript handler for events and give the image dynamics.
When using site management systems, some features are difficult to use. Each CMS “considers it its duty” to impose its doctrine of the presentation of images and their dynamics when viewed by a site visitor.
Nevertheless, each CMS provides an opportunity for the developer to complement both the PHP code and the JavaScript functionality. You can use this opportunity to give your sites a unique look compared to similar products made on similar CMS.
The face of a web resource always matters, especially when it is executed not in the manual development mode (which is always unique), but based on the well-known site management system.