Interlaced png что это

What does the interlaced option in Photoshop do?

There is this options box shown when saving a PNG image from Adobe Photoshop. I always choose ‘None’.

What does the ‘Interlaced’ option do?

2 Answers 2

Interlaced image loads an early degraded version of the whole image as soon as possible and then progressively renders the image to clear state. Interlaced will almost always be a bit bigger in filesize.

Non-interlaced image will load up in tiles showing clear image in each tile as it progresses to load in the image.

.gif format follows the same idea.

In .jpg format

progressive is the same as interlaced
baseline is the same as not interlaced

GIF Simulation of loading an interlaced png and a non interlaced png using Firefox.

The point of the simulation is to show how these two methods look visually when loading the image and not to compare their load times. Interlaced almost always adds a little to the filesize and therefore loads a little slower. There’s also the perceived speed that is somewhat subjective. In this simulation, I used GPRS speeds (

7KB/s) and interlaced loaded 3 seconds later. Some people might say it looked like the Interlaced was faster. Some might say it’s true, but it looked terrible when the image first started loading in. My personal preference is to not use interlacing.

Оптимизация PNG и JPEG без потери качества. Часть 1

И так, как же происходит оптимизация? Давайте разберемся по порядку, в основном это происходит из-за нескольких причин, и сейчас мы их рассмотрим.

Non-interlaced или Interlaced

Non-interlaced — браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
Interlaced — до полной загрузки файла изображение в браузере отображается в низком разрешении. т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться. Чересстрочное отображение позволяет уменьшить субъективное время загрузки и показать пользователям, что изображение загружается, однако чересстрочное отображение также увеличивает размер файла.

ColorType и BitDepth

Grayscale;
Grayscale + alpha;
Palette (256 цветов);
RGB;
RGB + alpha.

PNG RGB + alpha — 17 853 байт

PNG Palette — 13 446 байт

Разница в размере — 4407 байт (24%), при этом визуально картинки не изменились. Если Вы видите разные изображение, то это оптический обман.

1-bit;
2-bit;
4-bit;
8-bit;
16-bit.

PNG 4-bit — 6 253 байт

PNG 8-bit — 5 921 байт

Разница в размере — 332 байт (5,3%), при этом визуально картинки не изменились. Если Вы видите разные изображение, то это оптический обман.

Обе технологии поддерживают почти все редакторы изображений, которые умеют сохранять в PNG, но об этом знают мало людей, и по этому разработчикам программ-оптимизаторов PNG приходится об этом заботиться.

Chunks

Если кто ~~в танке~~ не в курсе, PNG состоит из Chunks. Писать, что это такое Chunks не буду, можете сами прочитать. Лучше я покажу, для этого есть программа — TweakPNG, возьмите любое изображение формата PNG и откройте через данную программу и увидите всю структуру PNG.

Есть еще программы наподобие TweakPNG, но она лучшая и удобная. Об остальных программах расскажу в заключении.

Critical chunks присутствуют в любом PNG-изображении (IHDR, PLTE для PNG Palette, один и более IDAT и IEND).
Ancillary chunks являются дополнительными chunks, удаление тех или иных chunks позволяет уменьшить размер изображения, но не намного.

Оптимизация палитры

Может быть реализована только в PNG Palette, технология основана на оптимизации chunks PLTE, может уменьшить размер изображения, хотя и не намного. На мой взгляд лучше все это технология реализована в Color Quantizer, один из его алгоритмов был реализован и в TruePNG.

Оптимизация альфа-канала

от автора Color Quantizer; — более продвинутая технология оптимизации и требует большего времени, может увеличить степень сжатия.

Оригинальное изображение. Размер — 214 903 байт.

CryoPNG (параметр -f0). Размер — 107 806 байт.

CryoPNG (параметр -f1). Размер — 105 625 байт.

CryoPNG (параметр -f2). Размер — 107 743 байт.

CryoPNG (параметр -f3). Размер — 114 604 байт.

CryoPNG (параметр -f4). Размер — 109 053 байт.

Недостаток CryoPNG — требуется оптимизация всех пяти изображений для выявления наилучшего результата, а это в свою очередь требует большого количества времени.
TruePNG работает в этом плане аналогично CryoPNG -f0, в свою очередь CryoPNG -f0 является оптимальным с точки зрения оптимизации PNG (как говорится это просто опыт). По моим наблюдениям, CryoPNG -f1 и CryoPNG -f4 намного чаще оптимизируют PNG лучше CryoPNG -f0, по сравению с CryoPNG -f2 и CryoPNG -f3.

