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

Время чтения: 4 мин

14 мая 2020 г.

Оптимизация изображений наTilda

1. Уменьшаем скорость загрузки изображений.

Google: «более половины пользователей покидают ресурс, если страница загружается дольше трех секунд».

Большинство посетителей любого сайта ожидают его быстрой загрузки и, если эта перспектива не оправдывается, закрывают страницу ещё до появления на ней информации. Об этом мы также писали в статье: "Делать сайт на конструкторе Tilda или собирать его только из турбо страниц?" Чем больше времени потребуется на просмотр содержания ресурса, тем выше будет количество отказов. Вот почему к скорости сайта требуется такое пристальное внимание.

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

Оптимальные вес и формат изображения.

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

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

Размер элемента с вашей фотографией в Tilda можно узнать, высчитав его точно или примерно по сетке: одна колонка в ней составляет 60 px, а расстояние между ними – 40.

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

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

До оптимизации

После оптимизации

Внешне разница совершенно не ощутима

Антикинотеатр для тебя и твоих друзей

Проведите время наедине с собой и своими друзьями

Один из самых простых сервисов, который может обработать до 20 изображений за раз. Максимальный размер файла при этом не должен быть выше 5 Мб

Оптимизатор картинок, который может сжать изображения JPEG и PNG до минимально размера с потерями или без потерь качества. За раз возможно также обработать до 20 изображений.

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

Сервис для сжатия фото с тремя 3 режимами сжатия. Он также позволяет сжать все изображения на странице, а потом скачать их одним архивом за раз.

1. tinypng.com

2. Optimizilla

3. Compressor.io

4. Imagify.io

Онлайн-сервисы для сжатия изображений.

Антикинотеатр для тебя и твоих друзей

Проведите время наедине с собой и своими друзьями

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

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

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

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

1. Gift of speed

2. GTmetrix

3. developers.google.com

Онлайн-сервис для улучшения качества изображения

1. icons8.com

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

2. Оптимизируем изображения для поисковой выдачи

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

Название картинок.

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

Подпись под картинкой.

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

Должна быть разница.

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

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

Alt-текст

Пример alt-тега: "Доставка продуктов в Красноярске"

На Tilda задать alt тег в стандартном блоке можно через меню «Контент».

Для галереи: откройте меню «Контент и рядом с изображением выберете пункт «Текст». Впишите тег в поле Image alt for SEO»

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

Учитывайте, что в большинстве блоках можно задавать alt-тег, но всё же не во всех. Важно также понимать, что этот тег обычно не прописывается для элементов дизайна вроде иконок и другого рода «декора».

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

Автор: Позднякова Анна

14 мая 2020 г.

мы вас заинтересовали?

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

Главная

Статьи для веб-дизайнеров

Оптимизация изображений на Tilda