Оптимальный размер картинки для сайта: Как выбрать правильный размер фото для сайта

Размер фотографий для публикации в интернете: pavel_kosenko — LiveJournal

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

Зачем вообще нужно обращаться к статистике? Дело в том, что если мы хотим, чтобы наши картинки было комфортно смотреть, необходимо учесть удобство большинства бользователей, а лучше всех. Реально учесть интересы всех вряд ли возможно, т.к. они часто противоречат друг другу. Например, если сделать картинку под большое разрешение вроде 3200х2400 px, её будет очень сложно просматривать на маленьком мониторе. И наоборот, если оптимизировать картинку под разрешение, скажем, 320х240, то на экранах значительной части зрителей она будет выглядить как маленькое пятнышко, где нельзя рассмотреть не только деталей, но и толком сюжета. Встаёт логичный вопрос — где золотая середина?

На мой взгляд, с одной стороны необходимо ориентироваться на большинство пользователей, с другой, учитывать интересы малочисленных групп. К значимым группам я бы отнёс аудиторию, составляющую 5%-10% и выше. Всё-таки менее 5%, это обычно пользователи со спецзадачами, а вот от 10%, это уверенно высокая часть аудитории, пренебрегать которой недопустимо. Есть и другие критерии. Например, иногда специально ограничивают потенциальную аудиторию тематической выборкой, заведомо отсекая «непрофильных потребителей», в угоду комфорта основных. Такой подход также бывает оправдан, но лично я предпочитаю по возможности учитывать интересы максимально возможного количества зрителей.

С максимальным ограничением размера фотографий ситуация более-менее ясна. Редко кто готов бесплатно раздавать графические файлы, поэтому просмотр в интернете обычно подразумевает режим preview (предосмотр). Для вполне качественной печати формата 10х15 достаточно разрешения 200 dpi, чему соответствует файл порядка 1200х800 пикселей. Охраняя свои творения от посягательств, фотографы стараются не допускать размещение в интернете файлов выше размера печати 10х15.

Для того, чтобы определиться с минимальными размерами, обратимся к статистике. В первую очередь к глобальной статистике интернета — например, w3counter.com, spylog.ru, hotlog.ru. Мы видим, что лидер сегодняшних хит-парадов, это разрешение 1024х768. Доля таких пользователей колеблется в среднем от 22% до 47%. Второе место принадлежит разрешению 1280×1024, которым пользуется от 15% до 20% человек. В моём опросе места 1 и 2 поменялись местами — 11% и 49% соответственно. Я думаю, это связано с тем, что мой блог читают в основном люди, в той или иной степени увлечённые фотографией, т.е. обладающие мониторами размеров выше среднего. Вместе с тем даже среди такой аудитории процент использования разрешения 1024х768 уверенно превысил 10%.

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

Когда мы говорим о разрешении экрана, то должны помнить следующее. Как правило, часть экрана требуется на интерфейсы операционной системы (например, кнопка «Пуск» и полоса навигации в Windows) и интерфейс браузера. Конечно, существуют режимы просмотра full screen (полный экран), но если вспоминать про удобство пользователей, то необходимо уместить картинку целиком в его стандартном поле для просмотра web-страниц. Давайте посмотрим, какового это поле при разрешении 1024х768? А оно примерно таково:

посмотреть крупнее (откроется в новом окне)

Размер 1000х620 пикселей определён примерно, т.к. в реальности он варьируется в зависимости от ОС, используемых режимов и интерфейсов браузера. Также некоторые учитывают ICQ-клиент, но я считаю, что для просмотра картинок в интернете человек вполне способен убрать его на это время.

С учётом минимально необходимых отступов, получается, что для показа картинки с соотношением сторон 3:2 у нас остаётся 600 пикселей по высоте. Что соответствует 900 по ширине.

900х600 — этот формат я определяю для себя в качестве максимального для публикации в интернете. Вот так он выглядит в реальном размере:

Фотография в таком размере будет показана целиком (без полосы прокрути) у подавляющего большинства пользователей. При этом такой размер вполне достаточен, чтобы рассмотреть детали и сюжет, даже если просматривать его на большом экране порядка 1600х1200 и более пикселей. Тем более, при слишком больших разрешениях люди часто предпочитают не открывать браузер на всю ширину. При описанном подходе у меня получаются следующие размеры картинок, которые я и стараюсь использовать по возможности:

3:2 (горизонтальный) — 900х600
3:2 (вертикальный) — 400х600
4:3 (горизонтальный) — 800х600
4:3 (вертикальный) — 450х600
1:1 (квадрат) — 500х500

При размещении картинок свыше 900х600 пикселей мы заведомо создаём неудобство просмотра для большого количества людей. В этом случае пострадает в среднем от 10% (увлеченной) до 50% (массовой) аудитории, у которых возникнут полосы прокрутки и которые не смогут без специальных действий просмотреть фотографию целиком на экране.

Несколько примечаний:

1. В случае нестандартных соотношений сторой я ориентируюсь на максимальный размер стороны согласно обозначенному ограничению 900х600. Например, картинку 3000х1500 пикселей я скорее всего уменьшу до 900х450.

2. Квадрат сам по себе создаёт ощущение большой площади, поэтому для гармоничного его просмотра с другими картинками, я беру максимальную сторону чуть меньше, чем для других случаев (500, а не 600).

