Как сделать картинку для форума
FAQ Как загружать скриншоты на форум
Вы засняли забавный скриншот и хотите показать его всем?А может вы засняли скриншот с багом и хотите показать его разработчикам игры?Но к сожалению не знаете как залить его на форум?Сейчас я расскажу как это делать.В этом процессе нет не чего сложного.Напомню что скриншоты из игры делаются нажатием кнопки print screen. Скриншот и скрин одни и те же вещи.
1.Заходим на imageshack или radikal
Совет:добавьте ссылки на фотообменики в закладки в вашем браузере
2.Нажимаем Обзор или Browse
3.Выбираем скриншот который надо загрузить(напомню,скриншоты сделанные в игре автоматически сохраняются в папке с игрой)и нажимаем на 2 раза левой кнопкой мыши.
4.Нажимаем кнопку загрузить.
Почему я советую брать ссылку из этих полей? Ответ прост, если мы копируем ссылку из поля картинка в тексте или Форум код, то мы получим скриншот во весь размер просмотр которого будет затруднен, кроме скриншот в полном размере поедает много трафика, а интернет не у всех безлимитный.
6.Вставляем ссылку в сообщение, это можно сделать так же 2 способами.Первый, в окне сообщения нажимаем правую кнопку мыши затем вставить.Второй, нажать на клавиатуре ctrl+v.
После загрузки нажимаем выбрать файлы.
Выбираем скриншоты которые надо залить при этом держим зажатую левую кнопку мыши.
Обводим нужные нам скриншоты(1),отпускаем левую кнопку мыши и нажимаем открыть(2).
После загрузки скриншотов надо нажать кнопку загрузить на сервер.
После загрузки скриншотов заходим во вкладку ссылки (1) и выбираем тип ссылок превью а в графе переход с перьвью выставляем страница просмтора(2).Копируем ссылки(3).
Как копировать ссылки вы можете посмотреть выше.
Как сделать картинку ссылкой в HTML, Вконтакте, на форуме и с помощью CSS
Сегодня мы займемся превращением изображений в активные ссылки. Вы знаете, что интернет полностью основан на гиперссылках, позволяющих кликом мыши перемещаться с одних страниц на другие. В этом плане, использование в качестве ссылок картинок имеет преимущество перед обычными текстовыми линками, так как дает возможность красиво и органично вписать всё в дизайн сайта.
Содержание
Изображения часто применяются в качестве кнопок заказа на коммерческих ресурсах, эта же модель применена в рекламных баннерах, другие примеры вы встречали в интернете сами множество раз.
Я расскажу о том, как сделать изображение ссылкой на основе традиционного HTML кода и альтернативной CSS вариации. Также, мы коснемся превращения картинки в ссылку для социальной сети Вконтакте (там все не так просто). И в завершающей части статьи я расскажу о форумах, там нередко используется кодировка отличная от HTML и вставка изображений и ссылок там происходит иначе.
Как сделать картинку ссылкой в HTML
Для создания картинки-ссылки, достаточно внутри ссылочного тега поместить любое изображение. Изображения в HTML вставляются с помощью тега с атрибутом src, указывающим путь к изображению.
Результирующий код для вставки изображения-ссылки выглядит вот так:
По тексту понятно, что kuda-vedet-ssylka – это адрес целевой страницы, а gde-lezhit-kartinka/kartinka.png – это путь к файлу изображения и его название.
Для настройки такого изображения можно использовать все стандартные html и css функции, позволяющие менять размеры, местоположение, прописывать всевозможные атрибуты.
А тег часто содержит alt=”альтернативный текст, показываемый, если картинка не загрузилась”, title=”название изображения”, height=”указывается высота в пикселях”, width=”указывается ширина в пикселях”.
Результирующий код может быть таким (логотип моего блога, ведущий на его главную страницу):
А вот так он работает:
Картинка-ссылка на CSS
Что касается CSS, то это неотъемлемая часть современного сайта. Таблицы стилей помогают избавиться от лишнего повторения однотипных участков кода, единожды прописывая свойства определенных элементов, а дальше только указывая только их названия.
Для того, чтобы сделать картинку-ссылку на CSS нам нужно пройти 2 шага:
1. Создаем класс объекта и прописываем его в таблице стилей (файл style.css).
Общий код выглядит вот так:
В данном случае link-img – это класс объекта, width и height – размер изображения, background – фон объекта (в качестве фона мы устанавливаем изображение).
Как картинку сделать ссылкой Вконтакте
В социальных сетях процедура создания ссылок из изображений отличается от обычных сайтов по той причине, что у вас нет доступа к исходному коду и мы не можем использовать html теги, поэтому процедура напоминает танцы с бубном.
Итак, давайте колдовать добавлять ссылки к картинкам (или картинки к ссылкам, кому как нравится) на стену или в сообщения в группах Вконтакте.
Шаг 1. Готовим картинку
В ВК сделать кликабельным можно только крупное изображение, минимальный размер 537 на 240 пикселей, все что меньше будет отображаться рядом со ссылкой, но не будет вести на желаемую страницу.
Поддерживаемые форматы – jpg, gif и png.
Шаг 2. Вставляем ссылку в ВК
Когда вы добавляете линк в окно сообщения, социальная сеть автоматически извлекает данные с сайта и высвечивает название страницы (об этом я упоминал в статье как сделать гиперссылку в ВК), небольшое описание и предварительное изображение (если оно есть).
Шаг 3. Вставляем изображение
Подразумевается, что автоматически сформированный Вконтакте блок для ссылки не подходит (там нет изображения, оно маленькое или вам не нравится) – надо менять.
Для этого выбираем кнопку «Выбрать свою иллюстрацию» (фотоаппарат).
Появится окно для выбора файла, тут же, кстати, вы увидите требования к формату и размерам изображений. Кликаете «Выбрать файл» и выбираете то, что вы подготовили на первом шаге.
После выбора, будет возможность слегка подкорректировать – обрезать лишнее и повернуть. Жмем «Сохранить изменения».
После этого формат публикуемой новости изменится. Если вы все сделали верно, то картинка займет всю ширину сообщения и станет ссылкой. Нажимаете «Отправить» и наслаждаетесь результатом.
Как сделать картинку ссылкой на форуме
В большинстве случаев, при создании сообщений на форумах используются визуальные редакторы, через которые можно вставить изображение одной кнопкой и превратить его в ссылку другой.
Но, если такой возможности нет, то в дело вступают, BB-коды – это типичная форумная разметка, функционально похожая на HTML (большинство функций аналогичны), но, имеющая иной синтаксис.
Интересно, что все эти BB-коды в конечном итоге переводятся в HTML, так как браузеры их читать не умеют.
Изображение в BB-коде указывается вот так:
Указывается ссылка на картинку.
А ссылки формируются тегами [url] [/url]. И для создания ссылки-картинки на форуме надо завернуть одну конструкцию в другую, получится так:
Само собой, все это проделывается в текстовом режиме редактора, а не в визуальном. Вот и весь секрет.
Визуальные редакторы
Используя различные графические конструкторы сайтов и страниц реализовать все, что описано выше, проще и быстрее, достаточно нажать пару кнопок. И в WordPress, и в HTML редакторах, и на форумах принцип действие одинаков, схожи и кнопки.
Для того, чтобы сделать изображение ссылкой в графическом интерфейсе необходимо выполнить 2 действия:
1. Вставить изображение, вот такими кнопками (пример с форумом был выше, тут я показываю WordPress):
Там надо будет либо добавить ссылку на картинку в интернете или загрузить с компьютера (возможность загрузки есть не всегда).
2. Выделить вставленное изображение мышью (кликнуть на него), после чего нажать кнопку похожую на цепочку и вставить адрес страницы, на которую должна ссылаться картинка.
На этом все. Желаю удачи. Не забывайте оформить подписку на новые статьи.
Тема: Как вставлять картинки и делиться фотками на форуме
Опции темы
Поиск по теме
Отображение
Выкладывание ссылок на галереи фотографий
Вставка отдельных фотографий прямо в пост
— Рекомендуется использовать встроенный функционал форума.
Альтернативные сервисы для вставки полноразмерных фоток через тег [img]
https://lh3.googleusercontent.com/IjqQcHoCp5509_FqlK-InasNOYzShukgYxO90_EX0AxpEnQUFp0mn1yMmLqW3qvHjjykY PY1vkaD89hVwVS6fAzH-lYFhRU_CXZNqiUl3XuYrLRopc-uDAfPw7f9VEpELZ0V00nx5x5dlBsD7NuVi76v3VMDN0iNHR1gP 31qdUV-VEnigTmtJoEIpYujQTNefiXS-X8h-cgaUmGWo4k3HHgaNZq4C_qJlrjt7mxp7P2PF1o2qPaDBtm-kXEM3otkZqwW59RYcugepzdSOrS8CXtnbBodokXjkGcLNqK4EO WB2Cdg8T2bDScDGDn3Ocaxa3nvmKjrgWX9F-8NjlxNi7MOdYwQ7GCikhfC3UZF1SWw-ULamT01-bTqbBhZVD1JGGSYtN_6VTVpnSqiMUr5joXtAyzk6aduldpBkBE BpSPsbb2dwBea3j5JfkZKTNEYbyJh770PwL1Pql2ologXSYLc-Ta7nbcRNXHCkKipWC9PXpG7qt0gk_Gom12tkPh-7j07ljhCaT5AEjQZcAUg1EFt1UoHIklHwNHM8A-_EY1CAGCxhZXGPG-fNke4PHjBal6BslGFoM8_FrLQQRmvA348g94rNQLNfq1W6yMSV gbu6gXhdLycWOElc6dBwvsLCYlXUoRKBf4j0VbgKRDdR7tYpQ= w2060-h1159-no
Хороший адрес, скопированный из анонимной вкладки или сервисом https://ctrlq.org/google/photos:
https://lh3.googleusercontent.com/aCrehgs3wqrWQPUCG8nYZzxHgFpvsIJi3HJ6vMf70OTL8AHQ7m 2V5ohRU-uXLHrfnSRO2UXyrxI2sMneNQN_hpgVEfh-1CfBPPIgKVbNUKUD3xW5EG_LdrCApQyw7jx1qRRnuJJ5jZA=w1 411-h794-no
1. зайти на fastpic.ru, нажать на кнопку «Выбрать файлы» (можно выбрать сразу несколько штук), и установить галочки как на картинке: 
3. Вставить в любое место сообщения: 
Можно вставить свой текст вокруг картинок: 
[/URL]
Желательно убрать лишние части со ссылкой на fastpic («[URL=http://fastpic.ru/]» и «[/URL]»): 
При отправке текст [IMG]. [/IMG] будет заменён на картинки.
https://lh3.googleusercontent.com/aCrehgs3wqrWQPUCG8nYZzxHgFpvsIJi3HJ6vMf70OTL8AHQ7m 2V5ohRU-uXLHrfnSRO2UXyrxI2sMneNQN_hpgVEfh-1CfBPPIgKVbNUKUD3xW5EG_LdrCAp Qyw7jx1qRRnuJJ5jZA=w800
Как вставить изображение (картинку) на сайт в HTML?
Вставка изображения (картинки) на страницу в HTML
в XHTML. Из примера видно, что для последнего добавляется слеш (косая черта) в конце.
Все это, так сказать, быстрая вставка изображения, не содержащая в себе никаких атрибутов, за исключением ссылки на файл.
Этот тег ( ), в отличие, например, от ссылки, не закрывается и пишется в той форме, что я привел выше. Рекомендуемым атрибутом является «alt»:
который показывается в момент, пока изображение не загрузилось полностью или имеет битую (несуществующую) ссылку.
Список существующих атрибутов тега в HTML
Все атрибуты у изображений прописываются через пробел. А вот собственно и сам их перечень.
src – содержит ссылку до изображения, может быть как абсолютной (ссылка до файла, который находится на другом сайте), так и относительной (ссылка до файла, который находится на вашем сайте). Допустимые форматы: JPEG (JPG), PNG, GIF, BMP, ICO, APNG, SVG и Base64. Пример использования с абсолютным адресом изображения:
Пример использования с относительным адресом изображения:
alt – содержит текст – подсказку у не появившегося/отсутствующего изображения. Пример использования:
align – задает выравнивание изображения относительно рядом находящегося текста (создание обтекания изображения текстом). Допустимые значения: top, bottom, middle, left и right. Пример использования:
Атрибут не поддерживается в HTML5.
border – задает ширину границы (рамки) вокруг изображения. Допустимые значения: px, % и другие величины. Пример использования:
Атрибут не поддерживается в HTML5.
height – задает высоту изображения. Допустимые значения: px, % и другие величины. Пример использования:
width – задает ширину изображения. Допустимые значения: px, % и другие величины. Пример использования:
hspace – задает горизонтальный (слева и справа) отступ у изображения. Допустимые значения: px, % и другие величины. Пример использования:
Атрибут не поддерживается в HTML5.
vspace – задает вертикальный (сверху и снизу) отступ у изображения. Допустимые значения: px, % и другие величины. Пример использования:
Атрибут не поддерживается в HTML5.
longdesc – содержит адрес до расширенного описания изображения. Допустимые значения: TXT-файл. Адрес, как и у атрибута src, может быть абсолютным или относительным. Пример использования:
crossorigin – атрибут, позволяющий осуществить вставку изображения с другого сайта через кросс-доменный запроса (CORS). Допустимые значения: anonymous (анонимный запрос без передачи учетных данных) и use-credentials (запрос с передачей учетных данных). Пример использования:
Атрибут поддерживается только в HTML5.
srcset – задает список файлов, которые будут отображаться в зависимости от ширины или плотности экрана. Допустимые значения: Nw (где N – любое целое положительное число) и Kx (где K – положительное десятичное число). Пример использования:
Атрибут не поддерживается в браузерах Android и Internet Explorer.
sizes – задает размер для изображений, указанных в атрибуте srcset. Допустимые значения: Nex, Nrem, Nem, Nvmin, Nch, Nvh, Nvw, Nvmax, Nin, Nq, Nmm, Npc, Ncm, Npt и Npx, где N – положительное число. Пример использования:
Принцип действия примера такой: если разрешение экрана меньше 600 px, то задаем ширину изображений, равную 300 px, и наоборот, если больше 600 px – фиксируем ширину изображений на 600 px.
Атрибут, как и srcset, не поддерживается в браузерах Android и Internet Explorer.
Нельзя создавать связь, если карта ( ) обернута в ссылку () или кнопку ( ).
ismap – связывает изображение с некоторой областью серверной карты. При нажатии на такую картинку, считываются координаты нажатия от левого верхнего угла и посылаются запросом на указанный в ссылке адрес. Для работы атрибута, изображение должно быть обернуто в ссылку (). Пример использования:
Помимо этого, поддерживает глобальные атрибуты class и id, а также напрямую встраивание стилей:
По желанию, большая часть персональных атрибутов может быть заменена соответствующими стилями.
Как вставить изображение (картинку) в таблицу?
Неважно, куда именно вы хотите вставить изображение на сайте, будь это таблица или, например, блок div, во всех случаях вставка осуществляется все по тому же принципу:
Как сделать изображение (картинку) ссылкой в HTML?
Для того чтобы сделать вашу картинку кликабельной, добавив ей функцию перехода к другой странице вашего (и не только) сайта, оберните ее в тег :
Помимо того, что ссылка может вести на другую страницу, она, например, может быть якорем. На этом наш урок работы с изображениями закончен.
Остались вопросы? Не стесняйтесь и задавайте их в комментариях под данной статьей.
Большое руководство по SEO для картинок: как оптимизировать изображения на сайте
В статье:
С точки зрения влияния на пользователей, страница с изображением лучше полотна текста. Картинки помогают лучше понять смысл, разбивают текстовые полотна на удобные для чтения блоки.
Со стороны поисковиков картинки важны для SEO. Они могут принести дополнительный трафик из Google и Яндекс Картинок.
По мнению специалиста технического SEO и реверс инжиниринга Деми Мурыча (Demi Murych), которое он озвучил в вебинаре на канале Михаила Шакина, с технической точки зрения картинки и видео у Google оказывают как минимум равное влияние, как любой другой контент. В статье мы использовали некоторые советы из этого вебинара. Еще полезные видео есть на Youtube-канале DemiMurych.
В материале разберем, как правильно оформить изображения для SEO, чтобы делать их полезными, не тормозить загрузку сайта и получать дополнительный трафик. Все рекомендации советуем не принимать на веру, а тестировать и проверять на своем опыте.
Требования к картинкам: количество, размеры, уникальность
Какие изображения подбирать для размещения на страницах сайта.
Количество: для SEO хватит одной картинки на странице?
Мы не встречали информации, что количество размещенных на странице картинок как-то влияет на позиции сайта. Если вы что-то об этом знаете, поделитесь в комментариях.
Но поисковая машина воспринимает картинку иначе — для нее это совокупность факторов, в которые входит в том числе и разные варианты этого изображения.
По мнению Деми Мурыча, исходя из такого понимания изображения, для выхода в топ желательно иметь минимум 12 картинок — точнее 12 вариантов одного изображения. Они показывают одно и то же, но имеют разные форматы и выполняют разные функции:
Проинформировать Google о существовании превью можно двумя способами:
После этого поисковик будет индексировать эти превью и использовать их в поисковой выдаче.
Качество и размеры: какие картинки размещать на сайте?
Когда говорят о качестве изображения, ориентируются на его разрешение. Это не совсем корректно, но сложно обозначить качество как-то по-другому. Обычно изображения с более высоким разрешением намного лучше выглядят и больше нравятся поисковикам.
Качество изображения должно быть выше, чем у конкурентов. Минимальная нижняя граница — 1080 px по высоте. Минимальный размер превью — 640 px в ширину. Стандартный минимальный набор для примера: картинка 1920 px в ширину и три превью для мобильных платформ — 640, 920 и 1220 px.
С другой стороны, если размещать большое количество огромных качественных изображений, можно обнаружить, что страницы падают в выдаче. Как это случилось в эксперименте Деми Мурыча: он разместил на страницах картинки размером около 20 000 px, в итоге все эти страницы начали проседать. Бот, индексирующий картинки, занял весь гигабитный канал, и другой бот для индексирования html не смог пробиться к проекту. Такая ситуация с большей вероятностью угрожает фотостокам, сайтам с портфолио дизайнеров или фотографов.
Уникальность: картинки должны быть своими или можно брать из интернета?
Заказывать фотосессии для каждого нового товара может быть накладно, как и иметь в штате дизайнера для иллюстраций к статьям. Остается использовать картинки из выдачи Яндекса и Google. Может ли это навредить сайту?
С точки зрения SEO
Компания «Reboot Online» провела эксперимент с фотографиями: они предположили, что если оригинальность изображений имеет для Google большую значимость, то при прочих равных сайты с уникальными картинками будут выше в выдаче, чем аналогичные сайты с дублями картинок.
Эксперимент длился три месяца, в результате позиции сайтов с уникальными картинками оказались выше, чем сайтов с дублями. В топе выдачи Google Картинок по выдуманному запросу появились только уникальные фото. Подробнее можно почитать в отдельном материале.
Эксперт по SEO Михаил Шакин считает, что на карточках товара можно использовать неоригинальные фото, поисковик относится к этому лояльно:
«По карточкам товаров совсем не обязательно, чтобы они были полностью уникальными. Часто карточки на многих сайтах наполняются одним и тем же содержимым с сайта производителя. В таких случаях поможет не уникализация, а грамотная внутренняя оптимизация в сочетании с хорошими поведенческими факторами и качественными ссылками».
Если есть возможность — сделайте оригинальные фотографии, закажите обложки и иллюстрации у дизайнеров. Если не получается фотографировать самостоятельно каждую позицию ассортимента, работайте над уникальностью карточки товара за счет текста описаний, обзоров и отзывов.
Бороться с воровством ваших изображений можно с помощью стандарта IPTC. Нужно прописать мета-теги внутри изображения с указанием авторства. Минимальное количество параметров, которые можно настроить на автозаполнение:
По опыту Деми Мурыча, если у вас скопируют такую картинку и не удалят теги, в глазах поисковика вы останетесь источником изображения и даже получите положительный эффект. Даже если теги удалили, вы останетесь источником, ведь у вас теги прописаны.
С точки зрения закона об авторском праве в РФ
Ответ на вопрос, можно ли использовать картинки чужого авторства, зависит от цели использования:
Обычно фотографии товаров можно взять у поставщика. В этом случае хозяин интернет-магазина и поставщик договариваются об использовании изображений на сайте и никто не имеет претензий. Но если у поставщика фотографий нет, нужно делать свою фотосессию или купить права на использование чужих картинок.
Был такой случай: разработчик сайта для мебельного магазина из Перми скачал фото аналогичных товаров у магазина мебели из Екатеринбурга. Владельцы магазина это заметили и подали в суд. Суд по интеллектуальным правам постановил выплатить компенсацию в размере 820 000 рублей за использование 82 фотографий. Компенсацию взыскали с владельца пермского магазина и администратора домена сайта, который выложил фото.
Если скачиваете картинку с фотостока, чтобы разместить на сайте, проверяйте перечень разрешений в лицензии на использование. Иногда люди заливают чужие фото на стоки, а настоящий автор не подозревает, что его картинка лежит в свободном доступе. Для проверки лучше сделать поиск по картинке и посмотреть, не выложена ли фотография на другом стоке у другого автора.
Подробно авторское право на изображения мы разбирали совместно с магистром частного права Дарьей Третьяковой: «Советы юриста: откуда брать картинки, чтобы не попасть под суд, и как защитить свои авторские права на изображения».
Если нужна фотография случайного человека, можно бесплатно сгенерировать портрет в сервисе с помощью нейросети, они выглядят очень натурально. Брать личные фотографии реальных людей можно только с их согласия, даже если они выложены в социальных сетях на всеобщее обозрение.
Портрет, сгенерированный нейросетью
Тематика: как содержание картинки влияет на SEO?
Картинка должна органично вписываться в контент страницы и дополнять его — это важно и пользователям, которые смотрят на иллюстрации, чтобы лучше понять тему, и поисковикам, которые научились распознавать, что находится на изображении.
К примеру, чтобы иллюстрация из статьи попала в сниппет мобильной выдачи, нужно подобрать изображение, по которой можно легко определить основной запрос страницы. Здесь удачное фото, кроссовки занимают большую часть картинки, находятся в центре и легко считываются.
Фото, которое попало в мобильную выдачу
Расположение: важно ли, в каком месте страницы находится картинка?
Самое важное изображение лучше поместить в верхней части страницы, как написано в Справке Google. Все, что находится в начале страницы, имеет больший вес, это касается и заголовков с ключевыми словами, и ссылок.
Как оптимизировать картинки правильно
Качественные изображения весят много. Нужно найти баланс между быстрой загрузкой картинки и хорошим качеством, чтобы пользователь видел четкое красивое фото, а сайт не тормозил из-за тяжелых иллюстраций.
Оптимизация картинок для ускорения загрузки — не разовое мероприятие. Если вы закажете сжатие картинок у стороннего фрилансера, он может скачать все картинки с вашего сайта, прогнать через сервисы для оптимизации, сжимающие файл, и закачать их обратно. Это сработает, но до тех пор, пока вы не загрузите новые неоптимизированные картинки, как и делали до этого.
Предлагаем самостоятельно разобраться в оптимизации изображений для сайта.
Как выбрать оптимальный формата файла картинки
От формата изображения зависит, как сильно можно сжать картинку при сохранении ее качества.
Некоторые оптимизаторы советуют отдавать предпочтение векторным форматам, поскольку векторные картинки не зависят от разрешения и масштаба и подходят для отображения в высоком разрешении. Если изображение состоит из геометрических фигур — логотип, схема, значок, текст, стрелка — используйте векторный формат SVG. Для фото и сложных иллюстраций нужно подобрать что-то другое.
Обычно для картинок используют универсальные JPEG, PNG и GIF. По статистике 2019 года JPEG используют намного чаще.
Статистика использования форматов картинок на 2019
Кроме этих форматов есть перспективные, но менее распространенные, на них остановимся подробнее.
Формат JPEG 2000
JPEG 2000 или jp2 представляет собой улучшенный JPEG. При сжатии картинка получается более четкая. Если сравнивать одинаковые по качеству картинки, файл JPEG будет весить больше, чем JPEG 2000. В отличие от JPEG, у нового формата при высоких степенях сжатия не появляются артефакты в виде решетки из блоков 8х8 px.
Тем не менее, из-за требовательности к памяти он не получил широкого распространения. По данным caniuse.com сейчас JPEG 2000 поддерживается небольшим количеством браузеров:
Поддержка JPEG 2000 в браузерах, 2020 год
Есть более распространенные форматы с хорошими показателями по сжимаемости.
Формат картинок WebP
WebP — формат графических изображений, появился в 2010 году как альтернатива PNG и JPEG. Поддерживает прозрачный фон и анимацию. Сжимает лучше — сохраняет такое же качество картинки при меньшем размере.
По результатам исследования 2019, формат WebP перспективнее PNG и JPEG по уровню сжатия с сохранением качества. Но на тот момент новый формат использовали немногие сайты, в первую очередь это было связано с тем, что его поддерживало не так много браузеров. Приходилось настраивать картинки под несколько вариантов.
В 2020 году по данным сайта caniuse.com WebP поддерживается такими версиями браузеров:
Поддержка WebP в браузерах, 2020 год
Их стало больше, но все равно есть пользователи на старых версиях, так что веб-мастер может настроить скрипт, который будет проверять браузер на поддержку формата WebP и отдавать его при наличии таковой. О настройке есть подробная статья в нашем блоге.
Формат картинок AVIF
AVIF (AV1 Still Image File) — формат изображений, основанный на библиотеке для сжатия кадров AV1.
В этом примере при приемлемом качестве фотографии размер файла в формате WebP составляет почти половину размера JPEG, а размер AVIF — меньше половины размера WebP.
Пример сжатия картинок
По данным caniuse.com формат по умолчанию поддерживается в новом Chrome, но остальные браузеры пока с ним не работают:
Поддержка AVIF в браузерах, 2020 год
AVIF перспективный формат, но пока лучше использовать тот же WebP, его поддерживает большее количество браузеров.
Как настроить выбор формата картинки браузером
Только вам решать, стоит ли создавать несколько версий одной картинки ради экономии. Обычно советуют настраивать через тег picture, к примеру:
В этом случае браузер загрузит первое изображение, которое поддерживает. Если браузер не понимает picture, то по умолчанию для него указан img.
Но по мнению Деми Мурыча, следует забыть про тег picture, если всерьез заниматься технической оптимизацией сайта. Если начать формировать с тегом picture то же самое, что через тег img, это приведет к минимум трехкратному увеличению узлов в DOM-дереве на каждое изображение. Каждый узел DOM-дерева — это расход памяти и замедление скриптов, а у многих сайтов верхняя граница DOM-дерева уже выше оптимального значения в 1500 узлов.
Другие способы настроить выбор формата описаны в статье на примере WebP.
Как сжать изображение
Сделать картинку легче можно, если ее оптимизировать: сжать, уменьшить размер, цветовую палитру, удалить метаданные. Но жертвовать качеством изображения не стоит, нужно найти компромисс между размером файла и артефактами, возникающими при сжатии.
Уменьшить размер
Если на странице размещена маленькая картинка, которая не должна увеличиваться по клику, нет смысла загружать ее в огромном разрешении.
Уменьшить размер можно с помощью инструментов, например:
Уменьшить палитру
Можно обработать изображение, уменьшив количество используемых цветов. Картинка будет хранить меньше битов на пиксель и весить будет тоже меньше.
При такой оптимизации оттенки могут передаваться не так четко, но если картинка в небольшом размере, это будет незаметно. Насколько сильно можно уменьшить палитру, зависит от конкретной картинки. Фотографии с небом, волнами, градиентами требуют больше цветов, чтобы отобразить все переходы оттенков.
Один из способов — уменьшить «битовую глубину» изображения. Так выглядит изображение PNG с уменьшением палитры:
Слева направо: 32 бита (16 миллионов цветов), 7 бит (128 цветов) и 5 бит (32 цвета)
Конвертировать GIF-файл в видео
Если анимация длинная, она может много весить. Такой GIF-файл есть смысл конвертировать в видео.
Обычно выбирают стандартный формат MP4. Есть относительно новый WebM, в котором файлы весят меньше, но этот формат поддерживают не все браузеры:
Поддержка WebM в браузерах, 2020 год
Иногда такая смена формата оправдана: в этом примере файл GIF весил 3,7 МБ, отконвертированный в MP4 стал весить 551 КБ, а версия WebM составила всего 341 КБ.
Сравнение веса разных форматов анимации
Примеры инструментов, чтобы конвертировать GIF в видео — FFmpeg, Online-convert, Convertio, Videotogiflab.
Удалить лишние метаданные
После сохранения картинки в графических редакторах, например, Adobe Illustrator, у нее остается XML-разметка с метаданными. Они не нужны для работы, можно удалить.
У фотографий также можно удалить EXIF — информацию о геоданных, дате съемки, фотокамере.
Сжать файл онлайн
Как настроить отзывчивые изображения
Отзывчивые картинки — те, которые правильно отображаются на разных устройствах с разными разрешениями экрана.
К тегу src можно указать еще два атрибута: srcset и sizes.
Атрибут srcset содержит массив изображений с описанием их размеров по ширине или плотности пикселей. Браузер встречает такое изображение и сам выбирает, картинку какого размера из предложенных показать пользователю. Это зависит от условий, в которых юзер находится: типа устройства, разрешения экрана, скорости интернета.
Четкое правило, которое работает и для Яндекса, и для Google:
Браузер всегда показывает то, что в srcset, а бот всегда индексирует то, что в src.
Поэтому в атрибут src нужно класть самую большую качественную картинку, а в атрибут srcset несколько небольших превью. Так в индекс попадет хорошая картинка максимального качества. К тому же это дает независимость от java-скриптов.
Как настроить ленивую загрузку изображений
На баллы в PageSpeed Insights влияет не качество и объем изображений, а то, какую они создают нагрузку. Ее можно сгладить с помощью реализации отложенной загрузки — Lazy load.
Отложенная или ленивая загрузка изображений означает, что картинки будут загружаться не сразу как только пользователь зашел на страницу, а по мере надобности — по клику на превью или по доскроллу до картинки, в зависимости от настройки.
При этом важно сделать так, чтобы поисковик проиндексировал не заглушку или превью, а самую большую и качественную картинку.
У тега img есть атрибут decoding. Для реализации отложенной загрузки по умолчанию стоит указывать атрибут decoding=async, он сигнализирует браузеру, что изображение может быть загружено асинхронно и не должно влиять на основной поток рендера страницы.
Пример правильного кода для Lazy load с атрибутом decoding=async:
Тег img на второй строке содержит базовую разметку для правильного lazy load:
Если вы используете отложенную загрузку и хотите получать органический трафик, нужна такая верстка.
Еще один момент: в начале загрузки, пока картинка не появилась на экране, браузер пропускает место, где она должна появиться, и рендерит контент ниже. Он не знает, какого размера область нужно оставить под картинку. Параллельно он подгружает картинку, узнает о размерах и вписывает ее в страницу. Из-за этого верстка может сдвигаться.
Сдвиг макета из-за загрузки баннера сверху
Такие скачки макета во время загрузки измеряет характеристика CLS — Cumulative Layout Shift. Сейчас она интересна Google, поскольку входит в относительно новую метрику Core Web Vitals, оценивающую пользовательский опыт.
Верстальщики должны отводить подходящую область под изображение, указывая его точные размеры или пропорции, чтобы макет не дергался при асинхронной загрузке.
Проверить скорость загрузки страницы и еще множество параметров можно в Анализе сайта. Сервис проведет аудит сайта по 70+ параметрам, найдет ошибки и даст подсказки. В нем же можно проверить и внутренние страницы сайта, а также следить за позициями в поисковиках.
Фрагмент анализа сайта
Как заполнять SEO-атрибуты изображений
Поисковые системы воспринимают картинку как тег img с атрибутом src, содержащим само изображение, и атрибутом alt, в котором заключено описание картинки. Еще у изображения может быть прописан title с дополнительным описанием.
Не стоит использовать тег figure для картинок, поскольку figure сигнализирует поисковику, что нужно воспринимать этот объект в отрыве от контента страницы.
Атрибут alt
Alt — это описание изображения. Alt дает поисковику полезную информацию о тематике и релевантности изображения. Он должен содержать текстовое описание того, о чем картинка, что на ней изображено. Alt должен быть таким, что если удалить картинку со страницы и поставить вместо нее текст атрибута, он органично впишется в контекст.
Как заполнять alt для картинки?
Каким должен быть alt изображения:
Alt картинки, дублирующий заголовок страницы, сигнализирует поисковым ботам, что картинку нужно проигнорировать, она нужна для декорации. Если это новости и нет цели попасть в Google Картинки, можно так и сделать. Если хочется получить трафик из Google Картинок, лучше сделать изображение частью контента, дать понять ботам, что оно помогает раскрыть смысл.
Неудачные варианты:
Нет текста в alt — img src=»https://pr-cy.ru/news/p/sobaka.jpg»-
Переспам — img src=»https://pr-cy.ru/news/p/sobaka.jpg» alt=»собака щенок собачка маленькая собачка ретривер лабрадор волкодав сеттер пойнтер корм для собак дешевый корм для собак еда для собак»
Удачный вариант:
Описание картинки, из которого понятно, что на ней происходит — img src=»https://pr-cy.ru/news/p/sobaka.jpg» alt=»собака породы лабрадор приносит палку хозяину»
Вариант заполнения alt
Что делать для мультиязычных сайтов, советует Джон Мюллер:
«Использовать одну и ту же картинку (с одного URL) мы разрешаем. Что касается атрибута Alt, он должен быть локализован, то есть переведен в соответствии с языком страницы, где будет использоваться изображение».
Атрибут title
Title — тоже описание картинок, но для пользователей. Оно выводится при наведении курсора на изображение. В title лучше писать короткую фразу, поясняющую, что происходит на картинке. Но вообще заполнение этого атрибута не обязательно — на SEO он не влияет, может разве что быть полезным читателям.
Заполненный title
Название файла
В Справке Google написано, что название файла тоже важно, поэтому нужно переименовывать файлы перед загрузкой. Название может выполнять ту же функцию, что и заголовки с подписями, так что вариант sobaka.jpg лучше IMG00023.JPG, поскольку передает содержание картинки.
Название должно быть написано на английском языке или в транслитерации, вместо пробелов и нижних подчеркиваний используйте дефисы.
Итак, оптимизированное изображение, которое будет полезно для SEO вашего сайта, должно быть качественным и крупным, для мобильного просмотра нужны отдельные превью. Картинки лучше загружать асинхронно, сжать файл с максимальным сохранением качества и подбирать формат под браузер. Тег alt должен содержать ключевые слова и быть релевантным текстовому фрагменту, который окружает картинку, также важно название файла.
Дополните советы в комментариях: как вы оптимизируете картинки для своих проектов?