Алгоритм сжатия Deflate + Фильтрация строк

Как мы же говорили, PNG состоит из Chunks, в данном случае, нас интересует Chunks — IDAT. Для его сжатия в основном играют два фактора, фильтрация строк и алгоритм сжатия Deflate. Давайте об этом поговорим поподробнее.

Фильтрация строк

None — фильтр отсутствует;
Sub смотрит байт в той же строке;
Up — с тем же номером, что и текущий в предыдущей;
Average берет оба и считает от них среднее арифметическое;
Paeth смотрит байт перед байтом в предыдущей строке, сравнивает разницу и кодирует наименьшую.

; .

Алгоритм сжатия Deflate

На сегодняшний день есть несколько библиотек, основанных на алгоритме сжатия Deflate:

Библиотека Deflate	Скорость работы	Степень сжатия	Программы	Примечание
Zlib	Высокая	Низкая	TruePNG OptiPNG PNGWolf	Благодаря высокой скорости работы может быстро перебрать большое количество значение параметров и выбрать оптимальные.
7-zip	Средняя	Средняя	AdfDef PNGWolf	Не всегда выбранные значения параметров в Zlib являются для них оптимальными (близки к оптимальным). Перебор значений параметров будет занимать большое количество времени и почти всегда затраченное время не оправдывает полученный результат.
Kzip	Низкая	Высокая	PNGOut

PNGWolf использет одновременно и Zlib, и 7-zip.

Важно: все эти программы дополняют друг друга, и они сильны, когда едины. Это самое большая проблема, когда их используют отдельно, а потом сравнивают полученные результаты. В первую очередь надо использовать Zlib, а потом уже 7-zip и/или Kzip.

В следующей части мы поговорим об этих программах поподробнее, а также построим три алгоритма оптимизации PNG (с учетом оптимизации альфа-канала) по степени сжатия и затраченного времени. Ниже приведен условный график зависимости степени сжатия от затраченного времени на оптимизацию Chunks IDAT.

Как видно из графика, чем больше степень сжатия, тем больше времени требуется.

И еще немного.

Итак мы переходим к JPEG, здесь все гораздо проще, и так продолжим. Но перед этим скажу, что JPEG нельзя пересохранить не потеряв качество, даже со степенью качеством 100 (это не максимальное качество, а математический предел оптимизации). Рассмотрим следующий пример (чтобы было честно, изображения были оптимизированы по одному и тому же алгоритму).

Оригинальное изображение — 52 917 байт.

Новое изображение (сохранен через Adobe Photoshop CS5, Save for Web 100) — 53 767 байт

Строим diff-разницу изображений.

Вот так вот сильно изменилась картинки, да, визуально ничего не заметно. Как видно размер картинки увеличился. Это из-за специфики библиотеки, которая создает JPEG, о библиотеках поговорим чуть позже.

Есть только одна программа, которая позволяет пересохранить изображения в JPEG не потеряв качество — BetterJPEG (есть плагин к Adobe Photoshop). Если не ошибаюсь, для жителей стран СНГ для некоммерческого использования программа бесплатная. Лично я использую BetterJPEG, когда нет исходника и требуется незначительное редактирование изображения. Рассмотрим пример работы BetterJPEG.

Оригинальное изображение.

Новое изображение (усложняем ситуацию, добавляем надпись «HTML»).

Строим diff-разницу изображений.

Markers

JPEG в отличие от PNG состоит из маркеров. Рекомендую прочитать статью «Структура файла, маркеры», также рекомендую вообще посмотреть сам сайт. Самая мощная программа по изучению структуры JPEG — JPEGsnoop. Есть еще программы, но о них расскажу в заключении. Для изучения структуры JPEG рекомендую следующее изображение — PhotoME.
Удаления некоторых маркеров (APP0-APP15, COM), может существенно уменьшить размер изображения. Мне больше всего для этого нравится программа — Jhead, наиболее простая и удобная.

Progressive и Optimized

Стандартный. Сейчас почти не используется, аналогичен оптимизированному методу (степень сжатия хуже).
Оптимизированный (Optimized) — создается улучшенный файл JPEG с меньшим размером файла. Браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
Прогрессивный (Progressive) — изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки, т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться. Internet Explorer, включая восьмую версию, не поддерживает прогрессивную загрузку JPEG, он его показывает только после полной загрузки файла, что сильно отличается от поведения «традиционного» JPEG, когда изображение отображается сверху вниз, по мере загрузки.

Библиотека создания JPEG

