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 →

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…

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 →

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 pages load for a long time, then there is no sense in them. This article is about optimizing JPG images.

This format stores images with a color depth of 24bpp (TrueColor) and uses compression with loss of information. He has not so many optimization methods, more precisely, one thing: to choose the optimal compression ratio.

To implement this optimization, you need a graphics package or utility that allows us to adjust the degree of image compression. Unfortunately, PhotoShop in its basic configuration does not allow us to freely adjust the compression ratio (it offers several fixed values). True, for him you can find modules that are specially connected for this operation. To optimize graphics, it is better to use programs such as PhotoPaint or PaintShopPro. In these programs, it is possible to control the compression ratio either by setting the percentage of losses, or by setting the quality value from 0 to 255.

How to determine the optimal compression ratio?

To do this, you need to save the photo at several values ​​of the compression ratio, and then carefully consider it. The criterion for the loss of quality will be the so-called “trembling contours”, most noticeable in places of contrasting transitions, and the appearance of spots in areas with smooth transitions (see figure). The compression ratio at which distortions are not yet visible, but with an increase in its (coefficient) by one step become noticeable, will be optimal. The file size at this resolution will be minimal and without loss of quality.

If such an operation is carried out with each photograph, then it may take too much time. But there is a way out – all photos can be subdivided into some subtypes (for example: black-and-white photographs, tinted photographs, landscapes, etc.) and choose an optimal coefficient for each subtype. Subsequently, you can simply apply the previously found coefficient to all similar photos. Below are two identical photographs, but only with varying degrees of compression ratio JPG. On the left is a photo recorded in PhotoShop 5.0 with a compression ratio of 3 (not optimized), and the right is optimized using Ulead SmartSaver Pro. Pay attention to the size of the photos: they differ three times (with the same image quality).

Using progressive scan
And another small JPG optimization method is the use of progressive scan. This does not affect the size of the photo, but noticeable when downloading. In the case of recording the image in a standard format, the output to the screen is carried out in horizontal stripes, and until the entire image is loaded, we can not determine its meaning. On the contrary, when recording a file in a progressive format, the image appears immediately as a whole, but in a rough form, and gradually improves. This gives visitors the opportunity to immediately evaluate the photo and decide whether to expect to resume it, which will save a little time when viewing your pages. Below, in the figures, two photographs are presented: the left one is recorded with a standard scan, and the right one is progressive. At the time of loading the pages, look at how these two images are loaded, and everything will become clear to you.

Progressive scan JPG is supported by all browsers, but not every graphics package can write in this format. Therefore, check your programs for the ability to save progressive scan files. The latest versions of PhotoShop and PaintShopPro can do this.

To implement this optimization, you need a graphics package or utility that allows us to adjust the degree of image compression. Unfortunately, PhotoShop in its basic configuration does not allow us to freely adjust the compression ratio (it offers several fixed values). True, for him you can find modules that are specially connected for this operation. To optimize graphics, it is better to use programs such as PhotoPaint or PaintShopPro. In these programs, it is possible to control the compression ratio either by setting the percentage of losses, or by setting the quality value from 0 to 255.

A few words about encodings
Anyone who knows everything about this can skip this article, but I will tell the rest about the causes of various encodings and the problems of web design associated with…

...

Site Conversion: Popular Ways to Increase
No matter how modern or pleasant the site may be, if it does not bring the company the expected benefits, it is a “dead weight”. Usually, the degree of usefulness…

...

Computer hardware configuration
What is described below suggests that you want to make a beautiful and stylish website completely do-it-yourself, i.e. you draw all the graphic elements yourself, write the pages yourself, scan…

...

How does JPEG format work?
The JPEG compression process consists of several steps. In the first step, the image is converted from the RGB color space to the YUV space, based on the brightness and…

...