Modification of images for the site, or what are thumbnails
Surely each of you made a site where the administrator, or even users, can upload images that should be displayed on the site. Such images can be divided conditionally into 2 groups: those that are inserted into the body of articles, for example, with the help of a wysiwyg editor, and those that are downloaded into a separate field and then displayed at a predetermined location. The second includes all sorts of pictures to the news, photos in photo galleries, some partner logos and so on.
Both require some processing after placement, but each group has its own characteristics.
The first group of images (inserted through wysiwyg) is difficult to find, because the images have to get out of the soup tags. But such images often require fairly simple processing, proportional resizing. It is because of the complexity of finding and ease of processing, most often they are not automatically processed, but left to the site administrators. Those, depending on their literacy and laziness, change sizes before posting on the site or not. But sometimes administrators of even the most neat sites do not bother about this, which is why the images load awfully long and, depending on the browser, either look lousy or slow down when drawing. Of course, screenshots are not the worst option. Often on different sites you can find photos from cameras, with a resolution of 3000 pixels and above.
')
I will tell you a secret, my nex colleague is working on solving this problem with the help of the not-unknown jevix project. I think he will soon publish an article on this topic.
The second group of images is distinguished by the simplicity of obtaining images for processing and the complexity of the processing itself. Often, for one photo you need to create several images of different size and different quality, the so-called thumbnails. Honestly, I am simply surprised by the huge number of libraries and ways to create thumbnails, which have only 2 parameters in their arsenal - the width and height of the desired image, and, sometimes, a logical variable, meaning whether to keep the proportions. Meanwhile, there are a lot of different ways to crop an image. Nevertheless, in my opinion, they are perfectly amenable to classification and algorithmization. This is what I would like to devote most of the topic.
So, there are uploaded images and there are different places where they should be displayed. Let's start with a simple one - a separate window, or a lightbox. It is necessary to preserve the aspect ratio and somehow limit the size of the image so that the user does not have to wait long for the download. Say 1024 × 768 pixels, which is enough for photos on the site.
It is with this simple task that most libraries are usually designed to cope with creating thumbnails (although images of this size are not called thumbnails, technically there is no difference, we need to adjust the image size according to some rules).
Some libraries additionally allow you to specify a flag, indicating that you do not need to respect the proportions. The result is:
Honestly, I have never had to meet with cases where such a method of scaling would be appropriate.
With large pictures sorted out. As with the little ones, which are the real thumbnails. Very often such thumbnails are arranged in one list and a requirement is added to them - they must have a strictly specified size. But it is still impossible to distort the proportions. What to do? Adds paddings - monophonic, in the case of a monophonic background under thumbnails, or transparent (although this is not the best option).
But it happens that such paddings look a bit out of place. But if the image were stretched to the larger side, and all the excess was cut off, it would be the very thing.
It may seem that cropping images are not very humane. But in fact, this is only for posters and logos. And if you crop the photos, often nothing important is lost. But when cropping photos there is another feature - the faces of people most often are in the upper part of the image. This is another rule that is applied when cropping a photo - you need to cut it from above a little less than from below.
Ideally, the position of the original image on the resulting image should be adjusted. It may turn out that only the lower one is important, or only the upper part (relevant, let's say, for letters).
Sometimes a picture needs to be cut out in a way directly opposite to the first one. Instead of making the image no larger than the specified size, you need to make it no less than the specified size. And all that stands for the edges of the resulting rectangle is not necessary to cut.
Sometimes you need a certain size on one of the coordinates, and the size of another coordinate can be arbitrary.
For example, an image for an article that should occupy exactly half the column width. Another example is the shots of their film, which go scarcely and all should have the same height.
And recently, I faced this problem:
Injected logos should be placed in one line of a fixed height. If you specify a size of 150 × 70 and strict adherence to dimensions with padding, then logos with a small width (the first one in the figure) will occupy all 150 pixels wide. And if you just make a fixed height, then very low and wide logos (second and third) will take too much space in width. The decision came in a slight change in my classification, namely, I realized that the width and height can be independently strict or not. Those. in this case, the algorithm was this - a thumbnail 150 × 70 pixels in size with strict observance of height, but not width.
As you understand, all these theoretical calculations, without practice, are not worth a penny. But, unfortunately, there will be no code today. Mostly due to the fact that there are several implementations and they are for different platforms (PHP and Django) and you need to put them in order a bit. I think that when I bring the version for Django to shine, I will make a separate post about it, because there will be many more buns, and I’ll just mention the version for PHP.
Instead, I want to give a list of simple flags and parameters, which in 90% of cases save from writing a separate function for each thumbnail.
size - an array of 2 numbers, width and height. Any value (but not both) can be 0 (or NULL), which means that this size should not be taken into account.
method - the method of calculating the size. Either "not more than a specified size", or "not less than a specified size", or "exactly the specified size".
enlarge - logical value, enlarge small images. Not everyone likes, the code picture 100 × 100 stretch to 1024 × 768
strict size - an array of 2 logical values. Indicates strict size correspondence in the resulting image for each dimension.
align - an array of 2 digits. Means the displacement of the original image in the resultant in percent separately for each measurement. As for cases when the resulting image is larger, and when less.
back color - the color with which the paddings will be filled.
Both require some processing after placement, but each group has its own characteristics.
The first group of images (inserted through wysiwyg) is difficult to find, because the images have to get out of the soup tags. But such images often require fairly simple processing, proportional resizing. It is because of the complexity of finding and ease of processing, most often they are not automatically processed, but left to the site administrators. Those, depending on their literacy and laziness, change sizes before posting on the site or not. But sometimes administrators of even the most neat sites do not bother about this, which is why the images load awfully long and, depending on the browser, either look lousy or slow down when drawing. Of course, screenshots are not the worst option. Often on different sites you can find photos from cameras, with a resolution of 3000 pixels and above.
')
I will tell you a secret, my nex colleague is working on solving this problem with the help of the not-unknown jevix project. I think he will soon publish an article on this topic.
The second group of images is distinguished by the simplicity of obtaining images for processing and the complexity of the processing itself. Often, for one photo you need to create several images of different size and different quality, the so-called thumbnails. Honestly, I am simply surprised by the huge number of libraries and ways to create thumbnails, which have only 2 parameters in their arsenal - the width and height of the desired image, and, sometimes, a logical variable, meaning whether to keep the proportions. Meanwhile, there are a lot of different ways to crop an image. Nevertheless, in my opinion, they are perfectly amenable to classification and algorithmization. This is what I would like to devote most of the topic.
Theory
So, there are uploaded images and there are different places where they should be displayed. Let's start with a simple one - a separate window, or a lightbox. It is necessary to preserve the aspect ratio and somehow limit the size of the image so that the user does not have to wait long for the download. Say 1024 × 768 pixels, which is enough for photos on the site.
It is with this simple task that most libraries are usually designed to cope with creating thumbnails (although images of this size are not called thumbnails, technically there is no difference, we need to adjust the image size according to some rules).
Some libraries additionally allow you to specify a flag, indicating that you do not need to respect the proportions. The result is:
Honestly, I have never had to meet with cases where such a method of scaling would be appropriate.
With large pictures sorted out. As with the little ones, which are the real thumbnails. Very often such thumbnails are arranged in one list and a requirement is added to them - they must have a strictly specified size. But it is still impossible to distort the proportions. What to do? Adds paddings - monophonic, in the case of a monophonic background under thumbnails, or transparent (although this is not the best option).
But it happens that such paddings look a bit out of place. But if the image were stretched to the larger side, and all the excess was cut off, it would be the very thing.
It may seem that cropping images are not very humane. But in fact, this is only for posters and logos. And if you crop the photos, often nothing important is lost. But when cropping photos there is another feature - the faces of people most often are in the upper part of the image. This is another rule that is applied when cropping a photo - you need to cut it from above a little less than from below.
Ideally, the position of the original image on the resulting image should be adjusted. It may turn out that only the lower one is important, or only the upper part (relevant, let's say, for letters).
Sometimes a picture needs to be cut out in a way directly opposite to the first one. Instead of making the image no larger than the specified size, you need to make it no less than the specified size. And all that stands for the edges of the resulting rectangle is not necessary to cut.
Sometimes you need a certain size on one of the coordinates, and the size of another coordinate can be arbitrary.
For example, an image for an article that should occupy exactly half the column width. Another example is the shots of their film, which go scarcely and all should have the same height.
And recently, I faced this problem:
Injected logos should be placed in one line of a fixed height. If you specify a size of 150 × 70 and strict adherence to dimensions with padding, then logos with a small width (the first one in the figure) will occupy all 150 pixels wide. And if you just make a fixed height, then very low and wide logos (second and third) will take too much space in width. The decision came in a slight change in my classification, namely, I realized that the width and height can be independently strict or not. Those. in this case, the algorithm was this - a thumbnail 150 × 70 pixels in size with strict observance of height, but not width.
Practice
As you understand, all these theoretical calculations, without practice, are not worth a penny. But, unfortunately, there will be no code today. Mostly due to the fact that there are several implementations and they are for different platforms (PHP and Django) and you need to put them in order a bit. I think that when I bring the version for Django to shine, I will make a separate post about it, because there will be many more buns, and I’ll just mention the version for PHP.
Instead, I want to give a list of simple flags and parameters, which in 90% of cases save from writing a separate function for each thumbnail.
size - an array of 2 numbers, width and height. Any value (but not both) can be 0 (or NULL), which means that this size should not be taken into account.
method - the method of calculating the size. Either "not more than a specified size", or "not less than a specified size", or "exactly the specified size".
enlarge - logical value, enlarge small images. Not everyone likes, the code picture 100 × 100 stretch to 1024 × 768
strict size - an array of 2 logical values. Indicates strict size correspondence in the resulting image for each dimension.
align - an array of 2 digits. Means the displacement of the original image in the resultant in percent separately for each measurement. As for cases when the resulting image is larger, and when less.
back color - the color with which the paddings will be filled.
Source: https://habr.com/ru/post/92237/
All Articles