The difference between UI and UX
Today there will be a guest post on the topic of UX and UI interfaces using the Icons8 service as an example. The author is a usability specialist Andrei Burmistrov,…

Continue reading →

Programs used in web-mastering
So what kind of programs do you need? Below I will give specific categories of programs with explanations of why they are needed. Raster graphics processing program one of the…

Continue reading →

How to create a color palette for sites or web interfaces
In Design Mania, there have already been several publications with similar topics: in a note about color matching services for websites, in addition to inspiration resources, we examined a couple…

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.

Creating the perfect landing page (for example, successful sites)
There is nothing more exciting in working on a site than when all the specialists join their own efforts to create a new ideal landing page or the main page…

...

Jpg image optimization
So, the graphics for your pages are ready. But it's too early to upload it to the server, as it has already been said more than once - if the…

...

Online Store Conversion
For any online store, an important indicator of the effectiveness of its work is the level of conversion. The conversion of an online store is a purchase made by visitors,…

...

What are longreads on sites
The so-called longreads are one of the leading web design trends in 2015, and also, as expected, in 2016. With the help of long reads, sites today do not just…

...