N
N
nluparev2018-12-22 19:37:44
Layout
nluparev, 2018-12-22 19:37:44

When to use jpg and when png?

For what devices or in what cases should you use png instead of jpg and vice versa? For example, for retina, you should use jpg, or something like that

Answer the question

In order to leave comments, you need to log in

5 answer(s)
R
Rustam Bainazarov, 2018-12-22
@nluparev

Typical use cases:
JPG - photos, illustrations without transparency, where colors, transitions, shades, etc. are important. In this case, JPG outperforms other formats in terms of quality / color / size ratio. So-so for contrasting schemes and texts.
PNG - photos, schemes, graphic elements with transparency, all sorts of elements flying out of the borders, where there are relatively many colors (photos of people, aliens, etc.). With a file size comparable to JPG, PNG contains much fewer colors, and PNG files comparable to JPG in terms of the number of colors will weigh a lot (that's why JPG is used for photos). When it comes to diagrams and texts, PNG is preferable to JPG due to the absence of artifacts on contrasting edges.
gif- animations. Well, that's a different song altogether. APNG and MP4 are predicted to replace him, but things are still there.
SVG - icons, illustrations. Supports transparency, infinitely stretches. Typically, the same SVG icons weigh less than PNGs for the same actual usage size. You can animate (a separate theme and a bunch of features) and control using CSS and JS if you embed inline (you can also use #use, but with restrictions). Probably the most error-sensitive format because it consists of code: a complex SVG file can kill performance. You can very easily sew up malicious code, therefore it is forbidden in the layout of letters.
PS I can't describe all cases, there are unique ones, as the format selection process depends on the content of your image. In each specific atypical case - think for yourself. For example, if a vector illustration weighs a lot, then it makes sense to convert it to JPG or PNG. Sometimes an SVG icon can weigh several times more than its PNG counterpart (with the same actual usage size, for example, 100 by 100 pixels at 1:1 viewport size to the physical screen resolution) - a lot depends on the methods and quality of creating such icons. As @Adamosy rightly pointed out, sometimes the cost of rendering SVG (client-side) doesn't justify its benefits, and you have to use bitmaps. Well, and so on ... There are a lot of features for using formats.
PPS Read about Retina, because there is no "JPG should be used for retina".

L
lukoie, 2018-12-22
@lukoie

if we compare only these two formats, then their difference is in two nuances:
1 support for transparency in png, which jpg cannot
2 image compression method in jpg depends on neighboring pixels. Therefore, if the image has clear lines, jpg will make them fuzzy, and png will keep such transitions.
Therefore, if you just have photos, and / or the task is to save money - use jpg, and if there are technical drawings, or even more transparency - png.

S
Saboteur, 2018-12-23
@saboteur_kiev

Read more on wikipedia about the PNG and JPG compression algorithms to understand their advantages and disadvantages.
On average -
JPG takes less, and PNG is better.
JPG presses everything with one algorithm (but it works faster and weighs less), though artifacts and blurry borders ...
PNG tries to separate photos, diagrams, inscriptions and compress them with minimal artifacts (but it is processed more and weighs more)

M
Margari, 2018-12-27
@Margari

If we are talking about sites, then we still have to monitor the size. SVGs tend to be much better (because they are vector graphics) and weigh less than pngs. In addition, it does not need to be compressed, which has to be done with png and jpg through plugins, programs or services. SVG is mainly used for icons, company logos. It will look good on all devices, especially on Retina. The PNG in these cases is sometimes pixelated up close, so I would recommend using svg where possible. On Macs, the difference is obvious!

D
Daniil Nikitin, 2018-12-27
@daniilnikitin

For video, PNG is better, JPG is striped.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question