использует свои собственные библиотеки, их вообще несколько, например, Adobe Photoshop, Save for web — используется для сохранения в WEB. . Использую почти все программы, которые умеют сохранять в JPEG, включая Adobe Fireworks. В библиотеке LibJPEG есть очень интересная программа — JPEGTran (оптимизирует изображение, без потери качества). Имеет смысл применять, если Вы создаете изображения JPEG через Photoshop или Illustrator и оптимизируете через JPEGTran, то получаете максимальный эффект оптимизации, т.к. выходит, что используются две библиотеки. К сожалению, у меня так и не получилось заставить Photoshop сохранять в JPEG, без потери качества.

Сказать какая из двух библиотек оптимизирует лучше, вопрос очень сложный и не однозначный, но из-за очень высокой скорости работы JPEGTran, Вы просто не замечаете его работу, только не забывайте проверять размер изображения, увеличился или нет, Все это можно сделать и через bat. Помните, JPEGTran может переводить JPEG из Progressive в Optimized и наоборот, не изменяя саму картинку.

Заключение

Это конечно все причины, но наиболее существенные. Почти со всеми авторами приведенных программа я общался, и все они очень талантливые люди. Хотел отдельно поблагодарить x128 за огромную помощь в изучении оптимизации изображений.

What does interlaced mean?

Interlaced video is a technique for doubling the perceived frame rate of a video display without consuming extra bandwidth. The interlaced signal contains two fields of a video frame captured consecutively. This enhances motion perception to the viewer, and reduces flicker by taking advantage of the phi phenomenon.

What is interlaced Photoshop?

Interlaced image loads an early degraded version of the whole image as soon as possible and then progressively renders the image to clear state. Interlaced will almost always be a bit bigger in filesize. Non-interlaced image will load up in tiles showing clear image in each tile as it progresses to load in the image. .

Is interlaced better?

Interlacing was the answer. . Interlaced made for a better quality look to television broadcasts. As the half images of interlaced are processed quicker than a progressive capture, there is less time for the subject to move within the capture time and so the movement can be crisper and cleaner.

What is another word for interlaced?

In this page you can discover 24 synonyms, antonyms, idiomatic expressions, and related words for interlace, like: merge, join, alternate, mix, twist, entwine, interweave, knit, twine, weave and intertwine.

What does 60hz interlaced mean?

An interlaced display is a cathode-ray tube ( CRT ) display in which the lines are scanned alternately in two interwoven rasterized lines. . The refresh rate (number of frames scanned per second) varies, but it is normally between 60 and 100 hertz .

Interlaced vs. Progressive Scan — 1080i vs. 1080p

22 related questions found

Is 60Hz good for gaming?

60Hz — For novice gamers

A 60Hz monitor displays up to 60 images per second. A lot of gamers see this as a requirement for gaming. You don’t need an expensive video card to have your monitor produce 60 frames per second in Full HD. That’s why a 60Hz monitor is perfect for novice gamers.

What is interlacing and non interlacing?

In an interlaced monitor, the electron beam takes two passes to form a complete image: it skips every other row on the first pass, and then goes back and fills in the missing rows. A non-interlaced monitor does the whole job in one pass, tracing each row consecutively.

Why is interlaced video used?

Interlaced video (also known as interlaced scan) is a technique for doubling the perceived frame rate of a video display without consuming extra bandwidth. . This effectively doubles the time resolution (also called temporal resolution) as compared to non-interlaced footage (for frame rates equal to field rates).

What entwine means?

transitive verb. : to twine together or around. intransitive verb. : to become twisted or twined. Synonyms Example Sentences Learn More About entwine.

What does interweaved mean?

transitive verb. 1 : to weave together. 2 : to mix or blend together interweaving his own insights …

Is HDMI interlaced?

A High Speed HDMI® Cable is required to transmit a video signal in 1080p. . Interlaced video displays even and odd scan lines as separate fields. The even scan lines are drawn on the screen, then the odd scan lines are drawn on the screen. Two of these even and odd scan line fields make up one video frame.

Should I shoot progressive or interlaced?

Progressive is ideal for higher quality displays for smoother video output. Video broadcasts are traditionally interlaced. Our eyes are not really aware of the transitions that take place in our TV. On standard displays using interlaced scanning it should be fine, but flicker and artifacts are noticeable.

Is interlaced PNG better?

In most cases nowadays, you should not interlace a PNG.

Internet connections are faster with higher bandwidth resulting in quick load times for images. This means there’s no need to load images incrementally (or in multiple passes). In addition, interlaced PNG is slightly bigger in file size than not interlaced.

