Sliders for the site and factors affecting their usability
On commercial sites, especially when it comes to online stores, today you can often find sliders, or so-called “carousels,” - site design elements in which slides with photos or text…

Continue reading →

Why does minimal design rule
If you want to create a website, then the main rule to follow is not to overdo it. This is not the first year that web designers have been helped…

Continue reading →

How to make a menu for a site? The main features of the menu selection
Whatever the site, without which it certainly cannot do, is without a menu. And often on one site there are several menus at once - for the main and additional…

Continue reading →

GIF Image Optimization

Converting a full-color image to an index image (i.e. using a palette) is an important operation, and here a few words need to be said about how this is done with modern graphics packages.

The final image palette can be either fixed or optimized. In the first case, the graphic editor looks at each point in the image and selects the closest color from the palette. This method gives the worst results in terms of fidelity of color reproduction. For example, try to convert a photo of a red rose into an index image using a palette containing shades of green;) This, of course, is an extreme case, but it will give you the opportunity to evaluate the quality of the conversion using a fixed palette. Nevertheless, this method is used mainly to ensure that images look acceptable on monitors with a small number of colors (16, 256). Usually in this case, the so-called the Netscape palette (or safe palette), consisting of a set of commonly used colors and their shades. The Netscape palette ensures that images using this palette are equally displayed by all browsers. To illustrate, look at two images: the left uses the optimized palette, and the right uses the fixed Netscape palette.
Optimized Palette (256 colors) Netscape Fixed Palette (256 colors)
In the second case, when an optimized palette is used, the graphic editor first analyzes the drawing and compiles a list of all the colors used in the image. Further, based on the frequency of appearance of colors, a palette is compiled, which is called optimized. After that, in the usual way, the drawing is viewed, and the color of the pixel changes to the closest one from the palette. This method gives much better results (see the figure above), and it should be used if you have no other reason to use a fixed palette.

When optimizing a specific image, the task is to select the most optimal number of colors in the palette. Here it is appropriate to say about a way to increase the number of colors used in case of their shortage, the so-called dithering (Dithering). For example, we have 16 standard pure colors, and we need the missing orange color. In this case, we can make it of red and yellow dots, placing them in a checkerboard pattern. From a distance, it will seem to our eyes that this is a solid orange color. This is a classic example of dithering; its use in image conversion can give very good results. But from the point of view of optimizing file sizes, the exact opposite happens. Dithering can increase the file size, and quite significantly (it can become larger than before optimization :). And the thing is in the method of storing images in GIF format. The image is compressed by the LZW method before saving to disk, and the main feature of this method is that the areas filled with a uniform color are best suited for compression, and the worst of all are the areas consisting of a set of multi-colored dots. Dithering is precisely based on the fact that it receives the missing colors by “mixing” dots of different colors. Therefore, optimization with dithering should be treated very carefully and, if possible, not used. Below are two pictures: both use a fixed palette, but dithering is applied to the right, and not to the left. Look at how the image has changed, and at the same time pay attention to the file sizes.
The fixed Netscape palette (256 colors) – 3.58KB The fixed Netscape palette (256 colors) + dithering – 4.77KB

Image styling
To reduce the number of colors used in images containing photographic scenes, it is possible to use photo stylization. To do this, you can use techniques such as image tinting and the use of art filters that mimic the drawings. Photos processed this way will compress better and require a palette containing less than 256 colors.

Image Size Distortion
The next optimization method is based on the distortion of the size of the picture. It cannot be applied to ordinary drawings, but it is very well suited for drawings consisting of elements such as lines and homogeneous areas. Suppose we needed a picture that is a black square (Malevich;) with a size of 100×100 pixels. To reduce the file size, we make the so-called single-pixel (i.e. 1×1 pixel) GIF in black. As usual, insert it into the HTML file, but specify the dimensions of the image that we need (100×100). The browser itself will stretch our pixel to the desired size, and we will get big savings :). Similarly, single-pixel GIFs in different colors can be used, but transparent single-pixel GIFs can be most beneficial. With it, it is convenient to set dummies on pages, indentation, fix the minimum width (height) of the table and do other useful things.

Pagination or endless scrolling: what to choose?
When a large data set has to be demonstrated within a single web page, developers or website owners usually have to choose between two main ways of presenting such data:…

...

Pagination or endless scrolling: what to choose?
When a large data set has to be demonstrated within a single web page, developers or website owners usually have to choose between two main ways of presenting such data:…

...

8 Tips for Creating a Hero Image Banner for a Website
Does the user only need 50 milliseconds to form an opinion on any site? Web developers and designers really have very little time to make a good impression on a…

...

Sliders for the site and factors affecting their usability
On commercial sites, especially when it comes to online stores, today you can often find sliders, or so-called “carousels,” - site design elements in which slides with photos or text…

...