Картинки 1590 400 формат jpg gif или png: Размеры фото для социальных сетей – шпаргалка по форматам изображений

ПРОТИВ

Ограниченная поддержка почтовых клиентов Устройства iOS и Apple Mail предлагают хороший уровень поддержки SVG, но его не хватает в Gmail, Outlook и международных клиентах веб-почты. Если большинство ваших подписчиков открывают ваши электронные письма в Apple Mail или на устройстве iOS, вы можете начать экспериментировать с SVG. Узнайте больше о SVG в электронной почте, включая обзор поддержки SVG в почтовых клиентах, а также основы использования SVG в электронной почте от Анны Йеман из StyleCampaign.

КАКОЙ ФОРМАТ ЛУЧШЕ?

К сожалению, правильного ответа нет. Вам необходимо определить, какой формат файла наиболее подходит для содержимого этого изображения. Если вы хотите включить анимацию, формат GIF — очевидный выбор. Нужно, чтобы ваши фотографии сохраняли детализацию и цвет? Идите с JPEG. Кратко:

Формат файла JPEG

• Отлично подходит для изображений, когда вам нужно сохранить небольшой размер
• Хороший вариант для фотографий
• Не подходит для логотипов, штриховых рисунков и широких областей плоского цвета

Формат файла GIF

• Отлично подходит для анимированных эффектов
• Хороший вариант для картинок, плоской графики и изображений с минимальным количеством цветов и четкими линиями
• Хороший вариант для простых логотипов с блоками цветов

PNG

• Lossless
• Отличный выбор, когда требуется прозрачность
• Хороший вариант для логотипов и штриховой графики
• Поддерживается не везде

SVG

• Отличный вариант для высококачественных изображений при небольшом размере файла
• Поддержка ограничена почтовыми клиентами на iOS (за некоторыми исключениями)

Лучшим инструментом для определения того, какой формат изображения выглядит лучше всего, являются ваши глаза и Litmus, конечно! Предварительный просмотр того, как ваши электронные письма (и изображения) отображаются в десятках популярных почтовых клиентов, с помощью Litmus Email Previews.

ДОПОЛНИТЕЛЬНЫЕ РЕСУРСЫ

• «GIF, PNG, JPG — какой использовать?» — Сайтпойнт.
• Прекрасные примеры файлов GIF, JPEG и PNG от Crispen.org.
• «Различные форматы изображений и когда их использовать» — 1stwebdesigner.
• «Форматы графических файлов» — Руководство по веб-стилю.
• «GIF, JPG и PNG — в чем разница?» — Сайтпойнт.
• «Основы SVG в электронной почте» — StyleCampaign.

Электронный маркетинг стал лучше

Сравнение лучших форматов изображений для веб-сайтов

Оптимизация изображений начинается с выбора наилучшего формата файла для ваших нужд. Это выходит за рамки PNG и JPEG. Не существует одного формата файла, чтобы управлять ими всеми.

Потребности в изображениях у всех разные, даже у разных изображений на одном сайте разные требования. Но не беспокойтесь, мы вас прикрыли.

В этом посте я научу вас, как выбрать лучший формат изображения для вашего сайта WordPress. Мы рассмотрим старые фавориты, JPEG, PNG и GIF, а также некоторые из следующего поколения, такие как WebP и SVG. Мы расскажем об их сильных и слабых сторонах и идеальных вариантах использования, чтобы вы могли оптимизировать свои изображения как профессионал. Я также подготовил загружаемый PDF-шпаргалку, чтобы вы могли сослаться на нее! Нажмите здесь, чтобы получить копию

Продолжайте читать или воспользуйтесь приведенными ниже ссылками, чтобы перейти к определенному разделу.

• Размер влияет на скорость, а скорость имеет значение
  • Выбор оптимального размера файла
• Как сжимать изображения: с потерями и без потерь
• JPEG
  • Сжатие JPEG
• JPG против PNG
  • ПНГ
  • Три вида PNG
• WebPs
• История двух графических изображений
• SVG
  • В SVG или не в SVG?
• гифки
• Оптимальный размер файла — минимально возможный

Размер влияет на скорость, а скорость имеет значение

Почему так важен выбор правильного формата файла? Потому что все больше и больше посетителей посещают сайты с мобильных устройств. Мало того, что скорость сети относительно ниже по сравнению с выделенными сетями, но не у всех есть неограниченные данные.

А поскольку Google наказывает страницы, которые загружаются слишком медленно, показывая их ниже в результатах поиска, сокращение времени загрузки — это простой способ увеличить трафик, продажи и конверсию.

Если вы выберете неправильный формат изображения, вы можете непреднамеренно отдать изображение большего размера, чем необходимо. Дополнительные возможности файла изображения (например, прозрачность), ненужные детали и слишком много цветов — все это делает ваши изображения раздутыми. Иногда это необходимо, а иногда нет. Например, если ваше изображение не имеет прозрачности, то вы действительно ничего не потеряете, если выберете тип изображения, который не поддерживает прозрачность.

Главное добавлять только то, что вам нужно.

Выбор оптимального размера файла

Чтобы выбрать оптимальный размер файла, необходимо учитывать соотношение изображения и остальной части веб-страницы. Средняя веб-страница в настоящее время составляет около 2 МБ, поэтому вы хотите оставаться ниже этого предела, чтобы иметь относительно быстрый сайт. Это означает, что вы должны смотреть на все активы на вашем сайте, а не только на изображения.

Большое подробное главное изображение размером 1 МБ не будет иметь большого значения, если это единственное изображение на странице, состоящее в основном из текста; однако, если вы собираетесь отображать 10 больших изображений на странице размером 1 МБ, загрузка будет утомительной. Вы можете пойти на компромисс, отображая меньше изображений или показывая их все в меньшем размере.

Как сжимать изображения: сжатие с потерями и без потерь

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

При сжатии с потерями часть ваших данных будет потеряна навсегда. Сжатие изображений с потерями безвозвратно удаляет данные изображения и ухудшает качество изображения в процессе.

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

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

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

Полное руководство по оптимизации изображений для WordPress

JPEG

JPEG расшифровывается как Joint Photographic Experts Group и был разработан для использования в фотографиях. Поскольку это стандартный формат файлов для большинства бытовых цифровых камер и сотовых телефонов, вы найдете его практически везде.

JPEG-файлы имеют несколько преимуществ:

1. JPEG-файлы могут содержать миллионы цветов, поэтому они создают насыщенные и яркие изображения
2. Они создают относительно небольшой размер файла даже при таком большом количестве цветов
3. Они поддерживаются во всех современных браузерах.

Неудивительно, что JPEG так популярен в Интернете.

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

Сжатие JPEG

В файлах JPEG используется сжатие с потерями для уменьшения размера файла.

Сжатие JPEG не является настройкой «все или ничего». ВЫ можете настроить степень сжатия от 0% (сильное сжатие) до 100% (без сжатия), чтобы создать идеальный баланс для вашей ситуации.

Как правило, сжатие изображения в диапазоне от 75 до 100 % сохраняет целостность и высокое качество изображения, однако при 75 % размер изображения становится вдвое меньше. Половина! Вот почему большинство социальных сетей сжимают свои изображения в диапазоне 70-85%. Facebook, например, сжимает ваши изображения на 85%.

Поэтому, когда вы готовите изображения в Adobe Photoshop или Lightroom, не бойтесь передвигать ползунок.

Вы только посмотрите на эти два изображения. Один не был сжат и имеет размер 229 КБ, а другой был сжат на 75% и имеет размер 95 КБ.

Можете ли вы сказать, какой из них какой?

Существует формат JPEG без потерь, называемый JPEG-2000, но он не получил широкого распространения.

Также всегда следует избегать повторного сжатия сжатого изображения. Вы когда-нибудь делали копию ксерокопии или загружали и повторно загружали изображение в социальные сети? Качество искажается, потому что вы проходите еще один цикл сжатия.

(Кстати, Вариант 1 — это сжатое изображение)

Как оптимизировать, изменять размер и обслуживать масштабированные изображения с помощью WordPress

JPG против PNG

JPEG — плохой выбор для изображений с высокой контрастностью. Вот почему скриншоты в формате JPEG с черным текстом на белом фоне имеют тенденцию быть размытыми.

JPEG — это идеальный тип файла изображения для фотографий, особенно без текста, когда файл изображения меньшего размера имеет приоритет над качеством изображения. Например. Большие главные изображения, подчеркивающие профессиональную фотографию

JPEGS значительно меньше, чем PNG. Наше изображение пейзажа выше в формате PNG имеет размер 329 КБ, что почти в 3,5 раза больше, чем в сжатой версии.

PNGs

Давайте погрузимся в другой любимый формат файлов изображений в Интернете, PNG. PNG были разработаны для замены GIF из-за проблем с лицензированием, отсюда и функциональное сходство.

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

Еще одним преимуществом является поддержка прозрачности. Вы можете не только создать файл логотипа с прозрачным фоном, но также можете создавать расширенные градиенты прозрачности и многое другое с помощью PNG.

Три вида PNG

Существует три вида PNG: PNG-8, PNG-24 и таинственный PNG-32. Технически есть и анимированные PNG, но мы не будем вдаваться в подробности, потому что они еще не получили широкой поддержки.

PNG-8 похож на GIF из PNG. PNG-8 поддерживает 256 индексированных цветов, но имеет гораздо меньший размер файла, даже меньший, чем его эквивалент в формате JPEG. Однако, в отличие от GIF, PNG-8 плохо поддерживает анимацию. PNG-8 идеально подходит для простой веб-графики с прозрачным фоном, такой как логотипы и значки сайтов.

В то время как PNG-8 поддерживает 8-битные цвета, PNG-24 поддерживает 24-битные цвета, что означает поддержку 16 миллионов цветов. ЯС! PNG-24 больше похож на JPEG, но имеет значительно больший размер файла. Но качество изображения PNG-24 превосходно, даже при увеличении, что делает его идеальным для фотографий электронной коммерции, а также скриншотов или изображений с текстом.

Если вы создаете PNG в Photoshop В диалоговом окне «Сохранить для Web » вы не увидите PNG-32 в качестве параметра, но ваш PNG будет автоматически преобразован в PNG-32, если вы добавите поддержку прозрачности. Это почему?

PNG-32 поддерживают 24-битные цвета с дополнительным 8-битным альфа-каналом для расширенных возможностей прозрачности. PNG-32 были разработаны, чтобы иметь возможность создавать расширенные изображения с градиентами прозрачности.

Эти расширенные возможности означают, что PNG-32 создает файлы гораздо большего размера. Если вы не создаете изображение, требующее сложной прозрачности, придерживайтесь PNG-24. Если вы создаете наложение изображения, которое постепенно исчезает, то это работа для PNG-32.

Пример можно посмотреть здесь. Изображение, которое я создал в Photoshop, имеет прозрачный градиент с двумя цветами, переходящими от полной непрозрачности к полной бесцветной прозрачности. Чтобы проиллюстрировать это, я сделал фон за изображением черным, используя style="background: #222" .

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

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

WebPs

Было бы здорово, если бы вы могли объединить лучшее из PNG и JPEG? Google думал так же и изобрел формат WebP с открытым исходным кодом.

WebP может быть одним из самых сокровенных секретов, когда речь идет об оптимизации изображений. Огромные сайты, такие как YouTube и eBay, уже начали использовать его для повышения производительности сайта.

Существует два типа изображений WebP. Один известен просто как WebP и использует сжатие с потерями. Вы можете думать об этом как о JPEG-версии формата WebP. Когда вы создаете WebP с потерями в такой программе, как Photoshop, вы можете выбрать степень сжатия.

Другая версия известна как WebP Lossless и больше похожа на PNG. Вы получите больший размер файла, но не потеряете детали.

Оба типа форматов WebP создают изображение, которое намного меньше, чем их аналоги JPEG и PNG. Сколько именно?

По данным Google, в среднем изображения WebP на 25-34% меньше, чем сопоставимые файлы JPEG, и на 26% меньше, чем сопоставимые файлы PNG.

Это здорово! Так почему же мы все еще не перешли на изображения WebP?

Плохие новости. Несмотря на то, что WebP вышел на сцену изображений в 2010 году, Firefox и Safari не поддерживали его. Safari до сих пор этого не делает, хотя теперь, когда Firefox забрался на борт, это, скорее всего, просто вопрос времени. Поэтому на данный момент WebP не является полностью поддерживаемым браузером решением.

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

Что касается создания этих классных файлов WebP для WordPress, вы можете использовать плагин, который сделает это за вас. Фактически, CDN Smush Pro конвертирует изображения в WebP. Если кто-то посещает ваш сайт в браузере, поддерживающем WebP, Smush преобразует ваши изображения и выдает изображения WebP. Если они используют браузер, который не поддерживает WebP, они получат ваш обычный JPEG или PNG.

История двух типов графических изображений

Существует два типа графических изображений: векторные и растровые.

Векторные изображения математически генерируются из набора точек, которые соединяются линиями и кривыми в геометрические фигуры. С векторной графикой размер изображения можно изменить до любой формы, большой или маленькой, без ущерба для качества изображения.