3. В случае узкой длинной панорамы стараюсь сделать один размер для просмотра целиком на экране + ссылка на более большой вариант. Конкретные цифры зависят от самой панорамы, но для таких случаев при описанном подходе (наличие превью и ссылки) считаю допустимым делать картинку шириной 1200-1500 пикселей и даже больше. Но только, если такая картинка буде скрыта под отдельной ссылкой.

4. Для публикации фотографий в ЖЖ я стараюсь вынести вне ката более маленькую картинку (как правило, одну), чтобы не перегружать френд-ленты. Те, кого заинтересует превью, могут посмотреть нормальный размер под катом. Считаю размещение большой (порядка 900х600 пикселей) картинки вне ката чрезмерным, хотя не критичным. Т.е. я не обижаюсь на такие каринки в своей ленте :), хотя и считаю размеры свыше 900х600 перебором, который мешает удобству. Сам стараюсь для предосмотра (т.е. вне ката) не использовать картинки более 600х400.

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

Примерно так. Описанный принцип не претендует на объективность. Другие подходы также могут быть оправданы, в зависимости от целей и ориентирации на определённую (ограниченную) аудиторию. Просто я рассказываю о своём подходе и надеюсь, что эта информация может оказаться полезной. Как всегда, буду благодарен за отзывы и встречные мнения.

UPDATE. Обновленная статья (2015 год):
http://pavel-kosenko.livejournal.com/642666.html

чтобы SMM был красивым — OKOCRM

Инструменты

25 августа 2021

Обновлено: 19.09.2022

1866

Время чтения: 9 минут

Илья Кривенко

Гуру SMM

Содержание

Управляйте бизнесом в OkoCRM

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

Узнать подробнее

Бывает, загружаешь картинку для поста Вконтакте, а она растягивается, и самое главное не видно. Или на ПК все нормально, а в мобильной версии — криво. Проблема всегда в размерах. Чтобы ваши соцсети всегда оставались красивыми, загружайте картинки подходящего размера. Мы посмотрели официальные руководства. Вот актуальные размеры картинок в пикселях для соц. сетей.

Фэйсбук

Форматы: JPG, PNG. Преимущество у PNG — потому что алгоритмы Фэйсбука сильно сжимают картинки, пикселизация выглядит не очень.

Фото профиля:180х180

Фото профиля — всегда квадратное, 180х180 px. Оно отобразится с небольшой подрезкой не только на вашей страничке, но и в таймлайне, возле комментариев и в строке выдачи, если кто-то будет искать нас через поиск. Можем комбинировать с обложкой — фото отображается на 176 пикселей ниже верхнего края.

Десктопы: 170х170

Смартфоны: 128х128

Бабушкофоны: 36х36

Соотношение: 1:1

Обложка: 820х312

Обложка в разы больше фото профиля — у нас в разы больше места для творчества. Чтобы не быть банальными, можем эффектно комбинировать фото профиля и обложку, учитывая их расположение.

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

Десктопы: 820х312

Смартфоны: 640х360

Бабушкофоны: не отображают

Соотношение: 2,6:1

Фото бизнес-профиля: 180х180

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

Десктопы: 170х170

Смартфоны: 128х128

Бабушкофоны: 36х36

Миниатюра: 32х32

Соотношение: 1:1

Пост: 1200х630

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

Минимум: 1200х630

В ленте: 470х247

В хронике: 504х265

Соотношение: 1,9:1

Картинки со ссылкой: 1200х628

Иллюстрации со ссылками — это как обычные посты в Facebook, только для рекламы.

Такие посты бывают двух форматов: прямоугольные — с текстом под картинкой, и квадратные — с текстом справа.

Оптимальный: 1200х628

В ленте (квадрат): 154х154

В ленте (прямоугольник): 470х246

В профиле (квадрат): 116х116

В профиле (прямоугольник): 428х252

Соотношение: 1,9:1

Выделенная картинка: 1200х717

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

Размер: 1200х717

Отображение: 843х504

Обложки событий: 1920х1080

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

Размер: 1920х1080

Отображение: 470х174

Отображение в ленте: 470х174

Соотношение: 1,77:1

Другие размеры

• Истории: 1080х1920
• Реклама в ленте: 254х133
• Баннерная и нативная реклама: 254х133
• Истории в мессенджере: 500х889
• Кольцевая галерея: 1080х1080

Совет: Фэйсбук не любит картинки с текстом — для них охват снижается или показы отпадают совсем.

Чтобы не попасть под фильтры соцсети, используйте как можно меньше текста и желательно небольшим шрифтом.

Попробуйте OkoCRM бесплатно

CRM-система, управление проектами и задачами, общение с клиентами и каналы продаж — всё внутри OkoCRM. 7 дней бесплатно.

На страницу OkoCRM

Инстаграм

Форматы: для сториз и фотографий — JPG, GIF, PNG; для аватара— JPG и PNG.

Аватар: 110х110

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

Размер: любой

Отображение: 110х110

Соотношение: 1:1

Фотографии в постах: 1080х1080

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

Оптимальный: 1080х1080

Соотношение: 1:1

Для портретов: 1080х1350

Соотношение: 4:5

Отображение: 612х612

В ленте новостей: 510х510

Миниатюры в профиле: 161х161

Сториз: 1080х1920

Публиковать в сториз можно не только видео, но и фото. Большие размеры позволяют публиковать фотки во весь рост, портреты или длинные объявления с анонами. Главное — сохранять пропорции, иначе обрезанные изображения негативно отразятся на количестве подписом. Или отписок.

Оптимальный: 1080х1920

Минимальный: 600х1067

Соотношение: 9:16

Другие размеры

• Реклама в ленте: 1080х1080
• Реклама в сториз: 1080х1920
• Обложки для видео: 420х654

Учитывайте, что Инстаграм — филиал Фэйсбука. Поэтому у него такие же требования к тексту на картинках. Чем его больше — тем меньше охват аудитории.

Попробуйте OkoCRM бесплатно

Простая система для автоматизации продаж, ведения базы и общения с клиентами. В одном окне все каналы продаж, мессенджеры и соцсети.

Что умеет OkoCRM

Ютуб

Форматы: JPG, GIF, PNG, BMP.

Аватар канала: 800х800

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

Размер: 800х800

Отображение: 98х98

Соотношение: 1:1

Обложка канала: 2560х1440

Шапка — первое, что бросается в глаза, когда пользователь заходит на канал.

Она отображается на любых устройствах, поэтому обложку на каналах размещают все и всегда. Главное не забывать, что у нее есть «мертвая зона» по краям изображения, которая не будет отображаться. Размеры шапки достаточно большие. Если втулим картинку с меньшим разрешением, Ютубу придется ее растягивать.

Размер: 2560х1440

«Безопасная» область: 1546х423

Десктоп: 2560х423

Мобильный: 1546х423

Планшет: 1855х423

ТВ: 2560х1440

Соотношение: 1,77:1

Превью к видео: 1280х720

Это изображение, которое мы видим перед запуском видео. Его можно взять куском из самого ролика или загрузить отдельно. Используется размер стандартного HD — потому что многие авторы берут превью прямо из ролика. Главное не перепутать пропорции, иначе Ютубу придется растягивать картинку.

Размер: 1280х720

Соотношение: 16:9

Другие размеры

• Медийные объявления над списком рекомендуемых видео: 300х250 или 300х60
• Оверлеи: 468х60 или 728х90

OkoCRM для чатов с клиентами

Система объединяет в одном окне все мессенджеры, социальные сети и чаты. Обращение клиента нельзя пропустить, ответ будет мгновенным.

Вконтакте

Форматы: JPG, GIF, PNG

Аватар: 200х200

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

Минимальный: 200х200

Оптимальный: 200х500

Самый большой:  7000х7000

Соотношение сторон: 2:5

Обложка сообщества: 1590х400

Если не угадать в обложке с размерами, Вконтакте сам обрежет картинку. Если что-то останется за бортом — виноваты сами. Поэтому не забываем про соотношение сторон.

Для десктопа: 1590х400 или 3,9:1

Для смартфона: 1190х400 или 2,99:1

Меню группы: 510х353

В правилах Вконтакте нет жестких требований к высоте заставки — можно хоть 20 пикселей. Лишь бы было красиво. Когда обрезаете картинку, учитывайте, что баннер будет упираться в вертикальный аватар. А лучше сразу использовать интерактивное меню с кнопками — людям нравится интерактив и ссылки.

Ширина: не менее 510

Высота: не более 353

Соотношение: 5,1:3,5

Изображения со ссылкой: 537х240

Когда делаешь пост со ссылкой на другой сайт, Вк подтягивает изображение с этой страницы. Можно задать любую другую картинку. Но нужно помнить: иллюстрации с вертикальной ориентацией обрезаются по высоте до 240 пикселей.

Ширина: не менее 510

Высота: не более 240

Соотношение: 5,1:2,4

Пост: 510х510

Посты Вконтакте могут быть любыми: вертикальными или горизонтальными, с разным размером, особых ограничений нет. Например, для квадратных картинок оптимальный размер 800х800, для прямоугольных – 800х600. Главное — публиковать интересный контент, вовлекать аудиторию и укладываться в ограничения.

Минимум: 510х510

Максимум: 1200х1200

Соотношение: 1:1

Другие размеры

• Обложка фотоальбома: 1200х800
• Истории: 1080х1920
• Обложки для статей: 510х286
• Миниатюры в альбоме: 123х123
• Реклама сайта: 1080х607
• Лого: 256х256
• Реклама приложения или сайта: 145х165
• Реклама группы: 145х145

Автоматизируйте продажи в OkoCRM

Каналы продаж, чаты с клиентами в мессенджерах и соцсетях, заявки, задачи и дедлайны, звонки, аналитика, документы — в одном окне браузера.

Как это работает

Одноклассники

Форматы: JPG, GIF, PNG.

Аватар: 190х190

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

Максимум: 1680х1680

Отображение: 190х190

Соотношение: 1:1

Обложка профиля: 1944х600

Максимальное разрешение для обложки достаточно высокое. Но разные гаджеты отображают ее тоже по-разному. Поэтому есть смысл отцентрировать картинку и оставлять незаполненной «мертвую зону» — с каждого края по 480 пикселей. Если хотим, чтобы обложку лайкали и комментили, закрепляем ее в альбоме на странице.

Размер: 1944х600

«Безопасная» область: 980х240

Соотношение: 3,24:1

Картинка поста: 780х585

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

Максимум: 1680х1680

Отображение: 780х585

Пост в ленте: 548х411

Соотношение: 1,3:1

Рекламные иллюстрации

В одноклассниках можно настраивать много и разных рекламных кампаний. У каждой рекламы — своим размеры картинок. Но у всех есть общее ограничение: вес рекламного изображения не должен превышать 150 килобайт.

Формат с подписью внизу: 600х600

Формат с подписью слева: 256х256

Формат с подписью сверху: 1080х607

Тизеры: 90х75

Изображения для карусели: 600х600

Лента: 1080х607

Все каналы продаж в OkoCRM

В одном окне чаты в Telegram и WhatsApp, VK и на сайте, почта и другие каналы продаж. Обращения клиентов не теряются.

Как это работает

5 сервисов для подгонки картинок под соцсети

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

Canva

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

Нет шаблона? Не проблема. В конструкторе можно задать любой размер изображения и создать собственный дизайн. А если раскошелится на про-аккаунт, останется только создать картинку — сервис сам адаптирует ее под нужный размер выбранной соцсети.

Интерфейс Canva. Много готовых шаблонов и простое управление, в котором разберется даже ребенок.

Figma

Еще одна прога с бесплатной версией. Что-то похожее на Канву, только с большим акцентом на UX/UI-дизайнеров. Но в нем можно создавать и картинки. А если использовать специальный плагин — Social Media Image, то получим шаблоны картинок с правильными размерами для социальных сетей. Работаем в три шага: создаем полотно, перетаскиваем картинки и обрабатываем детали.

Интерфейс Фигмы — ничего лишнего. А специальный плагин помогает подгонять картинки для соцсетей прямо в рабочем пространстве — по шаблонам.

Shutterstock Editor

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

Интерфейс Shutterstock Editor. Редактор бесплатный, но загружать свои фотографии не разрешает — только картинки из фотобанка.

ACDSee

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

Интерфейс ACDSee Pro 8. Программа платная, но умельцы быстро взламывают ПО и размещают на бесплатных обменниках. Лучше такими версиями редактора не пользоваться.

Fotor

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

Интерфейс Fotor. Богатый функционал доступен и в бесплатной версии. Но фишки для изменения размеров — только за деньги.

Коротко: размеры картинок для соцсетей

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

Собирайте лиды отовсюду

OkoCRM пылесосит все каналы, по которым приходят клиенты. Сайт, соцсети, мессенджеры, телефония, сделки и проекты внутри одного окна.

Подробности

Лучший размер изображения для веб-сайтов: размеры, соотношение, вес

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

Обычно рекомендуемые размеры изображений для веб-сайтов Рекомендации по изображениям веб-сайтов 2023 года Рекомендации по размеру изображения для мобильных устройств Почему размер изображения важен для веб-сайтов? Какой формат изображения использовать для Интернета? Другие аспекты оптимизации изображения Как узнать размеры изображений для вашего сайта? Резюме

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

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

Вот шпаргалка стандартных размеров изображений для веб-страниц, которые лучше всего подходят для рабочего стола с разрешением 1920 x 1080 px (самый популярный по статистике).

Тип изображения веб-сайта	Размеры изображения (Ш x В)	Соотношение сторон изображения
Фоновое изображение	1920 x 1080 пикселей	16:9
Главный образ	1280 x 720 пикселей	16:9
Баннер сайта	250 x 250 пикселей	1:1
Изображение блога	1200 x 630 пикселей	3:2
Логотип (прямоугольник)	250 х 100 пикселей	2:3
Логотип (квадратный)	100 х 100 пикселей	1:1
Фавикон	16 х 16 пикселей	1:1
Иконки социальных сетей	32 х 32 пикселя	1:1
Изображения в лайтбоксе (полный экран)	1600 x 500 пикселей	16:9
Эскиз изображения	150 х 150 пикселей	1:1

Важны не только размеры изображения, но и размер файла изображения. Обязательно сжимайте изображения на своем веб-сайте — попробуйте онлайн-инструмент сжатия изображений TinyIMG бесплатно!

Рекомендации по изображениям веб-сайтов 2023

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

Размер фонового изображения веб-сайта

• Высота — 1080 пикселей
• Ширина — 1920 пикселей
• Соотношение сторон — 16:9
• ИПП-72

На что следует обратить внимание: В зависимости от дизайна веб-сайта размер фонового изображения может составлять до 2400 на 1600 пикселей и размер файла до 20 МБ.

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

Если значение числа пикселей на дюйм (PPI) равно 72, вы можете загрузить фоновое изображение размером до 2400 x 1600 пикселей или с соотношением сторон 16:9. Однако идеальный размер — 1920 на 1080 пикселей. При загрузке в рекомендуемом размере фоновые изображения будут масштабироваться или уменьшаться в зависимости от устройства. Поэтому, в зависимости от дизайна, загруженное фоновое изображение может быть самым большим изображением, загруженным на веб-сайт, с ограничением до 20 МБ.

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

Веб-сайт h Размер изображения ero

• Высота — 720 пикселей
• Ширина — 1280 пикселей
• Соотношение сторон — 16:9
• ИПП-72

На что следует обратить внимание: В зависимости от дизайна веб-сайта можно использовать изображения шириной до 1800 пикселей.

Главные изображения могут занимать всю высоту или половину высоты страницы. Главные изображения будут хорошо отображаться с размером изображения 1280 на 720 пикселей и соотношением сторон 16:9.. Если основные изображения занимают центральное место на веб-сайте, ширина до 1800 пикселей может обеспечить желаемый эффект. На скорость загрузки веб-сайта может влиять четкость изображения.

Таким образом, поддержка основных изображений с разрешением 72ppi обеспечит как четкость, так и небольшой размер файла для достижения наилучшего результата. Как правило, рекомендуемая скорость загрузки веб-страницы должна составлять 2 секунды для оптимального трафика и целей SEO.

Сегодня 90% трафика сайта генерируется с мобильных устройств. На мобильных веб-сайтах главные изображения хорошо отображаются в размере 800 на 1200 пикселей. Однако системы управления контентом автоматически масштабируют изображения в соответствии с браузером мобильного устройства.

Размер баннера веб-сайта

• Высота — 250 пикселей
• Ширина — 250 пикселей
• Соотношение сторон — 1:1
• ИПП-72

Рекламные баннеры на сайте могут быть разного размера. Вертикальные, портретные, полноразмерные, полностраничные и квадратные баннеры — наиболее распространенные типы изображений баннеров веб-сайтов. Большинство веб-сайтов выбирают размер изображения баннера 250 на 250 пикселей или соотношение сторон 1: 1.

Вертикальные/небоскребные баннеры также популярны в размерах 160 на 600 пикселей. Изображения баннеров должны быть разработаны в соответствии с требуемыми размерами и сжаты до небольшого размера файла изображения. Сохранение области фокусировки изображения посередине позволит избежать обрезки изображений при их отображении на мобильных устройствах. Узнайте больше о рекомендуемых запрещенных размерах в этом руководстве.

Мобильные устройства хорошо отображают изображения баннеров, когда они имеют соотношение сторон 1:9, 1:1, 1:1 или 4:5. Также полезно помнить, что размеры файлов изображений должны быть как можно меньше без ущерба для качества. Максимальный размер изображения на сайте не должен превышать 20 МБ.

Размер изображения блога веб-сайта

• Высота — 630 пикселей
• Ширина — 1200 пикселей
• Соотношение сторон — 3:2
• ИПП-72

На что обратить внимание: При выборе размера изображения важно учитывать область над сгибом (видимая часть до прокрутки). Если изображение важно, следует использовать изображение большего размера. Если текст важен, можно пожертвовать размером изображения.

При загрузке изображений для блога помните, что эти изображения должны подходить для публикации в социальных сетях. Как правило, изображения блога хорошо размещаются на веб-сайте с соотношением сторон 3:2 или размером 1200 на 630 пикселей. Изображения блога в горизонтальном формате лучше всего использовать в размере 1200 пикселей на 9 пикселей.00px и рекомендуемые изображения блога в портретном формате лучше всего подходят для размера 900px на 1200px.

Для изображений блога следует загружать высококачественные изображения с небольшим размером файла. Для изображений блога максимальный рекомендуемый размер файла составляет 150 КБ. Чем меньше размер файла, тем выше скорость блога. Чтобы CMS адаптировала изображения блога к разным размерам, они должны иметь разрешение 72 ppi с центральной областью фокусировки.

Размер логотипа веб-сайта

• Высота — 100 пикселей
• Ширина — 250 пикселей
• Соотношение сторон — 2:3
• ИПП-72

На что обратить внимание: Изображения логотипа могут быть квадратными или прямоугольными. Поэтому можно использовать соотношение сторон 1:1 или 2:3.

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

Формат

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

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

Размер фавиконки веб-сайта

• Высота — 16 или 32 пикселя
• Ширина — 16 или 32 пикселя
• Соотношение сторон — 1:1
• ИПП-72

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

Наиболее стандартными форматами для фавиконов являются ICO и PNG для совместимости в разных браузерах. Несколько простых в использовании инструментов могут преобразовать логотип в фавикон, подходящий для загрузки на веб-сайт.

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

Изображения с соотношением сторон 1:1 без проблем отображаются на мобильных устройствах. Однако, в зависимости от настройки автоматического изменения размера, на мобильных устройствах может происходить некоторая обрезка изображений с соотношением сторон 16:9.или 3:2. По этой причине самый безопасный подход к адаптивным изображениям — удерживать область фокусировки объекта посередине.

Почему размер изображения важен для веб-сайтов?

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

Медленный веб-сайт отвлекает потенциальных клиентов и трафик с вашего веб-сайта. Поисковая система Google понизит рейтинг сайта, и ваш бизнес пострадает.

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

Какой формат изображения использовать для Интернета?

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

• JPEG — Будучи одним из наиболее распространенных форматов изображений, используемых для изображений, JPEG представляет собой облегченный формат изображения со сжатием с потерями. Форматы файлов JPG отлично подходят для продуктов, блогов и фоновых изображений, используемых на веб-сайтах.
• PNG — PNG — это формат изображения, в котором используется сжатие без потерь. Альфа-канал в формате PNG также обеспечивает прозрачность фона. PNG идеально подходит для значков, логотипов и другой графики.
• GIF — формат файла GIF — это изящный формат файла изображения, который можно использовать для коротких анимированных клипов с файлами небольшого размера. GIF также имеет альфа-канал и отлично подходит для изображений продуктов.
• WEBP — изображения WEBP — это новый формат изображений, который становится популярным. Формат предлагает меньшие размеры файлов изображений, чем JPEG, с превосходным качеством, что делает его идеальным для любого продукта, баннера и избранного изображения.

Другие аспекты оптимизации изображения

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

Сжатие изображения

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

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

SEO-оптимизация изображений

Когда изображения оптимизированы для поисковых систем, они помогают с ранжированием в поисковых системах, скоростью, объемом памяти и удобством для пользователей. Поисковые системы отдают предпочтение веб-сайтам с изображениями, которых нет больше нигде в Интернете. Поиск изображений важен для пользователей, которые ищут изображения, чтобы вдохновлять и визуально объяснять темы. Таким образом, оптимизация изображений помогает поисковым системам понять содержание вашего сайта. Вот некоторые элементы оптимизации изображений для SEO:

• Уникальное изображение
• Заданные размеры
• Текст тега ALT и заголовок
• Карта сайта для изображений
• Подписи к изображениям
• Оптимизация размера изображения

Как узнать размеры изображений для вашего сайта?

Сайты уникальны по стилю, выбранному создателем. Для сайтов, использующих WordPress, Shopify, Wix, Squarespace и другие CMS, требуются изображения рекомендуемых размеров.

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

Shopify Темы

• Shopify позволяет пользователям загружать изображения размером до 4472 x 4472 пикселей с ограничением 20 МБ на изображение с разрешением 72 dpi.
• Минимальный размер изображений товаров на Shopify — 800 на 800 пикселей.
• Проверьте, есть ли в вашей теме Shopify руководство по рекомендуемым размерам изображений.
• Обратите внимание на размеры изображений, которые лучше всего подходят для вашего магазина Shopify для использования в будущем.

Попробуйте приложение TinyIMG Shopify сегодня с 50 бесплатными оптимизациями изображений

Установить сейчас

Темы WordPress

• Рекомендуемый размер изображения в WordPress — до 1024 на 1024 пикселей.
• Большинство тем WordPress имеют полный файл документации, который помогает пользователям найти наилучшие размеры изображений для темы.
• Если вы изменили размер изображения в соответствии с вашим дизайном и дисплеем, запишите это.

Пользовательские веб-сайты

• Разработчик веб-сайта, созданного на заказ, обычно предоставляет документацию, в которой указаны оптимальные размеры изображений
• «Щелкните правой кнопкой мыши» изображение, размеры которого вы хотите найти в браузере Chrome. Выберите «Проверить элемент», чтобы найти размер изображения в выделенном коде.

Резюме

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

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

Часто задаваемые вопросы

Какое разрешение изображения лучше всего подходит для Интернета?

Лучшее разрешение изображения для Интернета — 72 пикселя на дюйм (PPI). Изображения с разрешением 72ppi отлично подходят для просмотра и обмена. Они также имеют небольшие размеры файлов, идеально подходящие для хранения веб-сайта и целей SEO.

Что делает опция «сохранить изображение для Интернета»?

Параметр «Сохранить изображение для Интернета» адаптирует изображения для просмотра в Интернете и поисковой оптимизации. Эта функция видна в Abobe Photoshop как единственная кнопка. Однако те, у кого нет Photoshop, могут использовать инструменты сжатия и оптимизации изображений, такие как TinyIMG, чтобы получить те же преимущества.

В чем разница между высоким разрешением и веб-размером?

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

Об авторе

Как оптимизировать изображения для лучшего веб-дизайна и SEO

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

Когда мы говорим о том, как «оптимизировать» изображения для Интернета, вы можете думать об этом тремя способами: 1) сделать так, чтобы изображения выглядели хорошо, 2) сделать так, чтобы изображения загружались быстро, и 3) упростить индексацию изображений поисковыми системами. .

Большинство постов посвящены тому или иному аспекту оптимизации изображений, но в этом посте я расскажу обо всех. Еще лучше то, что вы можете оптимизировать изображения с помощью бесплатных, простых в использовании инструментов и конструктора веб-сайтов.

Узнайте, как создать собственный веб-сайт сегодня!

1. Начните с высококачественных изображений

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

• Pixabay
• Unsplash
• Barn Images
• PicJumbo
• SplitShire
• Little Visuals
• … и с веб-сайтом Jimdo, бесплатные стоковые изображения доступны прямо в вашей библиотеке изображений.

Когда вы загружаете изображение с веб-сайта со стоковыми фотографиями, это, скорее всего, будет действительно большой файл JPEG. Чтобы сжать его для своего веб-сайта, вам нужно уменьшить размер и загрузить уменьшенную версию (подробнее об этом ниже). Это нормально. Идеально начинать с большого формата, потому что вы всегда можете уменьшить большое изображение. (Увеличить маленькое изображение не получится).

Создание собственных (более качественных) фотографий: Конечно, вы не можете использовать стоковые фотографии для всего (например, для вашей команды или продукта). Есть несколько простых приемов, чтобы ваши изображения выглядели хорошо освещенными и более профессиональными, даже без модного оборудования для камеры (например, это руководство по созданию собственного светового короба).