What is the difference between PNG 24 and 8?

Mostly, the numbers attached to the PNG term refer to the bit level supported by computers. Therefore, PNG 8 supports 8-bit colors while PNG 24 supports 24-bit colors. . As a result, PNG 8 is best utilized in small graphics that do not require much color detail, such as computer icons and simple graphic images.

What does entwined love mean?

adj. 1 of, relating to, imbued with, or characterized by romance. 2 evoking or given to thoughts and feelings of love, esp. idealized or sentimental love.

What things are entwined?

Things that intertwine are twisted or mixed together. You have to intertwine yarn to make a scarf. When things intertwine, they’re all mixed up together — it’s hard to separate them. To make any type of clothing, threads have to be intertwined.

How do you use entwine in a sentence?

1 Honeysuckle will entwine round the stick as it grows. 2 Roses and honeysuckle entwine the little cottage. 3 Facing each other, the giraffes were managing to entwine their necks in the most astonishing manner. 4 All these threads, and more, entwine in the lines of longitude.

How do I know if my footage is interlaced?

6 Answers. You should be able to tell just by looking at it. When you watch for motion and see a comb-like horizontal pattern, the video is interlaced. You could also try pausing the video at several points and looking for this pattern, but not every frame will look interlaced.

Which is better quality 1080i or 1080p?

Generally speaking, you need a TV bigger than 42 inches in order to discern 1080i from 1080p — and that’s also dependent on how far away you’re sitting. Generally, for fast-moving images, 1080p offers superior image quality that prevents the appearance of the screen “tearing” that can occur with 1080i.

What causes interlacing?

The faster the video frame rate, the less time there is between each interlaced field. . Slower video frame rates produce more pronounced interlacing artifacts.

What is interlacing why was it created?

The interlace method was developed for TV broadcasting because the allotted bandwidth for TV channels in the 1940s was not sufficient to transmit 60 full frames per second. It was decided that interlacing with 60 half frames was visually better than 30 non-interlaced full frames.

What is interlacing in PNG?

Interlacing (also known as interleaving) is a method of encoding a bitmap image such that a person who has partially received it sees a degraded copy of the entire image.

PNG image question? [closed]

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 11 years ago .

In a PNG image, what is the difference between interlace vs none? In what case would I want to use ‘interlace’ and in what cased would i want to use ‘none’. How does it differ from a JPG, is the quality better in PNG?

4 Answers 4

Quality

JPEG quality is never «better» than PNG, as PNGs are compressed without loss of any information. If you edit and save a PNG a hundred times, the quality will stay the same.

JPEG images on the other side lose information when you compress them. Editing and saving a JPG file more than once will reduce the quality drastically, to some point where it’s noticeable.

JPEG vs PNG

One uses JPEG for photographs because it compresses them without noticeable quality loss. PNGs can be used for photographs too, but the compression rate will never be as good. PNGs work better for simple graphics and line art. JPEGs however should never be used for this purpose, as ringing artefacts can appear (see image)

Interlacing

Interlacing is introduced so that when a PNG file is transmitted, a lower-resolution preview can be seen, even if the whole image isn’t transferred yet.

Interlace was once used to display a low-resolution version of the image back when modems were really slow. The low-res version would be shown while the high-res one was loading.

No need to use it in these modern times.

JPG is good at compressing photographs. Things with lots of tones and colours.

PNG/GIF is very good at compressing line-art. Things with big blocks of the same colour.

If you use JPG on line art you sometimes see fuzzy distortions around the edges of blocks of colours, which is why you should avoid JPG for artwork.

PNG also allows for images without background which is usefull for web designs

«Interlaced» PNG images have their pixels stored in a complicated order that enables a coarse approximation to the whole image to be displayed when only some of the pixels have been seen. If you’re sending images across a really slow network connection then you might conceivably want to use this feature, though it depends on whatever’s on the receiving end actually being able to take advantage. Otherwise, don’t do it.

PNGs are compressed losslessly: the image displayed is exactly the image that was fed into whatever generated the PNG. JPEGs are compressed lossily: the image displayed will not be identical. For some sorts of image — for instance, most photographs — the effect of the lossy compression is scarcely detectable by eye even when a great deal of compression has been applied. For some other sorts — for instance, text or line art — the effect is likely to be very obvious and very unpleasant. Images where sharp colour/brightness transitions are adjacent to very smooth regions are likely to look very bad when stored as JPEGs.

The Overflow Blog

Hot Network Questions

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Читать:

Как настроить сканер по сети