Оптимизация изображения: 10 советов, которые необходимо знать

1. Что такое оптимизация изображения?
2. Вот как можно оптимизировать изображения для Интернета:
3. 2. Тщательно оптимизируйте ваши атрибуты alt
4. 3. Мудро выбирайте размеры изображения и углы изделия
5. Предупреждение о предоставлении больших изображений
6. 4. Уменьшите размер файла ваших изображений
7. Так что ты можешь сделать?
8. Как оптимизировать изображения без фотошопа
9. Насколько большими должны быть файлы изображений?
10. 5. Выберите правильный тип файла
11. 6. Оптимизируйте свои эскизы
12. 7. Используйте изображения файлов Sitemap.
13. 8. Остерегайтесь декоративных изображений
14. 9. Соблюдайте осторожность при использовании сетей доставки контента (CDN)
15. 10. Проверьте свои изображения
16. Сохранение красивых фотографий функциональными

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

Что такое оптимизация изображения?

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

Следующие вопросы когда-нибудь оставляли тебя почесывать голову?

• Почему, когда я выполняю поиск изображений в Google, мои фотографии продуктов никогда не отображаются?
• Нужно ли добавлять атрибуты alt к моим изображениям?
• В чем разница между JPEG, GIF и PNG? Когда я должен использовать один над другим?

Сегодня у вас наконец будут ответы, потому что мы углубляемся в эти и другие вопросы.

Вот как можно оптимизировать изображения для Интернета:

1. Назовите ваши изображения описательно и простым языком.
2. Тщательно оптимизируйте ваши атрибуты alt.
3. Мудро выбирайте размеры изображения и углы изделия.
4. Уменьшите размер файла ваших изображений.
5. Выберите правильный тип файла.
6. Оптимизируйте свои эскизы.
7. Используйте изображения сайтов.
8. Остерегайтесь декоративных изображений.
9. Будьте осторожны при использовании сетей доставки контента (CDN).
10. Проверьте свои изображения.

1. Назовите ваши изображения описательно и простым языком

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

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

Возьмите это изображение, например.

Вы можете использовать общее название, которое ваша камера присвоила изображению (например, DCMIMAGE10.jpg). Однако было бы гораздо лучше назвать файл 2012-Ford-Mustang-LX-Red.jpg.

Подумайте, как ваши клиенты ищут товары на вашем сайте. Какие шаблоны имен они используют при поиске? В приведенном выше примере покупатели автомобилей могут искать такие термины, как:

• 2012 красный Ford Mustang LX
• Ford Mustang LX Red 2012
• Красный Ford Mustang LX 2012

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

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

Проверьте это Вопрос & от Moz, чтобы понять важность стратегического присвоения имен файлам изображений на вашем сайте. Это может определенно улучшить вашу SEO на странице, но также может помочь вашим страницам и изображениям занять более высокий рейтинг на страницах результатов поисковой системы (SERP).

Академия Shopify: SEO для начинающих

Эксперт по предпринимательству и Shopify Касандра Кэмпбелл (Casandra Campbell) делится своей трехэтапной SEO-структурой, чтобы помочь вашему бизнесу найти результаты поиска в Google.

Зарегистрируйтесь бесплатно

2. Тщательно оптимизируйте ваши атрибуты alt

Атрибуты Alt - это текстовая альтернатива изображениям, когда браузер не может правильно их отобразить. Они также используются для веб-доступности. Даже при отображении изображения при наведении на него вы увидите текст атрибута alt (в зависимости от настроек вашего браузера).

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

Давайте посмотрим на исходный код атрибута alt.

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

Вот несколько простых правил для атрибутов alt:

• Опишите ваши изображения простым языком, как вы делали для имен файлов изображений.
• Если вы продаете товары с номерами моделей или серийными номерами, используйте их в атрибутах alt.
• Не заполняйте ваши атрибуты alt полным ключевых слов (например, alt = "Ford Mustang Muscle Car купить сейчас дешево лучшая цена в продаже").
• Не используйте атрибуты alt для декоративных изображений. Поисковые системы могут наказать вас за чрезмерную оптимизацию.

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

