Interlacing photoshop что это
В этой статье мы узнаем что такое interlace, deinterlace, telecine, pulldown, ivtc и как всё это вместе нам усложняет жизнь.
Все видео-сигналы можно разделить на две категории: interlaced и progressive.
Interlace, по нашему чересстрочная развёртка, как метод, была придумана Львом Сергеевичем Терменом в 1927 году. Суть её заключается в том, что ТВ кадр состоит из нескольких сотен строк. Строки отображаются на экране не одна за другой, а через одну, таким образом разделяя кадр на два полукадра. Таким образом изображение на телевизоре обновляется со скоростью 50 (PAL) или 60 (NTSC) полукадров в секунду. Поле, которое начинается с нечётной строки называется нечётным или верхним, соответственно, другое, чётным или нижним. Благодаря этому методу мы получаем на экране телевизора изображение хорошего качества без увеличения полосы пропускания (а также проблемы при рипе).
Progressive это видео без чересстрочности. Его мы обсуждать не будем потому, что никаких необходимых преобразований над ним проводить не требуется.
Избавление от чересстрочности называют deinterlace. Делать это надо потому, что на экране компьютера, например, видео с чересстрочностью будет восприниматься как видео с помехами, с такой неприятной взгляду «гребёнкой».
Существует два фактора которые могут нам помешать от неё избавиться.
Во первых, если видео записывается камерой сразу в PAL или NTSC стандартах вещания, то два полукадра идущие друг за другом вместе не представляют собой один кадр. Промежуток между двумя полукадрами составляет 1/50 (PAL) или 1/60(NTSC) секунды. Это означает, что просто так их нам не соединить.
Во вторых, нам будет мешать процедура telecine. Она применяется для преобразования из 24 FPS (стандартное количество кадров в секунду для фильмов снятых на плёнке) в PAL или NTSC. Telecine состоит из двух слов television и cinema. Вообще говоря обычно под telecine подразумевают дублирование некоторых кадров или т.н. pulldown.
- PAL 2:2. Делается он очень просто. Каждый кадр исходного фильма делится на два поля. В результате получается 48 полей в секунду. Затем воспроизведение убыстряется на 4% и мы получаем необходимые 50 полукадров в секунду. Этот метод плох для фильмов в которых важен звук, т.к. после его применения он искажается (становится более высоким). Картинка. Смотреть сверху вниз, слева направо.
- PAL 2:2:2:2:2:2:2:2:2:2:2:3. Применяется к тем видео, где важен звук. Каждый 12-ый кадр длится не два полукадра, а три.
- NTSC 2:3. Наиболее хитрый метод. Делается в два шага. Для начала исходное видео замедляется до 23.976 (24*1000/1001). После этого делают вот так. Картинку смотреть сверху вниз, слева направо.
- NTSC 2:2. Аналогичен PAL 2:2 и применяется в том случае, если FPS источника = 30.
Итоги
Видео бывает изначально чересстрочное и подвергнутое telecine. Также стоит помнить, что помимо описанных методов telecine встречаются разные другие, встречаются битые файлы и вообще много чего встречается. В таких случаях сложно дать однозначный совет, надо применять смекалку. Я надеюсь что все те приёмы и инструменты, о которых пойдёт речь в дальнейшем, вам в этом помогут.
Итак, в первой части мы рассмотрели доводы «за» и «против» экранного сглаживания. Теперь давайте обратимся к практическим примерам и поговорим о некоторых тонкостях подготовки макета для демонстрации заказчику.
Но, прежде чем мы займёмся практикой, я хотел бы снова привлечь внимание читателей к самому факту необходимости сглаживать текст на экране. Кое-какие детали мы обсудим позже, а сейчас просто побродите по сайтам ведущих российских студий. Вы наверняка знаете адреса этих сайтов. Если нет, вы можете найти их здесь в рейтинге компаний.
Уверяю вас, в большинстве случаев вы увидите макеты со сглаженным текстом. Уж зачем-то студии включают у себя антиалиасинг? Так, быть может, попробовать следовать их примеру?
Кстати, в некоторых местах могут всё-таки встретиться и макеты без сглаживания, но в таком случае они почти всегда уменьшены в масштабе (до 50-70% от первоначального размера). Их легко отличить, поскольку макеты с текстом без сглаживания при уменьшении по методу бикубической интерполяции выглядят значительно хуже тех же макетов, где сглаживание было включено. Сравните первый (был без сглаживания) и второй (антиалиасинг включен) образцы (уменьшение до 70%):
И даже если вас не убеждает опыт известных студий, и вы по-прежнему твёрдо убеждены, что HTML-текст должен оставаться без сглаживания, всё равно будет нелишне ознакомиться с некоторыми из приведённых ниже примеров.
Итак, мы решили, что сглаживание шрифтов нам необходимо. Но либо вы, будучи дизайнером-графиком, не очень хорошо разбираетесь в тонкостях вёрстки, либо у вас нет времени и желания заниматься созданием текстовых блоков с помощью HTML-кода, которые потом перекочуют в ваш макет из скриншотов броузера.
Короче говоря, вам нужно делать макет сразу в графическом редакторе. Несмотря на то, что сейчас много хороших редакторов с различными возможностями (GIMP, PhotoImpact, PhotoPaint, Fireworks и т.п.), мы будем рассматривать примеры на основе самого популярного в среде веб-дизайнеров редактора — Adobe Photoshop.
В этой программе отсутствует имитация сглаживания по типу ClearType, и причина этого детальна описана здесь в разделе «Ограничения ClearType». Поэтому потребляем то, что дают.
Работающие с этой программой, знают, что для текста предусмотрено пять видов сглаживания: None (полностью отсутствует), Sharp (резкое), Crisp (жёсткое), Strong (сильное) и Smooth (мягкое):
Применительно к тексту это выглядит следующим образом:
- Режим Strong нам вряд ли может быть полезным, ибо делает текст излишне насыщенным, особенно в жирном начертании. Но в определённых случаях можно использовать и его.
- Режим None мы тоже будем избегать. Достаточно взглянуть на то, как растеризуются буквы «и» и «м» в обычном и жирном начертании. Во всех видах сглаживания эти буквы существенно отличаются толщиной штриха, как и должно быть в реалистичной типографике. При отсутствии сглаживания на всех кеглях буква «и» оказывается практически одинаковой в обычном и жирном начертаниях (лишь становится чуть толще диагональный штрих), да и с «м» не всё в порядке. Если вас устраивает такой вариант, продолжайте выключать антиалиасинг. Однако, если вы предпочитаете ожидать на экране от шрифта адекватного поведения (жирные начертания более насыщенные в штрихах и т.п.) — подберите для себя оптимальный вид сглаживания.
- В режиме Sharp буквы растеризуются несколько отличным способом, нежели чем в трёх других вариантах антиалиасинга. Это заметно на увеличенных фрагментах букв «ш» и «р». В случае Sharp при общей условной толщине штриха в 2 пикселя нижний штрих на «ш» остается однопиксельным, тогда как, например, в Crisp все штрихи стремятся к одинаковой толщине. В режиме Sharp криволинейные участки получаются менее округлыми, что хорошо видно на примере буквы «р». Также в режиме Sharp не очень хорошо смотрится текст, набранный крупными кеглями (14pt и выше). Зато текст 11pt читается более-менее сносно, а мелкий шрифт в 9 пунктов выглядит самым наилучшим образом. Также субъективно кажется, что курсивное начертание на 11pt читается лучше, чем в остальных примерах. В целом текст выглядит ярче и сочнее, чем в других режимах (не считая Strong).
- В режиме Crisp лучше всего выглядят крупные заголовки, да и основной текст неплохо смотрится. Кстати, в этом режиме большинство букв, состоящих лишь из горизонтальных и вертикальных штрихов («г», «п», «т» и т.п.), не сглаживаются вовсе. Правда, мелкий текст и курсив выглядят хуже, чем в случае Sharp.
- Режим Smooth напоминает Crisp, но буквы приобретают больше «пушистости» по краям. Кстати говоря, в ранних версиях Photoshop было лишь два типа сглаживания — None и Smooth. И, возможно, одна из причин нелюбви дизайнеров к сглаженным текстам кроется именно в этом, поскольку буквы в режиме Smooth выглядят чаще всего наиболее размытыми. Лишь в версии 5.5 добавилось ещё два типа антиалиасинга (а Sharp появился ещё позже). Однако, в определённых случаях нам может пригодится и режим Smooth.
Я поместил скриншот этой страницы в Photoshop и постарался максимально точно воспроизвести все текстовые блоки. При должной сноровке это не составит труда. Кстати, настоятельно рекомендую попробовать подобный метод в качестве упражнения. Во-первых, это здорово тренирует ваш зрительный аппарат, и вы научитесь безошибочно определять гарнитуру, кегль и значения интерлиньяжа шрифтов на любых сайтах. Во-вторых, используя скриншоты понравившихся вам сайтов, вы наработаете собственные методы компоновки текстовых блоков, а также накопите полезные наборы шрифтовых сочетаний.
Итак, используя инструмент Type Tool и палитру Character, я сделал несколько текстовых слоёв двух разновидностей: линейных для заголовков (простой щелчок инструментом Type Tool на макете) и блочных для абзацев (щелкнуть и, не отпуская кнопки, выделить прямоугольную область нужного размера для будущего текста).
Наконец, я стёр тексты на слое исходного изображения. При отключении созданных вручную текстовых слоёв это будет выглядеть так:
А теперь посмотрим, что будет при включении различных режимов сглаживания.
Режим Sharp:
Отлично! Практически весь текст хорошо читается, буквы выглядят чёткими, а «пушистость» не бросается в глаза. Однако, заголовки в боковых колонках выглядят чересчур насыщенными и как-то не достаточно округло.
Режим Crisp:
Основной текст стал чуть более замыленным, зато заголовки, набранные жирным начертанием, смотрятся куда лучше.
Режим Strong:
Хотя в этом определённо что-то есть, всё же излишняя насыщенность штрихов снижает уровень реалистичности по сравнению с оригинальным скриншотом и бросается в глаза. Жирные начертания стали выглядеть и вовсе как-то грязно. Зато именно в этом режиме наиболее близко к оригиналу выглядит надпись крупным кеглем (более 18pt в нежирном начертании).
Режим Smooth:
В данном случае текст оказался наименее насыщенным, а потому выглядит блекло и как-то неубедительно. К тому же во многих местах обнаружилась излишняя замыленность. Хотя, кому-то именно этот вариант покажется наиболее приемлемым.
Итак, однозначно оптимального и близкого к оригиналу варианта нет. Но что мешает нам сделать комбинацию из различных методов?
Вот что у меня получилось:
Основной текст — в режиме Sharp. Подзаголовки, набранные жирным шрифтом — в режиме Crisp. А большой заголовок «Лидерство в области технологий» — в режиме Strong.
Конечно, точно воспроизвести вид как в броузере вряд ли удастся. Но, применяя подобную методику, я получил более-менее похожую версию. Сравните оригинал и этот комбинированный вариант. Приглядевшись, вы обнаружите какие-то мелкие несоответствия. Но если смотреть невооружённым глазом, оба макета кажутся идентичными.
А что же с режимом сглаживания None? Давайте включим его:
Стоп. Что случилось с двумя текстовыми блоками? Они странным образом наползают на другие места макета. Увы, но это досадливая особенность шрифта Verdana при растеризации без сглаживания. У других шрифтов подобных проблем не существует, или они не столь значительны. Помните всегда об этом и учитывайте тот факт, что текстовые блоки, создаваемые вами с Verdana без сглаживания, на мониторах с антиалиасингом могут оказаться меньше по высоте, и наоборот.
- Выберите любой видимый текстовый слой в палитре Layers.
- Выполните пункт в меню Select >Select Silimal Layers. Теперь у вас выбраны все без исключения текстовые слои.
- В палитре Character выберите требуемый параметр. Например, смените сглаживание с Sharp на None.
Не правда ли, удобно? Действительно, прежде чем показывать макет клиенту, следует попробовать различные варианты. Например, заменить Verdana на Arial, увеличить кегль (применится ко всем блокам, но вы сможете оценить изменения для какого-то конкретного). Экспериментируя подобным образом, вы сможете составить для себя список шрифтов, размеров и видов растеризации в каждом конкретном случае. Всего за каких-нибудь несколько десятков минут вы определите оптимальные для вас виды отображения различных блоков. Остается только опытным путём установить какие из подходящих способов максимально соответствуют свёрстанным аналогам. Полагайтесь на собственный вкус и интуицию, и ваши макеты могут существенно обогатиться за счёт более гармонично подобранных атрибутов отображения шрифтов.
Предположим, я решил в нашем примере вместо Verdana попробовать использовать какие-то другие варианты. И вот что у меня получилось:
- Крупному заголовку («Лидерство в области технологий») был назначен шрифт Arial и режим сглаживания Smooth (он в данном конкретном случае оказался наилучшим). То же самое я проделал с боковыми подзаголовками.
- Основной текст остался без изменений — Verdana 11pt, Sharp.
- Для списка ссылок был использован Arial Italic 11pt, Sharp.
- Для текста внизу справа была выбрана гарнитура Corbel 11pt, Sharp.
Не берусь утверждать, что от этого макет стал выглядеть лучше или хуже. В некоторой степени изменились ощущения от макета. Я лишь просто показал как довольно простым способом можно регулировать тонкие нюансы в подборе шрифтов.
Реально же улучшения можно увидеть только после использования всех мер в комплексе (доработать отступы, подобрать интерлиньяж и т.п.), но об этом мы поговорим чуть позже.
Таким образом, мы выяснили способы получения сглаженного текста, методы нахождения режимов отображения, максимально приближенных к реальному сглаживанию на сайтах, а также быстрый способ подобрать нужную гарнитуру для того или иного случая. Теперь вы с лёгкостью сможете определить для себя оптимальные сочетания. И в этом вам поможет следующая часть статьи, где мы подробнейшим образом рассмотрим все возможные разновидности для наиболее часто используемых кеглей и составим некую сводную таблицу, которая поможет любому дизайнеру быстро подыскать подходящий вариант.
NB. Хотелось бы снова обратиться к сторонникам отключенного сглаживания, рьяно доказывающим превосходство этого метода. Я, ориентируясь на личный опыт, подразумеваю заказы только с нормальным бюджетом, а не какие-то поточные работы, выполненные за бесценок по меркам ценообразования в IT-индустрии. И априори полагаю, что клиент — персона обеспеченная и продвинутая, так что у него имеется техника адекватного уровня, и никогда — НИКОГДА — не возникает вопросов относительно того, что текст сглажен. Напротив, если он увидит макет с несглаженным текстом, то возникнут неприятные комментарии. Я с такими случаями сталкивался неоднократно, потому для себя вопрос о сглаживании закрыл раз и навсегда. В статьях я предположительно обращаюсь к новичкам и профессионалам, которые способны понять преимущество описанной методики. Если вы с этим не согласны, то мои статьи — не для вас, лучше не читайте продолжения. И ещё относительно дальнейшей работы с верстальщиком. Утверждение о том, что верстальщику обязательно надо показывать, что несглаженный текст надо верстать в HTML, а сглаженный — оставлять графикой, — нелепо и безосновательно. Мне, вероятно повезло, и все верстальщики, с которыми мне довелось работать, люди образованные и разбираются в основах типографики. А потому без всяких вопросов отличают в макете текст, набранный «верданой» от, скажем, шрифта Futuris. Если вы — верстальщик, которому нужно непременно указывать где как верстать, значит вам пора устроить себе повышение квалификации, и научиться различать основные шрифты. Да и к тому же лично в моей практике надписи, выполненные графическими изображениями, почти не встречаются (за исключение логотипа да парочки слоганов в шапке), а толковые верстальщики практически один-в-один переносят в HTML то, что было сделано в Photoshop. Быть может, и вам стоит поискать подобную гармонию во взаимоотношениях дизайнер-верстальщик?
Предлагаю Вашему вниманию обзор посвященный оптимизации изображений формата PNG и JPEG без потери качества. Под «без потери качества» подразумевается, что визуально оригинальные и оптимизированные изображения ни чем не будут отличаться. Я читал на Хабре довольно много статьей посвященных данному вопросу, но скажу, большая часть — полная чушь, в них констатируются факты, а не причины. Данный обзор посвящен людям, которые имеют базовые знания об оптимизации изображений.
И так, как же происходит оптимизация? Давайте разберемся по порядку, в основном это происходит из-за нескольких причин, и сейчас мы их рассмотрим.
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%), при этом визуально картинки не изменились. Если Вы видите разные изображение, то это оптический обман.
PNG 4-bit — 6 253 байт
Разница в размере — 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 |
Важно: все эти программы дополняют друг друга, и они сильны, когда едины. Это самое большая проблема, когда их используют отдельно, а потом сравнивают полученные результаты. В первую очередь надо использовать 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 за огромную помощь в изучении оптимизации изображений.
Это поле параметров отображается при сохранении изображения в формате PNG из Adobe Photoshop. Я всегда выбираю «Нет».
Что делает опция «Чересстрочная»?
Я бы просто добавил (как веб-дизайнер), что PNG были форматом выбора для веб - опция чересстрочной развертки в значительной степени отключена в наши дни, если вы не работаете на аудиторию по модемам удаленного доступа. Первоначально чересстрочная развертка была хорошим вариантом, поскольку она быстро загружала часть изображения, чтобы смягчить пользовательский интерфейс, т.е. долгое ожидание доставки страницы свыше 56К. Это больше не проблема. А на мобильных устройствах вы должны избегать растровых изображений и использовать векторы - которые имеют минимальный размер файла / загрузку в доли секунды / масштабирование более эффективно. И скомпилируйте их как шрифт, если можете - даже лучше.
Чересстрочное изображение загружает раннюю ухудшенную версию всего изображения как можно скорее, а затем постепенно переводит изображение в чистое состояние. Чересстрочная развертка почти всегда будет немного больше в размере файла.
Не чересстрочное изображение будет загружаться в плитки, показывая чистое изображение в каждой плитке, по мере того, как оно будет загружаться в изображение.
- .jpg Формат следует той же идее.
- В .jpg формате
- progressive такой же как interlaced
- baseline такой же как not interlaced
GIF Симуляция загрузки чересстрочного PNG и не чересстрочного PNG с использованием Firefox.
Цель симуляции - показать, как эти два метода выглядят визуально при загрузке изображения, а не сравнивать время их загрузки. Чересстрочная развертка почти всегда добавляет немного к размеру файла и поэтому загружается немного медленнее. Есть также воспринимаемая скорость, которая является несколько субъективной. В этой симуляции я использовал скорости GPRS (~ 7 КБ / с) и чересстрочную загрузку через 3 секунды. Некоторые люди могут сказать, что чересстрочная развертка выглядела быстрее. Некоторые могут сказать, что это правда, но это выглядело ужасно, когда изображение только начало загружаться. Мое личное предпочтение - не использовать чересстрочную развертку.
There is this options box shown when saving a PNG image from Adobe Photoshop. I always choose 'None'.
What does the 'Interlaced' option do?
Would just add (as a web designer) PNG's were the format of choice for web - interlace option is largely mute these days unless you are working for an audience on dial up modems. Originally interlace was a good option as it would load part of the image quickly to soften the user experience i.e. the long wait for page delivery over 56K. This is no longer an issue. And on mobile, you should be avoiding bitmaps and using vectors - which have minimal file size / load in split second/ scale more effectively. And compile them as a font if you can - even better.
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.
- .jpg 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.
Читайте также: