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…

Continue reading →

Servant of two masters
Yes, this is a poor web designer who has to spend a lot of effort to tame and train pages, so that it would be nice to look at them…

Continue reading →

How to register a site?
So, you made the first version of your site and even posted it on the Internet, but after a while you will notice that almost no one visits it, except…

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.

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:…

...

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…

...

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…

...

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…

...