метод прогрессивного джипега что это
Что такое Progressive JPEG и для чего нужен этот формат
Знакомимся с прогрессивным форматом изображений. Выясняем, как он работает, почему стоит прямо сейчас сделать изображения на своем сайте прогрессивными и как это реализовать на практике.
Progressive JPEG это…
Progressive JPEG (прогрессивный JPEG) — это формат со специфичным типом декодирования. «Прогрессивный» в этом случае не является синонимом к слову «современный». Речь идет о прогрессии в ее базовом понимании.
В отличие от «обычных» JPEG-файлов, их прогрессивные собратья появляются на страницах сайта моментально, но в плохом качестве. Их качество нарастает постепенно, по мере загрузки сайта, и в итоге доходит до максимума, когда страница полностью прогрузится. Тогда картинка дойдет до оригинального разрешения с полным цветовым диапазоном.
Из-за этого у посетителя страницы возникает ощущение, будто сайт работает быстрее, ведь на экране за одну единицу времени появляется больше контента. И хотя этот контент не очень качественный, для пользователя прогресс загрузки будет более очевидным.
Такой подход к декодированию изображений существует порядка 10 лет, но, несмотря на его очевидную пользу, используется редко. На ранних этапах развития причиной низкой распространенности Progressive JPEG служило отсутствие поддержки среди браузеров. Сейчас же распространению мешают привычки и низкая осведомленность вебмастеров.
Отличия стандартного JPEG от Progressive-версии
Фундаментальная разница кроется в методах подачи информации по ходу загрузки страницы.
Преимущества и недостатки Progressive JPEG
Очевидное преимущество, о котором я уже сказал — скорость появления превью на экране. Человек, заприметив размытое изображение, уже сможет принять решение по поводу того, стоит ли ждать окончания загрузки. Что особенно важно, если он вышел в сеть через мобильный интернет.
Стандартные JPEG в этом случае будут появляться на экране слишком медленно, и из-за этого в верстке могут образовываться «пустые» участки.
У такого подхода есть серьезный недостаток — посетители не знают, когда картинка по итогу загрузится. Со стандартными JPEG все прозрачно – мы четко видим, как изображение кусками прогружается.
А еще о прогрессивных форматах мало кто знает. Поэтому пользователь может заметить размытую картинку и решить, что так быть и должно. Сложится мнение, будто у вас сайт не с каким-либо продвинутым форматом, а просто с некачественными изображениями.
Также Progressive JPEG зачастую занимает меньше пространства на жестком диске (хотя это не касается маленьких изображений – фавиконок или миниатюр, к примеру).
На загрузку прогрессивного формата уходит больше ресурсов компьютера. Алгоритм декодирования изображений по несколько раз проходится по одному и тому же файлу, а из-за этого возрастает нагрузка на процессор и ОЗУ.
Принцип работы Progressive JPEG
Это для тех, кому интересен именно технический аспект.
При декодировании используется алгоритм Discrete Cosine Transform. Он конвертирует каждый блок пикселей 8 на 8 единиц в 64 коэффициента. Первый из них содержит общую информацию об изображении, то есть данные обо всех пикселях, формирующих картинку. Это DC-коэффициент. Еще есть 63 AC-коэффициента, содержащих подробные данные – вертикальные и горизонтальные детали на низких частотах (градиенты) и высоких частотах (более четкие детали).
Далее разберем непосредственное взаимодействие с прогрессивными JPEG-изображениями.
Алгоритм конвертации изображений на сайте
Протестируем ваш ресурс с помощью сервиса WebPageTest, чтобы выяснить, какие изображения поддерживают прогрессивный формат. Затем конвертируем те картинки, которые не попали в список прогрессивных. Скопом выгружаем их на свой сайт, а затем снова проводим тестирование. Для этого:
Другие способы конвертировать JPEG в Progressive JPEG
Первый способ — сохранение через Photoshop. Надо открыть картинку в приложении, затем выбрать меню «Файл». Потом выбрать пункт «Сохранить для веб». В ходе сохранения надо поставить галочку напротив строки «Прогрессивный формат».
Второй — использование конвертеров из стандартного JPEG в прогрессивный. Есть парочка онлайн-сервисов для выполнения этой задачи: JPEG.io и IMGOnline. А еще есть RIOT — офлайн-оптимизатор для Windows с той же функциональностью.
Третий — автоматизация процесса конвертации форматов с помощью плагинов для вашей CMS. Если сайт работает на базе WordPress, то проще всего установить Kraken.io Image Optimizer или его аналог ShotrPixel Optimizer.
Четвертый — можно установить пакет JPEGTran в Linux или macOS. После его установки нужно выполнить команду:
Пятый — использовать ImageMagick, который по умолчанию встроен во все Linux-дистрибутивы. Для его работы надо просто запустить команду:
Используем на сайте стандартный и прогрессивный формат
Выбирать между двумя типами декодирования не всегда обязательно. Скрипт сканирования картинок можно модифицировать, объединив два подхода. Модифицированная версия скрипта будет использовать обе технологии попеременно, достигая наиболее высоких результатов с точки зрения экономии пространства, времени и ресурсов. Вы не получите сразу всех преимуществ Progressive JPEG. Это будет некий баланс между двумя «мирами»: стандартным и прогрессивным.
Из недостатков объединения двух методов можно выделить некорректно отображающиеся первые итерации изображения и небольшую задержку загрузки в сравнении со стандартными JPEG-файлами. Чтобы реализовать именно такой подход, следует воспользоваться декодером MozJPEG при конвертации изображений на компьютере. Но перед этим нужно:
Также для этого можно воспользоваться сервисами компании Cloudinary, помогающими оптимизировать медиаконтент в сети.
На этом все. Теперь вы знаете, что представляет собой прогрессивный формат JPEG и как внедрить его на свой сайт. Возможно, именно вы позитивно повлияете на его популярность в интернете.
Your Custom Text Here
Как работает принцип прогрессивного джипега
Я работаю по принципу, который сформулировал Артемий Лебедев: «В любую секунду любой проект готов на 100%, хотя проработанность может быть и на 4%».
Принцип неочевидный и про него постоянно спрашивают — что это, черт побери, значит и как это применить к моей жизни и работе. Попробую объяснить.
Для себя я расшифровал принцип так: работа сделана в тот момент, когда ты решаешь поставленную задачу простейшим способом. То, насколько ты углубляешься — детализация. Иногда она нужна, иногда нет.
Для меня джипег состоит из трех шагов:
— разобраться что и зачем делаю,
— определить полезное действие, которое поможет добиться результата минимальными затратами,
— детализировать до тех пор, пока не станет достаточно.
В примерах это работает так.
Написать статью: сформулировать тему → тезисно ответить на поставленный вопрос → детализировать примерами и иллюстрациями
Придумать название заведения: понять, каким должно быть название и что отражать → сделать первый подход, накидав варианты → детализировать, углубляясь в тему и перебирать варианты и способы мышления
Убрать квартиру: понять, что сейчас главный источник беспорядка → убрать → детализировать, протирая все подряд
Купить продуктов: понять для чего → взять необходимое в ближайшем → если нужно, детализировать поездкой в гипермаркет
Выпустить подкаст: выбрать тему → поговорить, записывая в телефонный диктофон и публикуя запись сырой → если хочется улучшать: использовать хорошие микрофоны, вырезать экание, добавить музыку на фон
Чтобы пользоваться принципом, важно понимать концепцию полезного действия и слайдера.
Метод прогрессивного джипега что это
Давным-давно я наткнулся на книгу Артемия Лебедева “Ководство”, в которой была глава про так называемый метод прогрессивного джипега. Кто знаком с графическими форматами, знает, что обычный jpeg выдает изображение последовательно, от верхних строчек пикселей к нижним. А прогрессивный выдает все изображение целиком, наращивая его детализацию от 0 до 100%.
Конечно, сейчас со скоростью развития компьютеров и интернет-соединения это уже не так важно, потому что в большинстве случаев изображения уже загружаются моментально. Но это классный принцип, который можно перенести на любой проект вообще и сэкономить при этом уйму времени. Другими словами, вам не обязательно делать проект до конца, чтобы увидеть его целиком и составить представление о его качестве. Главное – наметить контуры, и этого будет достаточно, чтобы понять, куда двигаться дальше. Будете понимать не только вы, но и ваши сотрудники, партнеры, клиенты.
Именно так мы поступаем сейчас при разработке стратегии нашего агентства элитной недвижимости Vesco Realty. У нашей команды есть довольно смутное понимание мелких деталей стратегии, но мы довольно четко видим общее направление. И чем дальше мы движемся, тем четче проявляются те или иные части целого. За этим интересно наблюдать, когда вдруг начинаешь понимать необходимые сроки, ресурсы, взаимосвязи и можешь передать это понимание коллегам. Если бы мы использовали другой принцип, двигаясь в неизвестность шаг за шагом и не видя даже размытой картинки, нам было бы намного труднее включить всех участников в единый процесс.
А вы пробовали применять этот принцип в своей работе? Поделитесь в комментариях к этому посту на моей личной странице в Facebook!
Алексей Аверьянов, Генеральный директор Vesco Group
Метод прогрессивного джипега
Метод прогрессивного джипега
Многие пытаются вылизать каждый пиксел, и только когда проект готов — запускают его. Да и я сам практически до сего времени попадаюсь на эту удочку. Не делайте так. Создайте базу. Если это магазин — то чтобы было удобно и практично покупать, дизайн пусть будет минимальный, но красивый. Зачем вам тонны страниц в личном кабинете? Просто начните продавать скорее. Тем более, если продажи не пойдут, вам повод посидеть подумать, а не винить потом во всех бедах СЕОшника и программиста.
Часто бывает, что пока проект выстреливает, вы сами обрастаете уже скилами, знаниями, житейским опытом. Смотрите на проект внутри и хватаетесь за голову как там ужасно. Выйдите изнутри, посмотрите на проект снаружи. Все работает? Ничего не тормозит? Клиенты-посетители счастливы? Забиваем и идем дальше. Делаем только важное. А уже по ходу дела, если встречаем страшный и ужасный кусок кода, приканчиваем его, переписывая по-быстренькому по-новой. Постепенно код будет реорганизован так как вам надо, без ущерба общему развитию.
Оптимизация кода, запросов
Зачем вам гоняться за страницами, которые отдаются по 0.5 секунд? Убейте тараканов сначала тех, которые отдаются за полторы. Это отдельный принцип, который среди разработчиков кличут методом узкого горлышка.
Подход к проекту (стартапу, магазину, или просто плагину-расширению) описанным методом позволит на ранних порах понять, нужен ли он вам, получаете ли вы достаточно удовольствия/денег за те ресурсы, которые он у вас забирает? Кроме этого, такой подход легко позволит понять интерес рынка, надо ли вообще народу то, что вы делаете.
Естественно, все вышенаписанное не повод валить говнокод в кучу, называть его стартапом и звать посетителей. Обязательно должна быть достигнута та планка, когда пользователю будет и приятно и полезно пользоваться вашим ресурсом или приложением. Поехавшая верстка, может быть, и не помешает сделать ему заказ, но чувство грязи оставит.
hands_and_ideas
hands_and_ideasLifestyle business своими руками
Продолжаем тему планирования. Сегодня уже не «вольные размышления на тему», а по пунктам.
1. Что грядет:
Серия постов, посвященных планированию. Когда мы подняли тему планирования и прочитали комментарии, то подумали: а на фига демагогию разводить и почему бы тогда сразу не сделать цикл постов с практическими заданиями, выполняя которые, можно сразу извлечь для себя конкретную пользу?
4. По какому методу будем работать:
По «методу прогрессивного джипега». :)) Метод ведения работы над чем-то по принципу от общего к частному давно известен и часто применим, но Артемий Лебедев такую схему работы над проектом очень коротко и понятно описал и прикольно назвал, за что ему большое спасибо. 🙂
Метод прогрессивного джипега (ссылка открывается в новом окне).
Суть в том, что в любой момент времени весь проект/бизнес нужно видеть целиком. Степень проработки может быть разной, но общий вид и ключевые пункты надо задавать и видеть сразу. Чтобы было понятно, почему так, сравню планирование бизнеса с рисованием. Вы же когда рисуете, не начинаете с левого верхнего угла, постепенно двигаясь к правому нижнему и заполняя сразу 100% готовым рисунком белый лист? Вы наверняка сначала делаете набросок, который нуждается в дальнейшей проработке, но по которому однако уже сразу видно, что на этом рисунке изображено: человек, животное или букет цветов. Да, этот рисунок еще не доработан, но понять, а что именно там нарисовано, уже можно. И если получившийся набросок соответствует тому, что вы хотите нарисовать, можно прорабатывать дальше:
А теперь самое интересное. 🙂 Предварительно планирование до 100% доводить не будем. На рисунке выше три стадии проработки, и максимум после второй стадии желающим запустить свой проект советую выделить первый этап, конкретизировать (подробно проработать) только его, и переходить к реализации, сделать этот первый шаг.