Картинки 500х500 пикселей
Более современный формат, например,webP, который сжимает изображения без потерь качества и детализации. Запись напоминает обычный пост с картинкой, но вмещает в себя дополнительный рекламный текст. Добавляет текст, типы логотипов и водяные знаки изображения. Бесплатно проанализируем ключевой пользовательский сценарий например, покупку товаров или заказ услуги , оценим навигацию и каналы коммуникации с клиентом. Вы узнаете, почему снизилась конверсия и пора ли делать редизайн.
Название файла ничем не поможет вашим посетителям, так как они его никогда не увидят разве что захотят скачать вашу инфографику. Но правильное и релевантное название — это способ предоставить поисковым системам немного дополнительной информации о содержимом страницы.
Если у вас интернет-магазин и вы размещаете много фотографий товаров, можно пойти еще дальше. Допустим, вы продаете мужские кроссовки Nike.
Вместо стандартного сгенерированного названия фото стоит сделать расширенное название файла с ключевиком. Подумайте о том, как пользователи ищут товары на вашем сайте. Какие шаблоны названий они используют при поиске?
Люди, которые ищут эйр максы, могут вбивать поисковый запрос по-разному:. Посмотрите, какие паттерны преобладают просто проверьте это в аналитике. Возьмите тот шаблон, который встречается чаще всего, и используйте его как основу при создании названий для картинок.
Пропишите правила переименования картинок для контент-менеджера, если хотите оптимизировать их для продвижения интернет-магазина. Если же вы не хотите настолько углубляться, просто убедитесь, что название описывает содержимое картинки и содержит релевантное ключевое слово.
При выборе типа файла для картинок как и при всей работе с картинками важно соблюдать баланс между качеством и размером. С другой стороны, высококачественная картинка в высоком разрешении может увеличить время загрузки страницы — вырастет процент отказов. Нужен баланс. Нет правильного или идеального формата для изображений. Все зависит от типа картинки и как вы планируете ее использовать. Их поддерживают все браузеры и поисковые системы.
Для интернет-магазинов оптимальный вариант — JPEG. Этот формат дает лучшее качество при наименьшем размере файла. Также рекомендуется использовать JPEG для больших фотографий или иллюстраций. PNG используйте, если нужно сохранить прозрачность фона. Остальные форматы не поддерживают эту возможность.
Для логотипов и иконок используйте векторный SVG. Например, менять их размер без потери качества. Этот формат сохраняет высокое качество при еще меньших размерах файла. Конвертировать фотографию в WebP можно с помощью Squoosh.
Правда, есть нюанс — формат WebP не поддерживается браузером Safari. Стоит учитывать, что Google использует время загрузки страницы как один из факторов ранжирования. Для интернет-магазинов, где на одной странице размещаются десятки а то и сотни изображений товаров, оптимальный размер изображения — до 70 КБ. Иллюстрации в статьях либо в других разделах сайтов не каталоге могут быть тяжелее, но не стоит заходить далеко и вывешивать картинки весом в десятки мегабайт.
Изображение нужно сжать максимально, насколько это возможно сделать без видимой потери качества. Картинка должна оставаться четкой и неразмытой. Неоптимизированная фотография. Вес после оптимизации — ,2 Кб. Вес оптимизированной фотографии почти в 9 раз меньше. Если вы не мастер Фотошопа и не купили лицензионную версию , можно воспользоваться одним из сервисов для сжатия картинок. ImageOptim — десктопная программа для Mac.
Позволяет оптимизировать картинки без потери качества. Программа удаляет из файла картинки метаданные: местоположение GPS, серийный номер камеры, данные о снимке и т. Compressor — бесплатный онлайн-сервис. Правда, в сервис нельзя загружать картинки весом более 10 Мб. Бесплатно можно одновременно загружать до 20 файлов весом до 5 Мб каждый. Compressjpeg — сервис для пакетной загрузки и оптимизации изображений до 20 файлов одновременно. ImageOptimizer — онлайн-сервис, с помощью которого можно уменьшить вес файла с помощью сжатия, а также уменьшить размеры изображения, задав ограничения по максимальной ширине и высоте.
После оптимизации изображений проверьте скорость загрузки страницы с помощью Google PageSpeed Insights. Используйте уменьшенный вариант изображения превью для отображения по умолчанию.
Просмотр изображения в полном размере — по клику на картинке. Уменьшенная версия изображения в карточке товара, размер — х пикселей. Вес файла — 6,5 Кб. Изображение можно посмотреть в большем размере — х пикселей. Вес этого файла — 26,1 Кб. Особенно важно оптимизировать вес картинок для просмотра с мобильных устройств. Количество мобильного трафика уже превышает десктопный, и поисковые системы в первую очередь проверяют, оптимизирован ли сайт под мобайл.
Это негативно может сказаться на ранжировании страницы в мобильной выдаче. Об оптимизации веса изображений мы уже рассказали, а сейчас поговорим о целесообразности загрузки больших изображений.
К примеру, вы загрузили картинку в размере х пикселей, а на странице она должна отображаться в размере х пикселей. Несмотря на то, что фактически показывается картинка небольшого размера, для ее отображения большое изображение должно загрузиться полностью.
Если таких картинок на странице несколько — это может существенно повлиять на скорость загрузки. Создавайте изображения в том размере, в котором они должны отображаться на сайте. Размер можно изменить в Фотошопе.
Укажите нужное значение пикселей. Измените только одно значение например, ширину. Значение высоты автоматически подстроится, сохраняя пропорции.
Изменение размеров позволяет в раз уменьшить вес файла с картинкой. Если не можете использовать Фотошоп, можно воспользоваться онлайн редакторами например, PIXLR или сервисами по обработке картинок. Например, ресайз картинок от Slide.
В карточках новостей картинки отображаются в уменьшенном виде. Смотрим код — изображение меньшего размера:. Совет: если у вас в статье размещена большая детализированная инфографика или сложный скриншот, их также стоит разместить с превью и открывать оригинал по клику.
Это не только снизит скорость загрузки, но и будет удобнее для посетителей, которые смогут рассмотреть все детали на большой картинке.
Адаптивность — не роскошь, а необходимость.
Важно, чтобы картинки корректно отображались на любых устройствах: от смартфонов до retina-дисплеев с высоким разрешением. Для этого размер картинок должен соответствовать размерам экрана устройства, с которого пользователь будет их просматривать. Другой пользователь использует iMac с retina-дисплеем. На таком дисплее картинка будет отображаться с существенной визуальной потерей качества. Что можно сделать: загрузите несколько вариантов исходного изображения в разных размерах и показывайте для экранов с разным разрешением картинки соответствующих размеров.
Используйте для этого атрибут srcset. С его помощью можно указать в элементе несколько версий одного изображения для экранов разных размеров. В исходном коде страницы указаны ссылки на картинки разного размера для адаптации под различные устройства.
Поисковые системы рекомендуют всегда заполнять атрибуты title и alt. Особенно это важно для страниц, контент которых состоит по большей части из изображений. Title предоставляет дополнительную информацию о картинке. Текст, указанный с помощью этого атрибута, показывается при наведении курсора на изображение:. При наведении курсора на картинку всплывает текст из атрибута title. Атрибут alt — текстовая альтернатива для изображений. Используется для того, чтобы описать содержимое или суть картинки.
Если браузер по какой-то причине не может загрузить или отрисовать картинку — он покажет текст, который указан в этом атрибуте.
Картинка не грузится, но, по-крайней мере, можно понять о чем она. Если картинка не загрузится, браузер покажет описание и пользователь сможет хотя бы понять, что он должен был увидеть.
Полезно для ранжирования. Используйте ключевые слова в атрибутах. Это поможет поисковым роботам понять, что изображено на картинке, и затем предлагать ее в ответ на релевантный запрос пользователей в поиске по картинкам.
Альтернативное описание может служить как анкор для внутренней ссылки, если изображение — это ссылка на другую страницу сайта. Заполняйте атрибуты alt для каждого изображения особенно это касается фотографий товаров. Если вы продаете товары с номерами моделей или серийными номерами, используйте их в атрибутах alt. Хороший пример того, как правильно заполнять атрибут alt, приводит Google в справке для вебмастеров:.
Чтобы убедиться, что поисковые роботы проиндексируют все изображения на страницах сайта, следует указать их в Sitemap-файле. Это поможет поисковым роботам найти те изображения, которые иначе они бы не обнаружили например, если изображения загружаются с помощью JavaScript.
Для картинок можно создать отдельный XML-файл или обновить существующую карту сайта. Подробнее о Sitemap-файлах для изображений: справка Google , справка Яндекс.
Для сайтов на WordPress есть специальный плагин Google XML Sitemap for Images , который автоматически создает Sitemap-файл для всех изображений, которые вы загружаете на сайт.
Так выглядят подписи к картинкам. Кстати, то, что вы сейчас читаете — тоже подпись. Почему важно добавлять подписи? Потому что люди обращают на них внимание при быстром сканировании страницы. Подписи изображений также хорошо влияют на SEO.
Одним из главных критериев является хорошее изображение и цветопередача, чтобы на фото был хорошо виден сам товар и его основные качества; на фотографии не должно быть ассортимента товара; товар на изображении должен быть на переднем плане. Его вид не должен быть заблокирован или закрыт другими предметами; товар на фотографии должен иметь корректную форму, не растянут или не сжат по одной из сторон, не сплюснут; фотография товара должна иметь прямое отношение к характеристикам и описанию товара; недопустимо использование коллажей в качестве заглавного фото; товар может быть сфотографирован под любым углом, если его вид спереди будет чётко виден.
Фон фотографий рекомендуем белый или прозрачный фон. Также дополнительные фото могут быть с изображением аксессуаров к товару, но эти фото с аксессуарами не должны вводить покупателей в заблуждение — покупатель четко должен понимать, что входит в комплект поставки товара, который продается; для одежды допустим фон на улице при условии, что в кадр не попали автомобили с номерами, рекламные щиты и т.
Будущему продавцу. Начало работы. Знакомство с BombaSeller. Как начать продавать. Экспорт прайс-листа товаров. Категории и бренды товаров. Термины и определения. Для юридических лиц. Личный кабинет. Управление аккаунтом. Смена владельца аккаунта. Менеджер аккаунта.
Настройки профиля. Безопасность аккаунта. Закрытие аккаунта. Обратная связь. Связь с менеджером. Блокировка аккаунта. Туда входят рекомендации к цветам, текстовым элементам, толщине линий, расположению элементов и другие моменты. Здесь мы рассмотрим два важных требования: формат и размер изображения для печати на кружке. Размеры кружки для печати стандартного объема мл: диаметр — 80 мм, высота — 93 мм. Для полной запечатки макет должен иметь параметры х85 мм.
Также можно разделить область печати пополам и нанести два одинаковых изображения, которые будут полноценно просматриваться с обеих сторон кружки. Если говорить о размере картинки для печати на кружке в пикселях, то он должен быть не менее х пикселей. Для получения такого качества нужны изображения, выполненные на профессиональную камеру. Фото с мобильного телефона, как правило, не удовлетворяют этим требованиям. Как и мини-фото или аватары размером х пикселей — при увеличении они дают размытую картинку, не подходящую для печати.
Размер макета для кружки для сублимации должен быть в натуральную величину — один в один с фактическим размером будущего изображения на изделии. При этом важно предусмотреть отступы от краев — минимум 2 мм. Чтобы изображение эстетично смотрелось на кружке, нужно соблюдать пропорции.