Растровая графика, напротив, состоит из пикселей, расположенных на сетке, где каждый пиксель представляет цвет. Растровая графика имеет высокое качество только при том разрешении, в котором она должна отображаться. Если изображение масштабируется до большего размера, произойдет пикселизация.

SVG

Давайте проясним одну вещь: SVG на самом деле не является форматом файла изображения. SVG — это язык разметки, позволяющий создавать двухмерную графику. SVG больше похожи на HTML, чем на PNG или JPEG.

SVG технически основаны на XML, и ими можно манипулировать и анимировать с помощью Javascript и CSS. Вы только посмотрите на это потрясающее изображение героя.

SVG также уникальны, потому что в отличие от форматов изображений, которые мы рассмотрели до сих пор, они создают векторные изображения. Это означает, что изображения бесконечно масштабируемы и хорошо выглядят при любом разрешении. Благодаря этому они отлично адаптируются к различным устройствам.

Вы не получите той пикселизации, которая возникает в других типах файлов изображений. Однако, поскольку SVG были разработаны для отображения простых изображений на основе геометрических фигур, таких как логотипы, флаги, диаграммы и значки. Они плохо подходят для фотографии.

Вы можете создавать SVG в векторных программах, таких как Adobe Illustrator, Inkscape, Vectr, SVG-edit или Sketch. Если вы создаете простые изображения, размер результирующего файла будет намного меньше, чем у изображений PNG, JPEG или WebP, даже у больших изображений с высоким разрешением. Однако сложные файлы SVG сведут на нет эти преимущества.

Несмотря на то, что это язык разметки, Google индексирует SVG, поэтому они отображаются при поиске изображений. И они совместимы со всеми браузерами.

В SVG или не в SVG?

Если я продал вам SVG, и вы попытались загрузить его в WordPress, пока читаете эту статью, вы могли заметить, что WordPress не разрешает SVG из соображений безопасности.

Но WordPress не единственный. Социальные сети, такие как Medium, Tumblr и Facebook, также не поддерживают SVG.

Вы можете попытаться обойти это и изменить файл функций, чтобы разрешить SVG, но я бы не рекомендовал этого делать. Поскольку SVG являются языком разметки, они открыты для внедрения вредоносных программ. Если вы являетесь администратором сайта и включаете SVG, но авторы и участники вашего сайта не знают о рисках, они могут загрузить скомпрометированные файлы SVG, не зная об этом.

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

GIF

Самый известный тип файлов я оставил напоследок. Хотя GIF-файлы отлично подходят для анимации шуток в иронически плохой манере, в наши дни они не годятся ни для чего другого.

Вы хотите узнать что-то, что поразит вас? Анимированные GIF-файлы в Twitter уже даже не являются GIF-файлами! Это файлы WebM.

Дело в том, что GIF-файлы никогда не предназначались для анимации. Они производят исключительно большие размеры файлов. Чем больше кадров, тем хуже. Если вы переключитесь на файл WebM, у вас будет файл размером 9раз меньше и намного качественнее. MP4 — еще один жизнеспособный вариант, совместимый со всеми браузерами.

GIF-файлы имеют ограниченную цветовую палитру из 256 цветов и используют сжатие без потерь. Но то же самое можно сказать и о файлах PNG-8, и они имеют гораздо меньший размер и прозрачность.

Таким образом, возможно, единственный вариант использования GIF-файлов — это когда вы пытаетесь предоставить что-то, что совместимо со старыми браузерами, которые не поддерживают HTML 5, намеренно плохо выглядят или для ностальгического эффекта.

Полное мега-руководство по ускорению работы WordPress

Оптимальный размер файла — минимально возможный

Хотя использование изображений на вашем сайте для того, чтобы донести свою точку зрения, — это здорово, эти 1000 слов не дешевы! Они требуют много ресурсов для обслуживания. Лучший подход — выбрать формат файла, который дает вам то, что вам нужно, и ничего больше.

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

Когда я писал этот пост и узнавал об изображениях WebP, сжатии и других методах оптимизации изображений, я был рад использовать свои новые знания для улучшения моего личного сайта. Я собирался прочитать длинный учебник о том, как создавать изображения WebP, когда узнал, что Smush Pro делает это одним щелчком переключателя.

Я также активировал Smush CDN и увидел, что время загрузки моей страницы значительно сократилось. До Smush Pro загрузка изображений занимала 3 секунды на некоторых страницах, но после преобразования в WebP и использования Smush CDN загрузка загружалась менее чем за секунду.

alexxlab Автор записи