3. Мудро выбирайте размеры изображения и углы изделия

Это обычная практика, чтобы показать несколько точек зрения вашего продукта. Возвращаясь к примеру с Ford Mustang, вам не хотелось бы показывать только один снимок автомобиля, особенно если вы пытаетесь его продать. Было бы в ваших интересах показать снимки:

• Интерьер.
• Сзади, особенно этот воздушный спойлер.
• Оправы.
• Двигатель ... это Мустанг в конце концов.

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

• 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> с использованием атрибута alt для: alt = "2012 Ford Mustang LX Красная кожаная отделка салона"
• 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> с использованием атрибута alt для: alt = "2012 Ford Mustang LX Красный воздушный спойлер заднего вида"

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

Предупреждение о предоставлении больших изображений

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

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

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

4. Уменьшите размер файла ваших изображений

Учти это:

Итак, если у вас есть изображения, которые медленно «пускают слюни» вниз по экрану и требуют более 15 секунд для загрузки? Ну, вы можете поцеловать этого потенциального клиента до свидания!

Так что ты можешь сделать?

Когда клиент заходит на ваш сайт, загрузка может занять некоторое время, в зависимости от размера ваших файлов. Чем больше размер файла, тем больше времени требуется для загрузки веб-страницы. (Примечание: если вы продавец Shopify, мы автоматически сжимаем изображения, поэтому это не должно быть проблемой для вас.)

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

Один из способов уменьшить размер файла изображения - использовать команду «Сохранить для Web» в Adobe Photoshop. При использовании этой команды вы хотите настроить изображение на минимально возможный размер файла, не забывая при этом о качестве изображения.

• Качество: найдите это в верхнем правом углу (т.е. 70).

• Формат файла: найдите его в верхнем правом углу (например, JPEG).

• Оптимизация: найдите этот флажок в верхнем правом углу (т.е. Оптимизировано).

• Цвет: найдите этот флажок в верхнем правом углу (например, Преобразовать в sRBG).

• Уменьшение и резкость: найдите это в нижнем правом углу (то есть W: и H :).

• Ожидаемый размер файла: найдите его в нижнем левом углу (т. Е. 136,7 КБ).

Вы также можете выбрать «Экспортировать как».

Как оптимизировать изображения без фотошопа

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

Другие впечатляющие онлайн инструменты для редактирования изображений являются:

• PicMonkey был описан экспертами как «потрясающе отличный инструмент для редактирования фотографий».
• Pixlr Это супер удобный и поставляется со 100% бесплатным приложением для вашего смартфона, так что вы можете редактировать на ходу.
• Canva еще один довольно продвинутый онлайн-редактор изображений.

Наконец, всегда есть GIMP , GIMP - это бесплатное программное обеспечение для редактирования изображений с открытым исходным кодом, которое можно запускать в Windows, Mac или Linux. Он может делать все, что может делать Photoshop, но, как правило, немного более грубый. Но для бесплатного приложения для редактирования изображений вы не можете победить его.

Насколько большими должны быть файлы изображений?

Для изображений электронной коммерции рекомендуется использовать размер файла изображения ниже 70 КБ. Это может быть трудно время от времени, особенно для больших изображений.

5. Выберите правильный тип файла

Существует три распространенных типа файлов, которые используются для публикации изображений в Интернете: JPEG, GIF и PNG.

Давайте посмотрим на три типа файлов и как они влияют на одно и то же изображение:

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

Изображения GIF (.gif) имеют более низкое качество, чем изображения JPEG, и используются для более упрощенных изображений, таких как значки и декоративные изображения. GIF-файлы также поддерживают анимацию, как я уверен, вы знаете.

Что касается оптимизации изображений, GIF-файлы отлично подходят для тех простых и простых изображений на веб-странице (которые содержат всего несколько цветов). Но для сложных изображений и фотографий GIF не всегда так привлекательны. Это особенно верно для больших изображений.

Мы можем избежать использования GIF на изображении MacBook выше, потому что фотография достаточно мала, чтобы GIF работал хорошо.

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

Обратите внимание, что размер файла PNG-24 в три раза превышает размер файла, чем PNG-8. Вот почему вы должны быть очень осторожны с PNG.

Вот крайний пример, где размер файла изображения был постоянным на уровне 24 КБ для всех трех типов файлов:

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

Вот несколько советов, которые следует помнить при выборе типов файлов:

• В большинстве случаев в электронной коммерции JPEG будет вашим лучшим выбором. Они обеспечивают наилучшее качество при минимальном размере файла.
• Никогда не используйте GIF для больших изображений продуктов. Размер файла будет очень большим, и нет хорошего способа уменьшить его. Используйте GIF-файлы только для миниатюр и декоративных изображений.
• PNG могут быть хорошей альтернативой как JPEG, так и GIFS. Если вы можете получать фотографии только в формате PNG, попробуйте использовать PNG-8 вместо PNG-24. PNG превосходно выглядят как простые декоративные изображения из-за их чрезвычайно маленького размера файла.

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

6. Оптимизируйте свои эскизы

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

Миниатюры великолепны, но будьте осторожны; они могут быть тихими убийцами. Жертва? Скорость загрузки вашей страницы. Миниатюры обычно представлены в критических точках во время процесса покупки. Если они препятствуют быстрой загрузке страниц вашей категории, вы можете потерять потенциального клиента. (Примечание: продавцам Shopify не нужно беспокоиться об оптимизации эскизов, поскольку мы позаботимся об этом за вас.)

Так что ты можешь сделать?

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

7. Используйте изображения файлов Sitemap.

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

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

Вы можете вставить следующую строку в ваш файл robots.txt, показывая путь к вашей карте сайта:

Карта сайта: http://example.com/sitemap_location.xml

Или вы можете отправить карту сайта в Google используя консоль поиска.

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

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

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

8. Остерегайтесь декоративных изображений

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

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

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

Вот несколько советов по уменьшению размеров файлов ваших декоративных изображений:

• Для изображений, которые составляют границы или простые рисунки, сделайте их PNG-8 или GIF. Вы можете создавать красивые изображения размером всего несколько сотен байт.
• Если возможно, используйте CSS для создания цветных областей вместо изображений. Используйте как можно больше стилей CSS для замены любых декоративных изображений.
• Внимательно посмотрите на это большое фоновое изображение в стиле обоев. Это могут быть огромные файлы. Уменьшите их как можно больше, не ухудшая качество изображения.

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

9. Соблюдайте осторожность при использовании сетей доставки контента (CDN)

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

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

Размещая свои изображения в CDN, вы, скорее всего, удаляете изображение из своего домена и помещаете его в домен CDN. Поэтому, когда кто-то ссылается на ваш образ, он фактически ссылается на домен CDN.

Поэтому лучшие практики:

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

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

10. Проверьте свои изображения

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

• Протестируйте количество изображений продуктов на странице. Поскольку время загрузки является проблемой для некоторых не размещенных сайтов электронной коммерции, вы можете обнаружить, что уменьшение количества изображений на странице приведет к увеличению числа кликов и продаж. Также возможно, что предоставление большого количества изображений на странице улучшит пользовательский опыт и приведет к увеличению продаж. Единственный способ выяснить это - проверить это.
• Проверьте, какие углы предпочитают ваши клиенты. Вы можете увидеть повышение лояльности клиентов, предоставив мнения, которые хотят видеть ваши клиенты. Отличный способ понять это - опросить ваших клиентов о том, что им понравилось больше всего при просмотре снимков вашего продукта. Съемка и общение с вашими клиентами - это отличная привычка. Тем не менее, проверьте путем тестирования.
• Проверьте, сколько списков товаров должно быть на страницах категорий: 10, 20, 100 товаров? Проверьте количество продуктов, перечисленных на страницах категорий, чтобы увидеть, что лучше всего подходит для ваших клиентов.

Сохранение красивых фотографий функциональными

Теперь вопросы о ваших изображениях электронной коммерции не заставят вас часами ворочаться.

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

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

Вы еще не создали свой магазин?

Нет проблем. Начните бесплатную 14-дневную пробную версию Shopify - кредитная карта не требуется!

Похожие

Комментарии