Содержание
- Как выбрать идеальный формат изображения?
- 8 хороших и плохих фильтров на примере модных брендов
- 9 способов прокачать креативность
#515. Как выбрать идеальный формат изображения?
How to select the perfect image format
JPEG, PNG, GIF — боже мой! Идеальный формат ищут годами, потому что мало кто понимает, как они работают.
Посмотрим алгоритмы сжатия изображений, чтобы знать — какой формат выбрать.
JPEG
Формат проверен временем. Как же он работает и для чего хорош?
JPEG сжимает изображения квадратами 8*8 пикселей, а затем делает что-то сумасшедшее и математическое. Преобразует пиксели в каждом блоке из RGB в YCbCr. С технической точки зрения, JPEG преобразует информацию из пространственной области в частотную.
Подходит: для сжатия изображений с большим количеством цветов и плавными переходами между ними.
Не подходит: для объектов с чёткими границами на изображении.
GIF
Формат GIF сжимает изображения с помощью алгоритма LZW. Он проще, чем магическая математика в JPEG. Алгоритм LZW сканирует изображение и генерирует короткие коды для повторяющихся частей, а потом сокращает их.
Продвижение медцентров и клиник: три кейса о SEO, TikTok и Instagram*
Как получить измеримые результаты в фарммаркетинге.
Показываем на примерах →
Спецпроект
Ещё у GIF есть пара фич: прозрачность и поддержка анимации, но… Этот формат поддерживает только 256 цветов.
Подходит: для сжатия изображений с повторяющимися данными. Изображения с резкими переходами сохраняются без потерь.
Не подходит: для изображений с большим количеством цветов. Сжатие приводит к пастеризации.
Сильные стороны GIF и JPEG дополняют друг друга — они были убойной командой в эру молодого интернета. Но проблемы с патентом на LZW побудили к созданию новых форматов.
PNG
PNG как GIF, но лучше:
- Нет ограничения на 256 цветов.
- Есть поддержка альфа-канала (для создания частичной прозрачности).
- Подходит практически во всех ситуациях.
Как работает PNG?
- Алгоритм сжатия PNG уменьшает объём данных. Он предполагает, что каждый следующий пиксель похож на предыдущий. Если это подтверждается — сохраняет разницу между предположением и фактическим значением. Маленькие числа занимают меньше места.
- Вырезает повторения с помощью алгоритма LZ77. Да-да, для GIF — LZW, а для PNG — LZ77. Не путаем! Так избегают проблем с патентом.
- Использует алгоритм кодирования Хаффмана. Генерирует короткие коды для распространенных значений.
PNG лучше, чем GIF (почти всегда). Хуже, чем JPEG — для фотографий.
Смело используем PNG для изображений с чёткими фигурами, повторяющимися данными и узорами.
Новое поколение
На момент написания статьи JPEG, GIF и PNG — единственные форматы с универсальной поддержкой. Только их разработчики могут реально использовать. Однако новые форматы уже здесь и достойны внимания.
WEBP
WebP — ответвление видеоформата Google WebM.
WebP использует одну из шестнадцати стратегий предсказания для каждого блока в изображении. Он без потерь сжимает разницу между предсказанным и фактическим значениями.
WEBP лучше, чем PNG или JPEG. Но этот формат поддерживается только в Chrome.
JPEG-XR
Формат следующего поколения, выбор Microsoft — JPEG-XR. Новые методы на основе механики сжатия JPEG. Но предлагает:
- Сжатие без потерь.
- Более эффективное сжатие с потерями.
- Альфа-канал.
Формат поддерживается только в Internet Explorer и Edge.
Вывод: Сжимайте изображения тщательно, интернет не резиновый (или?..)
Вы сэкономили: 10 минут.
#516. 8 хороших и плохих фильтров на примере модных брендов
Eight examples of fashion ecommerce product filters: Good & bad
Фото: fastcodesign.com
Думаете, фильтр на сайте не важен? Ошибаетесь. Неудобный фильтр портит общее впечатление.
Мы покопались в популярных интернет-магазинах и отобрали для вас примеры, которые цепляют — как хорошие, так и плохие.
H&M
Категория «Выбрать коллекцию» фильтрует по темам. Это бессмысленно.
Цель фильтра — сузить выбор продуктов, чтобы указать потребителю направление. И здесь про неё забыли. Не проще ли отфильтровать по «джинсам», чем по «дениму для отдыха»?
Несмотря на это, есть и достоинство — фильтр закреплён на каждой странице. Чтобы улучшить результаты поиска — выбирайте цвет, размер и стиль во время просмотра товаров. Не понравилось — кликайте «Очистить все».
River Island
Непростая фильтрация на сайте River Island. За раз можно отфильтровать только по одному параметру, потом страница перезагружается.
Зато видно количество товаров в каждой категории. Вы заранее знаете, сколько результатов доступно по тому или иному критерию.
Zara
На сайте Zara фильтр вверху страницы — на самом видном месте.
Выбирайте определённые параметры, по которым будете искать. Мы сказали определённые? Кто-нибудь в курсе, как выглядит рубашка цвета «экрю»? Спасибо, Zara, теперь мы знаем.
Недостаток фильтра в том, что кнопка незаметна. Это серьёзная проблема UX. Ещё один минус — нет сортировки результатов.
Ted Baker
Сайт Ted Baker — радует глаз, чего не скажешь о фильтре.
Он предлагает фильтрацию по моделям, цвету, размеру и т.д. Но, как и River Island, позволяет выбрать только один вариант за раз. Это разочаровывает, к тому же, вкладки открываются ооочень медленно.
Удовольствие от поиска товара вам не получить, но креативный контент и потрясающие лукбуки спасают положение.
Hunter
Фильтр на сайте Hunter, как и на Ted Baker, в виде выпадающего списка с отдельными вкладками для каждого варианта фильтрации. Однако тут он проще в использовании.
Прикольная фича — когда вы выбираете что-то из списка, над заголовком появляется галочка. В каждом выпадающем списке своя кнопка сброса.
Marks and Spencer
Отзывы — особенность, которую не всем удается использовать в фильтре. Фильтрация по рейтингам в виде звёзд выручает пользователей, которые ценят мнение других (конечно, если это отзывы реальных покупателей).
Хоть категория не очень заметна — это стоящее дополнение.
Suit Supply
Suit Supply — прекрасный пример креативного подхода к созданию фильтра.
В фильтрации по характеристикам продукта используются визуальные эффекты вместо слов (мы-то с вами знаем, как важна визуализация).
Вы видите типы воротника, узор, цвет и выбираете нужный. Это так просто и эффективно. Мы такого раньше не встречали!
ASOS
У ASOS исчерпывающая система фильтрации. И при огромном количестве параметров он отлично работает.
Много вариантов на выбор с фильтрами в разных категориях — от бренда и стиля до длины рукава. ASOS умело демонстрирует ассортимент и помогает потребителям найти то, что им нравится.
Чему мы можем научиться?
Удобный фильтр улучшает UX и увеличивает продажи. Быстрая фильтрация с приятными визуальными эффектами и выбором нескольких вариантов — мечта пользователя, к которой должны стремиться интернет-магазины.
Вывод: Играя с дизайном и вау-эффектами, не забывайте про юзабилити. Особенно когда от него зависит прибыль — а это почти всегда так
Вы сэкономили: 10 минут.
#517. 9 способов прокачать креативность
9 Ways To Dramatically Improve Your Creativity
Креативность как мышцы. Она должна быть натянутой, вызывающей, а иногда — выталкивающей из зоны комфорта.
Вот девять способов, как повысить креативность.
1. Учитесь и сотрудничайте
Любопытство — прямой путь к креативности. Читайте, говорите с экспертами, и новые идеи появятся сами собой.
Сотрудничайте и учитесь у других. Это даст вам креативного пинка.
2. Занимайтесь любимым делом
Нет идей? Не знаете, что делать? Найдите гармонию в себе.
Альберт Эйнштейн в письме сыну писал: «Делай то, что приносит тебе удовольствие». Помните об этом, когда теряете себя в творческом процессе.
Любовь и творчество взаимосвязаны. Хобби дает творческий импульс, помогает расслабиться и бороться со стрессом.
3. Ищите вдохновение в других сферах
Не копируйте идеи конкурентов. Поищите вдохновение в других отраслях и нишах.
Проанализируйте, какие направления бизнеса сейчас популярны. Почему? Какие компании нравятся вам? Что можно позаимствовать из других отраслей? Возьмите за основу эти идеи и сделайте их лучше.
4. Отвлекитесь или ничего не делайте
Алан Коэн писал, что достоинство есть и в работе, и в отдыхе.
Лучшие идеи приходят, когда вы не напрягаете мозг в попытках придумать великую идею. Это может случиться, когда вы спите. Спокойный сон и отдых поможет вам стать продуктивнее и креативнее.
Идея придет, когда вы моетесь в душе. Или пока вы едете за рулем, сидите в самолете и любуетесь закатом.
Если креативность вас покинула — расслабьтесь и позвольте мозгу делать свою магию.
5. Прогулка
В среднем человек сидит от 7 до 15 часов ежедневно. Звучит кошмарно, да? Это ужасно для здоровья, настроения, и не менее страшно для творчества.
Стэнфордское исследование показало, что ходьба улучшает креативное мышление. В исследовании HBR выяснили — люди, которые проводят встречи на ходу, креативнее.
Многие бизнес-лидеры, например, Марк Цукерберг и Хикмет Эрсек, так проводят встречи.
Прогулки во время работы не решат национальный сидячий кризис, но это шаг в правильном направлении.
6. Задайте правильное настроение
Отсутствие идей или неспособность решить проблему разочаровывают. Если вы не ценитель полного молчания, ваше решение — музыка. Стив Джобс слушал музыку, чтобы поднять настроение и пробудить в себе креативность.
7. Используйте метод «шесть шляп мышления»
Иногда нужно начать с чистого листа. Разбейте проблему на шесть цветных шляп.
Этот процесс помогает взглянуть на вещи по-другому. К примеру — проанализировать факты (белая шляпа), противоречия (черная шляпа), возможности и новые идеи (зеленая шляпа).
Смотрите на проблему с нескольких точек зрения, чтобы найти решение.
8. Обратитесь за советом или обратной связью
Иногда вы слишком близко к проблеме и не видите решение.
Просьба о помощи — не проявление слабости. Спросите совета у друзей, коллег и людей, которым доверяете. У каждого свой опыт и знания. Свежий взгляд со стороны, или даже пять — то, что нужно.
Даже если вы не воспользуетесь советом, это поможет расшевелить мышление и задаст направление.
9. Выберите ужасную идею
Какая самая бредовая идея, которую вы можете придумать? Составьте топ-10 таких.
Задача — напрячь креативность и найти лучшие идеи из того ужаса, который вы нагенерировали.
Может быть, когда вы посмотрите на них, произойдет чудо, и у вас родится мега-крутая идея.
Вывод: Креативность — скил, и его нужно прокачивать. Так что берите ножки в ручки, идите гулять, общаться с интересными людьми и искать гармонию.
Вы сэкономили: 10 минут.
А как вы прокачиваете креативность? Велком в комментарии, нужно больше способов
Читать по теме: Ланч-тайм: краткий перевод свежих статей о Digital (все выпуски)
Источник:
