Как сохранить фото в Фотошоп и ускорить свой сайт
Есть у вас проблемы с медленной загрузкой сайта? Довольно часто блогеры не задумываются над тем как правильно сохранять фотографии в Фотошоп для Web. А, между прочим, картинки и плагины делят первое место, как первопричина заторможенности в работе сайта. Сегодня своими секретами оптимизации фото поделится Лисицына Юлия, автор сайта «Фотошоп для блогера».
Чем плоха медленная работа блога или сайта? Прежде всего влиянием на поведенческий фактор посетителей. По статистике, лишняя секунда ожидания на 7% снижает конверсию на сайте, на 11% уменьшает просмотры страниц и на 16% снижает желание клиентов ещё раз заглянуть к вам в гости.
Большое фото может увеличить время загрузки вашего ресурса на 5%. Как же можно решить проблему не потеряв в качестве визуального контента.
Если вы хотите оптимизировать фото и загрузить картинку на блог, прежде необходимо сделать две вещи: выбрать правильный формат для фотографии и сделать минимальный разумный размер.
Напоминаю, оптимальный размер фотографии для публикации на сайте — не более 100 Кб. Для миниатюры сайта — не более 50 Кб.
Если для публикации выбрана цветная фотография, лучше сохранять в формате JPEG. Если картинка маленькая или транспарентная (полупрозрачная) — оптимально применить PNG формат. Различия форматов — в возможностях цветопередачи изображения.
Для получения минимального размера, используйте разумную компрессию (сжатие) картинки, т.е получение минимального размера без сильной потери качества.
Несмотря на обилие программ по обработке фотографий в данном обзоре я воспользуюсь Фотошоп и расскажу как должным образом сохранить фото для Web.
Данный протокол подойдет для всех версий Фотошоп ( от CS4 — точно).
Шаг 1 Открываем фото
На самом деле это шажочек. Открываем нашу картинку в Фотошоп. Меню «Файл» (File), подраздел «Открыть» (Open), и выбираем откуда открыть наше фото.
Шаг 2 Уменьшаем фото
Далее, уменьшим размер фото до необходимого для корректной публикации на вашем сайте.
Для сайта Блоги Мам — это 500 pix
Заходим в меню «Изображение» (Image) и выбираем подраздел «Размер изображения» (Image size). В открывшемся окошечке, вводим необходимый нам размер по ширине. По автоматическим настройкам, высота фото уменьшится пропорционально.
Шаг 3 Возвращаем резкость
В результате уменьшения, фото станет немного размытым. Это убирается в один клик.
Меню «Фильтры» (Filtres), подменю «Усиление резкости» (Sharpen) — «Контурная резкость» (Unsharp Mask). И вводим значения как на фото, они оптимальны.
Вы зрительно увидите, что фотографии вернулась потерянная резкость.
Шаг 4 Сохранение фотографии в Фотошоп
Заходим в меню «Файл» (File), подраздел «Сохранить для Web» (Save for Web). В открывшемся для вас окне обращаем внимание на выделенные мною фрагменты.
Под цифрой 1, ещё раз акцентирую внимание на выборе формата вашего фото: GPEG или PNG.
Под цифрой 2, выбор качества изображения и, соответственно, его размера.
Под цифрой 3, акцентирую внимание на выборе цветового пространства RGB. Но оно у вас будет стоять по умолчанию.
Остаётся нажать кнопку «Сохранить» и опубликовать фотографию на вашем сайте. Хочу отметить, что использованное мною фото изначально «весило» 51Мб и имело размер 5000 pix по ширине. Конечное фото — 99 Кб и 500 pix по ширине.
Вот так, всего в 4 шага, вы можете самостоятельно и грамотно сохранить фотографию в Фотошоп и ускорить работу вашего сайта без вмешательства со стороны.
Автор текста Лисицына Юлия.
Источник фото: Unsplash.com
Как использовать Photoshop Save for Web Tool
В качестве графического дизайнера или веб-дизайнера вам может быть предложено предоставить готовые к Интернету изображения, например фотографии для веб-сайта или рекламного баннера. Инструмент «Сохранить для Интернета» — это простой способ подготовить файлы JPEG для Интернета, помогая с компромиссом между размером файла и качеством изображения.
В этом уроке вы сохраняете изображения JPEG. Инструмент «Сохранить для Интернета» также создан для сохранения файлов GIF, PNG и BMP.
Что делает графическую Web-Ready?
Большинство готовых к использованию в Интернете графических изображений имеют общие характеристики:
- Разрешение — 72 dpi.
- Цветовой режим — RGB.
- Файлы уменьшаются в размерах для более быстрой загрузки веб-страниц.
01 из 07
Открыть изображение
Чтобы воспользоваться инструментом «Сохранить для Интернета», откройте изображение в Photoshop.
Нажмите файл> открыто, найдите изображение на своем компьютере и нажмите открыто, Для практических целей фото работает хорошо, хотя любой тип изображения будет делать.
Измените размер фотографии на небольшой размер, который вы можете использовать на веб-сайте. Для этого нажмите Образ> Размер изображения, введите новую ширину в поле Ширина и выберитеПиксели, В этом случае введите 400 пикселей и нажмите Хорошо.
02 из 07
Откройте инструмент «Сохранить для Интернета»
Предположите, что кто-то попросил вас поставить фотографию шириной 400 пикселей, готовую к публикации на веб-сайте.
Нажмите файл > Сохранить для Интернета для открытия Сохранить для Интернета диалоговое окно. (В более поздних версиях Photoshop путь файл > экспорт > Сохранить для Интернета.)
Просмотрите различные настройки и инструменты в окне.
03 из 07
Настроить сравнение
В верхней части Сохранить для Интернета Окно представляет собой ряд вкладок с метками оригинал, оптимизированный, 2-Up, а также 4-Up, Нажимая эти вкладки, вы можете переключаться между представлением исходной фотографии, оптимизированной фотографией с использованием настроек «Сохранить для Интернета» или сопоставлением двух или четырех версий вашей фотографии.
выберите 2-Up сравнить исходную фотографию с оптимизированной, показывая бок о бок копии изображения.
04 из 07
Установить предварительный просмотр
Нажмите на фотографию слева, чтобы выбрать ее. выберите оригинал от Предустановленная меню с правой стороны Сохранить для Интернета окно (если оно еще не выбрано). Это дает предварительный просмотр оригинальной, неотредактированной фотографии с левой стороны.
05 из 07
Настройка оптимизированного предварительного просмотра
Нажмите на фотографию справа, чтобы выбрать ее. выберите Высокий JPEG от Предустановленная меню. Теперь вы можете сравнить оптимизированную фотографию справа, которая будет вашим окончательным файлом, с оригиналом слева.
06 из 07
Изменение качества JPEG
Наиболее важным параметром в правом столбце является Качественный значение.
По мере снижения качества изображение выглядит более грязным, но размер файла снижается, а файлы меньшего размера — более быстрые загрузки веб-страниц.
Попробуйте изменить качество на 0 и обратите внимание на разницу в фотографиях слева и справа, а также меньший размер файла, который находится под фотографией.
Цель состоит в том, чтобы найти счастливую среду между размером файла и качеством. Качество от 40 до 60 обычно зависит от ваших потребностей. Попробуйте использовать предварительно установленные уровни качества (JPEG Medium, например), чтобы сэкономить время.
07 из 07
Сохранить изображение
Как только вы удовлетворены фотографией справа, нажмите Сохранить кнопка. Сохранить оптимизированный как откроется окно. Введите имя файла, найдите нужную папку на своем компьютере и нажмите Сохранить, Теперь у вас есть оптимизированная, готовая к работе фотография.
Как исправить ошибку Adobe Photoshop «Сохранить для Интернета» (5 способов)
«Сохранить для Интернета» в Photoshop означает, что ваши изображения будут оптимизированы для использования в Интернете. Вот почему многие веб-дизайнеры, графические дизайнеры, создающие дизайн для Интернета, используют эту команду в Photoshop, чтобы лучше отображать свою работу.
При выборе Сохранить для Интернета можно экспортировать изображения в несколько различных форматов, таких как файлы JPEG, PNG, GIF и BMP.
Содержание
- Как сохранить для Интернета в Photoshop
- 5 быстрых способов исправить ошибку «Сохранить для Web» в Photoshop
- 1. Перезапустить Photoshop
- 2. Изменить размер изображения/холста
- 3. Сбросить настройки Photoshop
- 4. Обновление программного обеспечения/системы
- 5. Сохранить как JPEG
Как сохранить для Интернета в Photoshop
Прежде чем выяснять, что пошло не так, убедитесь, что вы сделали все правильно.
Давайте быстро пройдемся по шагам, как использовать «Сохранить для Интернета» в Photoshop.
Примечание: скриншоты взяты из версии Adobe Photoshop CC 2021 для Mac. Windows или другие версии могут выглядеть иначе.
Шаг 1: Перейти к верхнему меню Файл > Экспорт > Сохранить для Интернета (устаревший) .
Появится всплывающее окно. Я знаю, что это может показаться немного сложным, но на самом деле вам нужно сделать всего несколько вещей.
Шаг 2: Выберите формат, который вы хотите сохранить, и другие настройки изменятся соответствующим образом. Например, я выбрал JPEG.
Вы увидите, что над окном изображения есть опции 2-вместе и 4-вместе . Нажмите на любой из них, он покажет вам сравнение качества изображения.
Вы можете настроить качество изображения и сравнить результаты. Смотрите качество изображения, скорость и размер в нижней части изображений.
Шаг 3 (необязательно): Измените размер изображения. Он покажет, сколько процентов составляет новый размер по сравнению с исходным.
Шаг 4: Если внешний вид вас устраивает, нажмите Сохранить . Назовите изображение и выберите, где вы хотите его разместить, и нажмите 9.0005 Сохранить .
5 быстрых способов исправить ошибку «Сохранить для Интернета» в Photoshop
Если вы выполнили те же шаги, но все равно столкнулись с проблемой, ознакомьтесь с некоторыми распространенными решениями ниже.
1. Перезапустите Photoshop
Типичным решением является перезапуск Photoshop. Сохраните изображение в формате .psd перед перезапуском на случай потери исходного файла.
2. Изменить размер изображения/холста
Проверьте, больше ли ваше изображение, чем холст, попробуйте установить одинаковый размер изображения и холста в верхнем меню Изображение > Размер изображения .
3. Сбросить настройки Photoshop
Перейдите в верхнее меню и выберите Photoshop > Настройки > Общие . Нажмите кнопку Сбросить настройки при выходе .
4. Обновление программного обеспечения/системы
Проверьте версию Photoshop и, если она устарела, перейдите в приложение Creative Cloud и обновите ее до последней версии.
5. Сохранить как JPEG
Фактически, в более новых версиях Photoshop, когда вы сохраняете изображение в формате JPEG, его можно использовать для Интернета. Если вы хотите уменьшить размер, вы можете изменить размер в верхнем меню Изображение > Размер изображения .
При использовании приведенных выше решений ошибка «Сохранить для Интернета» должна быть исправлена. Если у вас есть другие решения, не стесняйтесь поделиться 😉
О Джун
Джун — опытный графический дизайнер, специализирующийся на дизайне брендов.
Photoshop — это основной инструмент, который она использует каждый день вместе с другими программами Adobe для своей творческой работы.
10 советов по оптимизации изображений для вашего веб-сайта электронной коммерции (2022 г.)
В мире мгновенных вознаграждений для бизнеса крайне важно обеспечить постоянное взаимодействие с клиентами с помощью быстро загружаемого веб-сайта электронной коммерции. Исследования показывают, что если сайт электронной коммерции загружается медленнее, чем ожидалось, посетители с меньшей вероятностью совершат покупку. Часто основными виновниками медленной работы сайта являются большие недостаточно оптимизированные изображения.
В то время как качество изображения, безусловно, важно для создания отличной фотографии продукта, оптимизация изображения является настоящим секретом создания успешного интернет-магазина. Изучение того, как оптимизировать изображения, может принести большую прибыль: от сокращения времени загрузки сайта до улучшения вашего бренда и привлечения покупателей, просматривающих изображения Google.
Ярлыки ✂️
- Что такое оптимизация изображений?
- Зачем мы оптимизируем изображения?
- Как оптимизировать изображения для Интернета
- Инструменты оптимизации изображения
- Сохраняйте функциональность фотографий с оптимизацией изображения
- Часто задаваемые вопросы по оптимизации изображения
Что такое оптимизация изображения?
Оптимизация изображений заключается в максимально возможном уменьшении размера файлов ваших изображений без ущерба для качества, поэтому время загрузки вашей страницы остается низким. Речь также идет о поисковой оптимизации изображений, то есть о том, чтобы ваши баннеры и изображения продуктов занимали высокие позиции в Google и других поисковых системах изображений.
Оптимизация изображений означает, что ваши изображения будут безупречно выглядеть на ПК и мобильных устройствах. И что они не мешают веб-производительности.
Целью оптимизации изображений является создание высококачественных изображений с наименьшим размером файла.
- Размер файла изображения (JPEG, PNG или WEBP)
- Уровень сжатия изображения
- Высота и ширина изображения
Найдя баланс между этими тремя факторами, вы можете уменьшить размер изображения и повысить производительность веб-сайта.
Почему мы оптимизируем изображения?
Изображения вносят наибольший вклад в общий размер страницы, из-за чего страницы загружаются медленнее. Данные из HTTP Archive показывают, что неоптимизированные изображения составляют в среднем 75% от общего веса веб-страницы. Это может негативно сказаться на производительности вашего сайта.
Оптимизация изображений помогает уменьшить вес вашей веб-страницы и является основным принципом хорошего веб-дизайна электронной коммерции, что приводит к следующим преимуществам:
Повышение скорости веб-сайта Оптимизация изображений для Интернета и мобильных устройств предназначена для ускорения загрузки веб-страниц.
Они создают лучший опыт просмотра для покупателей. При задержке скорости вашей страницы всего на две секунды показатель отказов может увеличиться на 103%.
Скорость страницы — это скорость загрузки контента на вашей странице. Его часто описывают как:
- Время загрузки страницы или время, необходимое для отображения контента на вашей странице.
- Время до первого байта , количество миллисекунд, которое требуется вашему браузеру для получения первого байта информации с вашего веб-сервера.
Google предположил, что скорость сайта является одним из сигналов, используемых его алгоритмом для ранжирования страниц. Исследования Moz показывают, что Google может специально измерять время до первого байта, когда учитывает скорость страницы. Медленная страница означает, что поисковые системы просматривают меньше страниц с их краулинговым бюджетом, что может негативно сказаться на вашей индексации.
Скорость страницы важна для удобства посетителей .
Люди могут обнаруживать задержки до 1/10 секунды. Все, что дольше этого, не кажется «мгновенным». Задержки в одну секунду достаточно, чтобы прервать мыслительный процесс человека.
BBC обнаружили, что на каждую дополнительную секунду времени загрузки страницы уходит 10% пользователей.
Страницы с более длительным временем загрузки, как правило, имеют более высокий показатель отказов и меньшее среднее время на странице. Сокращение времени загрузки страницы даже на одну секунду улучшит взаимодействие с пользователем. Улучшенный пользовательский опыт и взаимодействие с вашим сайтом положительно влияют на рейтинг в поисковых системах, что может повысить вовлеченность, конверсию и удержание клиентов.
Повышение эффективности поиска Оптимизированные изображения помогают как читателям, так и поисковым системам лучше понять ваш веб-сайт и сделать ваш контент видимым в Интернете. Последние данные показывают, что изображения возвращаются для 32% поисковых запросов в Google.
Оптимизация изображений может помочь ранжировать ваши изображения в поиске картинок Google, что может привлечь больше трафика на ваш сайт и создать ваш бренд.
Более того, визуальный поиск становится все более важным, как видно из Google, представляющего новую функцию поиска, которая объединяет изображения и текст в один запрос. Около 62% потребителей поколения Z и миллениалов хотят визуального поиска больше, чем любой другой новой технологии.
Как оптимизировать изображения для Интернета
1. Используйте краткие и прямые имена изображенийОчень легко загружать изображения на ваш веб-сайт и сохранять имена файлов по умолчанию, назначенные вашей камерой. Но когда дело доходит до SEO-оптимизации изображений, важно использовать релевантные ключевые слова, чтобы повысить рейтинг вашей веб-страницы в поисковых системах.
Создание описательных имен файлов с большим количеством ключевых слов имеет решающее значение для оптимизации изображений.
Возьмем, к примеру, это изображение.
Вы можете использовать общее имя, которое ваша камера присвоила изображению (например, DCMIMAGE10.jpg). Однако было бы гораздо лучше назвать файл 2012-Ford-Mustang-LX-Red.jpg.
Подумайте о том, как ваши клиенты ищут товары на вашем веб-сайте. Какие шаблоны именования они используют при поиске? В приведенном выше примере покупатели автомобилей могут искать такие слова, как:
- Красный Ford Mustang LX 2012 года .
- Ford Mustang LX Красный 2012
- Красный Ford Mustang LX 2012
Просмотрите аналитику своего веб-сайта, чтобы узнать, какие шаблоны ключевых слов используются вашими клиентами. Определите наиболее распространенные шаблоны именования, которые они используют, и примените эту формулу к процессу именования файлов изображений.
Если вы не собираетесь использовать данные, просто используйте релевантные и полезные ключевые слова при именовании изображений (т.
е. старайтесь быть описательными).
Ознакомьтесь с этими вопросами и ответами от Moz, чтобы понять важность стратегических имен файлов изображений на вашем сайте. Это определенно может улучшить SEO на странице, но также может помочь вашим страницам и изображениям занять более высокое место на страницах результатов поисковой системы (SERP).
Атрибуты alt — это текстовая альтернатива изображениям, когда браузер не может их правильно отобразить. Они также используются для веб-доступа. Даже когда изображение отрендерится, если вы наведете на него курсор, вы увидите текст атрибута alt (в зависимости от настроек вашего браузера).
Атрибут alt также повышает SEO-ценность вашего веб-сайта. Добавление соответствующих атрибутов alt, которые включают релевантные ключевые слова, к изображениям на вашем веб-сайте, может помочь вам лучше ранжироваться в поисковых системах. На самом деле, использование атрибутов alt, вероятно, является лучшим способом отображения ваших продуктов электронной коммерции в изображениях Google и веб-поиске.
Давайте посмотрим на исходный код атрибута alt.
Приоритетом номер один, когда дело доходит до оптимизации изображений, является заполнение атрибута alt для каждого изображения продукта на вашем сайте.
Вот несколько простых правил для атрибутов alt:
- Описывайте свои изображения простым языком, точно так же, как вы делали это для имен файлов изображений.
- Если вы продаете товары с номерами моделей или серийными номерами, используйте их в атрибутах alt.
- Не набивайте атрибуты alt ключевыми словами (например, alt=»Ford Mustang Muscle Car, купите сейчас дешево по лучшей цене со скидкой»).
- Не используйте атрибуты alt для декоративных изображений. Поисковые системы могут оштрафовать вас за чрезмерную оптимизацию.
Наконец, время от времени проверяйте работоспособность. Просмотрите источник своих веб-страниц и проверьте, правильно ли заполнены ваши атрибуты alt. Вы будете удивлены тем, что вы упускаете, когда движетесь со скоростью предпринимательства.
Обычной практикой является показ вашего продукта в нескольких ракурсах. Возвращаясь к примеру с 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 Red Rear View Air Spoiler»
Ключевым моментом здесь является добавление описания к вашему базовому атрибуту alt, чтобы потенциальные пользователи, выполняющие поиск, попадали на ваш веб-сайт.
Если вы сделаете дополнительную работу, Google вознаградит вас поисковиками.
Теперь вы можете предоставить своим посетителям большие изображения. Это может обеспечить отличный пользовательский опыт, но будьте осторожны, чтобы не переборщить.
Что бы вы ни делали, не размещайте самое большое изображение на своей веб-странице, а просто уменьшите размеры с помощью исходного кода. Это увеличит время загрузки страницы из-за большего размера файла, связанного с изображением.
Вместо этого используйте изображение меньшего размера на странице и предложите посетителям возможность просмотра увеличенного изображения во всплывающем окне или на отдельной странице. Совет : узнайте, как сделать изображения продуктов масштабируемыми в вашей теме с помощью масштабирования изображений jQuery.
4. Измените размер изображенийОбратите внимание:
- Почти 50% потребителей не будут ждать даже трех секунд, пока загрузится сайт электронной коммерции.
- Во всем мире среднее время загрузки страницы фактически увеличивается.
- Amazon обнаружила, что если ее страницы замедлятся всего на одну секунду, она потеряет 1,6 миллиарда долларов в год.
- Google использует время загрузки страницы в качестве фактора ранжирования в своем алгоритме.
Если у вас есть изображения, которые медленно «стекают» по экрану и загружаются более 15 секунд? Ну, вы можете поцеловать этого потенциального клиента на прощание!
Итак, что вы можете сделать?
Когда клиент заходит на ваш сайт, загрузка всего может занять некоторое время, в зависимости от размера ваших файлов. Чем больше размер файла, тем дольше загружается веб-страница. (Примечание. Если вы являетесь продавцом Shopify, ваша тема Shopify автоматически сжимает изображения, так что это не должно быть для вас проблемой.)
Если вы можете уменьшить размер файлов изображений на своей веб-странице и увеличить скорость загрузки страницы, меньше людей, посещающих ваш сайт, переходят по ссылке.
Существует множество онлайн-инструментов, которые можно использовать для редактирования изображений. Adobe, например, предлагает бесплатное приложение для редактирования изображений для смартфонов и планшетов: Photoshop Express. Этот инструмент не обладает всеми возможностями настольной версии Adobe Photoshop, но он охватывает все основы редактирования изображений и не требует больших затрат.
Вот некоторые другие впечатляющие онлайн-инструменты для редактирования изображений:
- PicMonkey был описан экспертами как «потрясающе отличный инструмент для редактирования фотографий».
- PIXLR очень удобен в использовании и поставляется со 100% бесплатным приложением для вашего смартфона, так что вы можете редактировать на ходу.
- Canva — еще один довольно продвинутый онлайн-редактор изображений.
Наконец, всегда есть GIMP. GIMP — это бесплатное программное приложение для редактирования изображений с открытым исходным кодом, которое можно запускать в Windows, Mac или Linux.
Он может делать все, что может делать Photoshop, но, как правило, немного неуклюже. Но для бесплатного приложения для редактирования изображений вы не можете победить его.
Для изображений, предназначенных для электронной торговли, рекомендуется стараться, чтобы размер файла изображения не превышал 70 килобайт. Иногда это может быть сложно, особенно для больших изображений.5. Выберите правильный формат изображения
Существует три распространенных типа файлов, которые используются для публикации изображений в Интернете: JPEG, GIF и PNG.
Давайте посмотрим на эти три типа и то, как они влияют на одно и то же изображение:
JPEG (или .jpg) является де-факто стандартным типом файла изображения для Интернета. Изображения JPEG могут быть значительно сжаты, что приводит к получению качественных изображений с небольшим размером файла. На изображении выше формат JPEG обеспечивает достойное качество при небольшом размере файла.
Изображения в формате GIF (.gif) имеют более низкое качество, чем изображения в формате JPEG, и используются для более простых изображений, таких как значки и декоративные изображения. GIF также поддерживают анимацию.
Что касается оптимизации изображений, GIF-файлы отлично подходят для тех простых изображений на веб-странице, которые содержат всего несколько цветов.
Изображения PNG становятся все более популярными в качестве альтернативы GIF. PNG поддерживает гораздо больше цветов, чем GIF, и они не ухудшаются со временем при повторном сохранении, как это происходит с JPEG. Несмотря на то, что формат файлов PNG начинает использоваться все чаще, размеры файлов все еще могут быть намного больше, чем у изображений JPEG.
Обратите внимание, что размер файла изображения PNG-24 более чем в три раза превышает размер файла PNG-8. Вот почему вам нужно быть очень осторожным с PNG.
Вот крайний пример, где размер файла изображения поддерживается постоянным и составляет 24 килобайта для всех трех типов файлов:
Как видите, JPEG здесь явный победитель.
GIF и PNG ухудшаются по качеству, чтобы оставаться с таким же малым размером файла.
Вот несколько советов, которые следует помнить при выборе типов файлов:
- В большинстве случаев JPEG будет лучшим форматом изображения для электронной коммерции. Они обеспечивают наилучшее качество изображения при наименьшем размере файла.
- Никогда не используйте GIF для больших изображений товаров. Размер файла будет очень большим, и нет хорошего способа его уменьшить. Используйте GIF-файлы только для миниатюр и декоративных изображений.
- PNG могут быть хорошей альтернативой как JPEG, так и GIF. Если вы можете получать фотографии продуктов только в формате PNG, попробуйте использовать PNG-8 вместо PNG-24. PNG превосходны в качестве простых декоративных изображений из-за их чрезвычайно маленького размера файла.
Большинство программ для редактирования изображений могут сохранять изображения в любом из описанных выше форматов файлов.
6.
Оптимизируйте миниатюры Многие сайты электронной коммерции используют миниатюры изображений, особенно на страницах категорий. Они быстро демонстрируют продукты, не занимая слишком много места.
Миниатюры — это здорово, но будьте осторожны: они могут стать тихим убийцей. Жертва? Скорость загрузки вашей страницы. Миниатюры обычно отображаются в критических точках процесса покупки. Если они мешают быстрой загрузке страниц ваших категорий, вы можете потерять потенциального клиента. (Примечание: продавцам Shopify не нужно беспокоиться об оптимизации миниатюр, так как мы позаботимся об этом за вас.)
Итак, что вы можете сделать?
- Максимально уменьшите размеры файлов эскизов. Возможно, здесь стоит отказаться от качества в пользу меньшего размера файла. Помните, что кумулятивное воздействие ваших миниатюр будет иметь огромное влияние на время загрузки вашей страницы.
- Измените текст атрибута alt , чтобы не дублировать текст, который вы использовали бы для больших версий одного и того же изображения.
На самом деле, сделайте свой альтернативный текст совершенно другим. Последнее, что вам нужно, это миниатюра, которая индексируется вместо большого изображения. Можно было бы полностью исключить альтернативный текст.
Если на вашем сайте используются галереи Javascript, всплывающие окна с изображениями или другие «яркие» способы улучшить общее впечатление от покупок, карты сайта с изображениями помогут привлечь внимание Google к вашим изображениям.
Поисковые роботы не могут сканировать изображения, которые не указаны специально в исходном коде веб-страницы. Таким образом, чтобы сканеры знали о неопознанных изображениях, вы должны указать их местоположение в карте сайта изображения.
В файл robots.txt можно вставить следующую строку, указывающую путь к карте сайта:
Карта сайта: http://example.com/sitemap_location.xml
Или вы можете отправить карту сайта в Google с помощью консоли поиска.
У Google есть много рекомендаций по публикации изображений, которые могут помочь вашему сайту занять более высокое место в поисковой выдаче. Кроме того, вы можете использовать карты сайта Google, чтобы предоставить Google больше информации об изображениях на вашем веб-сайте, что может помочь Google найти больше ваших изображений, чем самостоятельно.
Использование карты сайта не гарантирует, что ваши изображения будут проиндексированы Google, но это, безусловно, положительный шаг к оптимизации изображений. В инструментах Google для веб-мастеров есть много предложений по правильному форматированию карты сайта.
Важно добавить определенные теги для всех ваших изображений. Вы также можете создать отдельную карту сайта для исключительно изображений. Важно добавить всю необходимую информацию, используя определенные теги, к любым картам сайта, которые у вас есть или которые вы создадите. Следуйте этим рекомендациям, которые предлагает Google при создании карты сайта с информацией об изображениях.
Веб-сайты часто содержат множество декоративных изображений, таких как фоновые изображения, кнопки и рамки. Все, что не связано с продуктом, скорее всего, можно считать декоративным изображением.
Хотя декоративные изображения могут добавить веб-странице большую эстетическую привлекательность, они могут привести к большому общему размеру файла и медленной загрузке. Поэтому вы можете рассмотреть возможность более внимательного изучения своих декоративных изображений, чтобы они не мешали вашему веб-сайту превращать посетителей в клиентов.
Вы хотите проверить размеры файлов всех декоративных изображений на вашем сайте и использовать шаблон, который минимизирует размеры файлов.
Вот несколько советов по уменьшению размера файлов ваших декоративных изображений:
- Для изображений, которые составляют границы или простые узоры, сделайте их PNG-8 или GIF. Вы можете создавать красивые изображения размером всего несколько сотен байт.
- Если возможно, используйте CSS для создания цветных областей вместо изображений. Максимально используйте стили CSS для замены любых декоративных изображений.
- Внимательно посмотрите на это большое фоновое изображение в стиле обоев. Это могут быть огромные файлы. Максимально уменьшите их, не испортив качество изображения.
Один трюк, который вы можете использовать, чтобы уменьшить размер фонового изображения, заключается в том, чтобы вырезать середину фонового изображения и сделать его однотонным или даже прозрачным. Это может существенно уменьшить размер файла.
9. Будьте осторожны при использовании сетей доставки контента (CDN) Продавцам Shopify на самом деле не нужно беспокоиться об этом, поскольку мы являемся хостинговым решением, но другим следует уделять пристальное внимание. Сети доставки контента (CDN) — это место для размещения изображений и других медиафайлов. Они могут увеличить скорость загрузки вашей страницы и помочь решить проблемы с пропускной способностью.
Единственный недостаток — обратные ссылки. Как вы, возможно, знаете, обратные ссылки имеют решающее значение для SEO, и чем больше у вас обратных ссылок, тем лучше ваш сайт отображается в поисковых системах.
Размещая изображения на CDN, вы, скорее всего, удаляете изображение из своего домена и размещаете его на домене CDN. Поэтому, когда кто-то ссылается на ваше изображение, он на самом деле ссылается на домен CDN.
Поэтому помните об этих рекомендациях:
- То, что что-то «модное», не означает, что вы должны следовать за ним, как овца. Сначала определите, действительно ли это лучший шаг для вашего бизнеса.
- Если на вашем веб-сайте каждый месяц совершается множество операций, CDN, скорее всего, является хорошей идеей, поскольку она может помочь решить проблемы с пропускной способностью.
- Если прямо сейчас ваш сайт посещают только тысячи посетителей в день, скорее всего, ваша текущая ситуация с хостингом может справиться с нагрузкой.
Существуют способы обойти проблемы оптимизации изображений, связанные с CDN, но сначала обязательно обратитесь к профессионалу за помощью в разработке стратегии.
10. Проверьте свои изображенияВесь смысл оптимизации ваших изображений заключается в том, чтобы помочь увеличить вашу прибыль. Мы говорили об уменьшении размера файлов и о том, как заставить поисковые системы индексировать ваши изображения, но как насчет тестирования изображений, чтобы увидеть, что приводит к большему количеству клиентов?
- Проверьте количество изображений продукта на странице. Поскольку время загрузки является проблемой для некоторых сайтов электронной коммерции, не размещенных на хостинге, вы можете обнаружить, что уменьшение количества изображений на странице повысит рейтинг кликов и продажи. Также возможно, что размещение большого количества изображений на странице улучшит взаимодействие с пользователем и приведет к увеличению продаж. Единственный способ узнать это — протестировать.
- Проверьте, какие ракурсы предпочитают ваши клиенты. Вы можете заметить повышение лояльности клиентов, предоставив представления, которые хотят видеть ваши клиенты. Отличный способ выяснить это — опросить своих клиентов о том, что им больше всего понравилось при просмотре снимков вашего продукта. Опросы и общение с вашими клиентами — отличная привычка, в общем. Тем не менее, проверить путем тестирования.
- Проверьте, сколько списков продуктов должно быть на страницах категорий. Десять, 20, 100 товаров? Проверьте количество продуктов, которые вы перечисляете на страницах категорий, чтобы увидеть, что лучше всего подходит для ваших клиентов.
Бесплатное руководство: фотография продуктов своими руками
Узнайте, как делать красивые фотографии товаров с ограниченным бюджетом, из нашего бесплатного подробного видеоруководства.
Получите наше руководство по красивой фотографии товаров своими руками, доставленное прямо на ваш почтовый ящик.
Почти готово: пожалуйста, введите свой адрес электронной почты ниже, чтобы получить мгновенный доступ.
Мы также будем присылать вам новости о новых образовательных руководствах и историях успеха из новостной рассылки Shopify. Мы ненавидим СПАМ и обещаем обеспечить безопасность вашего адреса электронной почты.
Спасибо за подписку. Вскоре вы начнете получать бесплатные советы и ресурсы. А пока начните создавать свой магазин с бесплатной 3-дневной пробной версией Shopify.
Инструменты оптимизации изображений
Теперь, когда вы знаете некоторые рекомендации по оптимизации изображений, давайте рассмотрим некоторые инструменты оптимизации изображений и подключаемые модули, которые вы можете использовать для своего веб-сайта.
AVADA SEO:Image Optimizer AVADA SEO:Image Optimizer — одно из лучших приложений в Shopify App Store. Он имеет более 1100 отзывов и поддерживает рейтинг 4,9.из 5 звезд. Это работает, чтобы сэкономить ваше время и усилия при оптимизации изображений для вашего магазина.
Одним щелчком мыши вы можете настроить оптимизацию изображения на автопилоте с помощью AVADA.
Отличные функции включают в себя:
- Автоматические теги alt для каждого изображения на странице продукта, странице коллекции и сообщениях в блоге
- Высококачественное сжатие изображений для увеличения скорости загрузки
- Оптимизированные в один клик структурированные метаданные Google
- Интеграция Google Search Console для отслеживания показателей
- Генератор карты сайта, чтобы поисковые системы могли легко читать ваш сайт
TinyIMG SEO, Оптимизатор скорости и изображений — еще один отличный инструмент оптимизации для владельцев магазинов Shopify. Он автоматически оптимизирует изображения и загружает их в ваш магазин. Вы можете восстановить исходное изображение в любое время и оптимизировать изображения вручную.
TinyIMG также предлагает:
- Изменение размера изображения
- Возможность устранения технических проблем с SEO и скоростью
- Перенаправление неработающей ссылки
- JSON ЛД
- Живая поддержка
- Автоматическая оптимизация изображений
TinyPNG — самый популярный инструмент для оптимизации изображений в Интернете.
Он использует интеллектуальные методы сжатия с потерями для уменьшения размера файла изображения для вашей веб-страницы (WEBP), файлов JPEG и PNG. Вы можете сжимать изображения для своих приложений или магазина, а также сжимать анимированные изображения.
API TinyPNG автоматически изменяет размеры изображений для миниатюр, удаляя все ненужные части и добавляя дополнительный фон. Он доступен в виде плагина WordPress, если вы запускаете свой сайт на WordPress.
Сохраняйте функциональность фотографий с оптимизацией изображений
Вы знаете некоторые стратегии SEO для изображений, чтобы фотографии ваших продуктов попадали в результаты поиска изображений Google. Вы знаете, как в полной мере использовать атрибуты alt, и вы знаете разницу между типами файлов и когда выбирать каждый вариант. Теперь пришло время отправиться на ваш сайт и начать оптимизировать ваши изображения.
Тем не менее, оптимизация изображения сложна, и мы только коснулись ее поверхности, поэтому не стесняйтесь оставлять любые вопросы, которые у вас могут возникнуть, в комментариях ниже.