Графика: Если вы ищете что-то более графическое, существует множество новых бесплатных онлайн-инструментов, которые вы можете использовать для создания собственной инфографики или фотографий с наложением шрифтов. Мы любим Canva и PiktoChart.

Логотип: Если вы ищете логотип, рекомендуем воспользоваться нашим конструктором логотипов. Вы можете попробовать это бесплатно.

Создайте логотип, который выделит ваш бизнес.

2. Используйте правильный тип файла: JPEG или PNG

Если вас интересуют различные файлы изображений, такие как JPG, PNG, GIF и SVG, просто знайте, что на вашем веб-сайте вы, скорее всего, используете формат JPEG (JPG) или PNG. У каждого есть свои плюсы и минусы, но в большинстве случаев следует помнить следующее:

• Фотографии следует сохранять и загружать в формате JPG. Файлы этого типа могут обрабатывать все цвета фотографии при относительно небольшом эффективном размере файла. Используя JPEG, вы не получите огромный файл, который вы могли бы получить, если бы сохранили фотографию в формате PNG.
  
• Графические изображения, особенно те, в которых используются большие плоские области цвета, следует сохранять в формате PNG. Сюда входят большинство дизайнов, инфографика, изображения с большим количеством текста и логотипы. PNG имеют более высокое качество, чем JPEG, но обычно имеют больший размер файла. Как и их родственники, файл SVG, файлы PNG имеют дело с областями цвета и текста с красивыми четкими линиями, поэтому вы можете увеличивать масштаб без потери качества. Они также поддерживают прозрачный фон (который вам понадобится, если вы используете логотип). Если у вас есть выбор, мы рекомендуем сохранять PNG в формате «24 бит», а не «8 бит» из-за лучшего качества и более богатого набора поддерживаемых цветов.

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

Узнайте, как создать собственный веб-сайт сегодня!

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

В большинстве простых графических программ можно выбрать JPG или PNG, выбрав «Сохранить как», «Экспорт» или «Сохранить для Интернета» и выбрав нужный тип. Существуют также бесплатные онлайн-инструменты на основе браузера, такие как Zamzar, которые конвертируют файлы для вас.

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

3. Изменение размера изображений для оптимизации скорости страницы и внешнего вида

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

В этом посте я в основном продемонстрирую бесплатную версию Pixlr для браузера, которая представляет собой простой инструмент для базового редактирования изображений. Если вас интересуют другие инструменты, ознакомьтесь с нашей статьей «Как редактировать фотографии без Photoshop».

Каков идеальный размер изображения для веб-сайта?

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

• Оптимальный размер файла: количество байтов, которое файл занимает на вашем компьютере. Это фактор, который может замедлить работу вашего сайта. Изображение размером 15 МБ (мегабайт) огромно. Изображение размером 125 КБ (килобайт) гораздо разумнее. Если размер вашего файла действительно большой, это показатель того, что либо размеры вашего изображения слишком велики, либо разрешение слишком велико.
• Размер изображения: Фактические размеры вашего изображения в пикселях. Вы, вероятно, думаете о традиционных печатных фотографиях как о 4×6, 5×7 или 8×10. Но в Интернете высота и ширина измеряются в пикселях. Так, например, типичное изображение на веб-сайте или в блоге может иметь размер 795×300 пикселей.
• Разрешение для веб-изображений: Оставшееся в мире печати разрешение — это качество или плотность изображения, измеряемая в точках на дюйм (dpi). Профессиональный принтер может потребовать изображения с разрешением не менее 300 точек на дюйм. Но большинство компьютерных мониторов отображают 72 dpi или 92 dpi , поэтому все, что выше, является излишним и делает ваше изображение излишне большим. Когда в дизайнерской программе есть возможность «сохранить для Интернета», это означает сохранение в низком, удобном для Интернета разрешении.

Как узнать размер файла, размер изображения и разрешение изображения?

Вы можете найти размер файла и размер изображения прямо на вашем компьютере. Если вы на ПК, щелкните правой кнопкой мыши файл изображения, выберите «Свойства», а затем вкладку «Сводка». На Mac щелкните файл изображения, удерживая клавишу Ctrl, и выберите «Получить информацию».

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

Краткое руководство по размеру изображения, размеру файла и разрешению

Теперь, когда вы знаете, как можно описать размер изображения, вот несколько практических правил, о которых следует помнить:

• Оптимальный размер файла: большие изображения или полные -экранные фоновые изображения должны быть не более 1 МБ .
• Большая часть другой небольшой веб-графики может иметь размер 300 КБ или меньше .
• Если вы используете полноэкранный фон, служба поддержки клиентов Jimdo рекомендует загрузить изображение шириной 2000 пикселей.
• Разрешение для веб-изображений: Если у вас есть опция, всегда «Сохранить для Интернета» , что придаст вашему изображению разрешение, подходящее для Интернета.
• Большое изображение можно уменьшить, но маленькое изображение увеличить очень сложно. Изображение будет выглядеть нечетким и пиксельным.

Хотите создать свой сайт-портфолио?

Что делать, если изображение слишком велико для вашего сайта?

Если у вас есть хорошая цифровая камера, вы можете делать фотографии размером в несколько мегабайт — намного больше, чем вам нужно для вашего веб-сайта. Стоковые фотографии с высококачественных сайтов, как правило, также имеют большие размеры файлов. Если размер вашего изображения превышает 1 МБ, вы можете сделать следующее:

• Измените размер изображения. Если ваша фотография имеет ширину 5000 пикселей, вы можете легко изменить ее размер до ширины 2000 пикселей, ширины 1200 пикселей или даже меньше в зависимости от того, как вы планируете использовать ее на своем веб-сайте. Это значительно уменьшит размер файла. При изменении размера убедитесь, что пропорции сохранены, чтобы не исказить изображение.
• Уменьшить разрешение.  Большинство фотопрограмм автоматически сжимают разрешение вашего изображения до размера, удобного для использования в Интернете (72 dpi и 92 dpi соответственно). Вы также можете сделать это в Photoshop с опцией «Сохранить для Интернета». Вы также можете «Сохранить как» во многих фотопрограммах, а затем настроить уровень качества оттуда.
• Сожмите изображение с помощью бесплатной программы, такой как TinyPNG или TinyJPG. Оба варианта значительно уменьшат размер файла без ущерба для качества.

Изменение размера изображения очень просто. Исходное стоковое фото имело размер 6302×4789 пикселей и размер 16,2 МБ, что намного больше, чем мне нужно для моего веб-сайта. Используя Pixlr, я уменьшил его до 1000×760 пикселей, в результате чего размер файла стал меньше и удобнее для Интернета (132 КБ — идеально!).

4. Сделайте изображения одного размера и стиля

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

На первом фото, взятом с нашего выдуманного веб-сайта «Кофе по фантазиям», все фотографии разных размеров. Один ориентирован вертикально, а другие горизонтально. Из-за этого страница выглядит неорганизованной.

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

В следующем примере я обрезал каждую фотографию до более равномерного размера 1000×760 пикселей. Верхняя фотография ярко-белой кофейной кружки казалась неуместной, поэтому я заменил ее другой, похожей по стилю и цвету на две другие фотографии. Я также поэкспериментировал с фильтрами изображений в Jimdo и наложил тонкое наложение на каждую фотографию (что-то вроде фильтра Instagram), чтобы придать им более последовательный вид.

В этом примере я выбрал фотографии одного стиля и обрезал их до одинакового размера. Это делает мою страницу более единообразной.

Поскольку все фотографии одинакового размера и ориентированы одинаково, все они идеально помещаются в одну колонку, а мои абзацы — в другую. Никаких корректировок или догадок не требуется!

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

Обрезка изображения в Pixlr, чтобы сделать его такого же размера, как и другие мои изображения.

Хорошо, теперь, когда ваши фотографии изменены и выглядят великолепно, как вы можете оптимизировать их для поисковых систем? На веб-сайтах Jimdo большая часть работы по SEO выполняется за вас, но есть еще несколько настроек, которые вы можете сделать для оптимизации ваших изображений.

5. Правильно назовите файл изображения, чтобы помочь вашему SEO

Большинство людей не задумываются об именах своих файлов. Они могут назвать фотографию «Photo1.jpg» или «Снимок экрана 2021-06-02 в 15:41:15». Если это звучит знакомо, найдите время, чтобы переименовать свои изображения, прежде чем загружать их на свой веб-сайт. Почему? Потому что это упрощает управление вашими фотографиями. В зависимости от того, где изображения появляются в Интернете, это также может повысить эффективность SEO.

Для единообразия используйте строчные буквы и цифры от 0 до 9. Не вводите знаки препинания или пробелы. И лучше использовать дефисы, а не подчеркивания. (Вспомните eiffel-tower.jpg , а не DSC12345.jpg ).

Примечание: На веб-сайтах Jimdo вам не нужно переименовывать все файлы на вашем веб-сайте — просто обновите свой замещающий текст (см. ниже).

6. Заполните подписи и альтернативный текст

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

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

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

Не забудьте заполнить замещающий текст и подпись!

Примечание: Заполнение альтернативных тегов, имен и подписей полезно для SEO, но не пытайтесь использовать ключевые слова. Вы просто хотите точно описать изображение простым языком — добавление нерелевантных или повторяющихся ключевых слов приведет к тому, что поисковая система накажет вас.

7. Поместите изображение рядом с соответствующим текстом

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

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

Резюме: Оптимизация изображения веб-сайта

Итак, давайте рассмотрим эти правила на примере моего веб-сайта Make-Believe Coffee. Я нашел фотографию кофейной кружки на Unsplash. Когда я загрузил его, имя было «fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg» и имело размер 2509 x 1673 пикселей. Его размер составлял 586 КБ. Не страшно, но все же намного больше, чем мне нужно, чтобы просто отображать небольшую фотографию на моей веб-странице. Итак, для лучшей оптимизации изображения я бы сделал следующее:

1. Переименовать изображение на что-то более осмысленное. Может быть, что-то вроде make-believe-coffee-cappuccino.jpg
2. Используйте фотоинструмент, чтобы изменить размер и обрезать изображение до нужного размера. Для этого примера я выбрал 1000×760. Если вам нужен квадрат, вы можете сделать 1000×1000.
3. Убедитесь, что размер файла правильный . Как только я обрезал его до нужного размера и загрузил из фоторедактора, размер файла составил 117 КБ — идеально!
4. Загрузите его на свой сайт и не забудьте заполнить альтернативный текст! Я также добавил подпись для верности.

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

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