Each website also contains pictorial material. Be it photos or graphics. They are mostly in formats such as JPG, PNG, BMP,… some also in SVG (more on this later)
The content of the pictorial material is of course arbitrary depending on the theme or purpose and is a matter of free choice. It is different with other parameters, such as resolution, color space, dimensions… there, in order to avoid problems or unnecessary bad will, it is necessary to take into account some of the repairs that I will try to outline in this article.
Resolution
Resolutions or dimensions are measured in pixels (px). This is the number of dots that make up the image. So if I have a screen width of 1980 px, the image with the dimension 1980px in its natural resolution will extend from edge to edge of the screen. Yeah Al that sounds pretty crap to me, Looks like BT aint for me either. Most of the platforms where we design and set up web pages (say wordpress) allow you to choose the size according to the need or intended design. The image can therefore be forcibly enlarged or reduced. With the latter, the image will look OK, while with the first option (magnification) it will probably be more or less “soft” or blurry, because the display exceeds the natural resolution. It is therefore important that we have large enough images available. We can still reduce them.
Thus, for the average screen, it is wise to choose a title image that should go across the entire screen (left-right) at least 1500 px, so as not to lose too much quality. On the other hand, we need smaller dimensions for products in the online store, namely 800-1000 px is a very satisfactory resolution.
Even if web design systems themselves can reduce the image to the appropriate dimension of the final display, we should not overdo the resolution again. Most modern digital cameras or phones have a resolution of at least 4000 px on the longer side, which is far too much for a screen display. A larger image in a web database also means a larger file and therefore requires more space on the server. As a result, it will load on the screen more slowly (more px – more Mb).
Dimensions – aspect ratios
This term does not mean size as such, because we have already dealt with this in the previous paragraph, but it is a ratio of pages that we must pay close attention to. Example: we would like to have a banner on the entrance side, which would be about 1/3 of a page vertically. However, we have an upright photo available. What will happen? The system will do two things: If the image (in px) is too narrow, it will enlarge it and the result will be a blurred image. However, since the above-mentioned image is in inappropriate aspect ratios – the banner is horizontal, the image is vertical – it will make a cutout, which does not necessarily contain what you would like to show. Therefore, it is necessary to crop the image, adjust it, choose it according to our needs and stick to the height-width ratio. Only then will we get the right result.
The same is true for product images in the online store. Most systems allow you to display a square image, which is a kind of compromise, because it can display most products, both tall and wide. And so he circumcises them. Otherwise, you would have a real mess of upright and landscape images in the online store, which would be opaque and ugly. However, since differently placed product images are a fact, little intervention is required here. It is best to crop all product images to this – the square dimension. You can also do this in the wordpress gallery, but the process is a bit clumsy and time consuming. If you have at least a little knowledge and would like a little more control, you can use any photo editing program (photoshop, etc. (). It is important that all images are at the end of the same dimensions. As these examples show:
Improper layout or cut-out of the product image.
If the image is vertical, the program will crop it to a square format and consequently crop it below and above. If the image is horizontal, the program will crop it left and right.
Properly prepared product image.
The program will not crop it and we will get an organized image grid of square images of products in the online store.
Colors
Since the screen only recognizes RGB color space, it is very important that all images are in that color format. “Grayscale” or “CMYK” images will not be displayed, or will be rejected by the online program when we try to upload them to the gallery.
Method or format of the record
Most of the images or photos on web pages are in bitmap format, which means that the dot in the image that indicates a certain color is also a dot on the screen. As we enlarge the image, we get an increasingly blurry image, because the computer, of course, does not know what is between these adjacent dots to make an intermediate dot for better resolution. This applies to all bitmap records such as JPG, PNG, BMP, TIFF,….
Of course, there is also a vector record of some graphics that is useful from a website and is called SVG. But first, let’s explain to those of you who don’t know what a vector notation is. For example, if we want to display, for example, a red square in bitmap format, it means that the computer will have to know the location and color value for each dot. If it is, for example, a square measuring 1000 x 1000 px, this means a million dots, each of which also contains data on color depth (24 bits per dot). This means a wealth of information that a computer must process to make a correct display on the screen. In contrast, a vector notation operates on the basis of a mathematical notation that determines only position, size, and color, and the display is then generated based on these parameters. Of course, the file is much smaller and does not increase in size when enlarging the graphics. However, this notation is only useful for simpler graphics (logos, graphs, icons…). Photography contains so much different information that we cannot present it with mathematical formulas.
Conclusion
It is important to know some of the laws I have described above in order to prepare the pictorial material correctly. This way, the display will be the way we want it, and at the same time we will not load the server too much, because otherwise the page will take too long to load.
