Загадка 25: Как оптимизировать фотографии в интернет-магазине?

1. Шаг 1 - Инструменты для анализа интернет-магазина
2. Спорная страница Speed ​​Insights
3. Тест скорости сайта Pingdom
4. Google Analytics
5. Webspeed Intensys Tool
6. Шаг 2: Оптимизация изображений
7. Выбор формата сохраняемого файла
8. Выбор опции «Сохранить для Интернета»
9. Используйте инструменты для оптимизации фотографий
10. Изменить размер фото
11. Сжатие фотографий
12. Оптимизация изображения - это искусство и наука
13. Шаг 3: Важные детали
14. суммирование

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

Шаг 1 - Инструменты для анализа интернет-магазина

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

Спорная страница Speed ​​Insights

Это инструмент Google, который измеряет производительность веб-сайтов в контексте их просмотра на компьютерах или мобильных устройствах.
Я назвал их контр-универсальными, потому что они подобраны по-другому - некоторые люди думают, что это стоит использовать, другие заставляют чувствовать, что это не работает точно так, как мы ожидаем. Несмотря на название, предполагающее, что анализ в первую очередь зависит от скорости загрузки страницы, оказывается, что Page Speed ​​Insights не проверяет скорость загрузки страницы. Статья, опубликованная порталом, хорошо иллюстрирует эту проблему. WP ROCKET ,

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

Тест скорости сайта Pingdom

По адресу tools.pingdom.com Вы найдете другой инструмент, который анализирует скорость загрузки страницы и указывает на несколько дополнительных сведений, которые помогут вам оценить ваш магазин (например, какой процент протестированных сайтов быстрее / медленнее, чем ваш). У нас также есть предварительный просмотр важности фотографий в контексте скорости загрузки страницы среди всех оцениваемых факторов .

Google Analytics

Google Analytics дает вам представление о в данных о скорости загрузки сайта. Существует несколько отчетов, которые позволят вам определить, какие веб-сайты влияют на время загрузки вашего сайта.
Определите, где возникает проблема.

Выберите вкладку «Отчеты»> «Выбрать поведение»> «Скорость сайта».

Webspeed Intensys Tool

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

Шаг 2: Оптимизация изображений

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

Выбор формата сохраняемого файла

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

• Файлы в стиле фото должны быть сохранены в формате JPEG . Это гарантирует хорошее качество по отношению к размеру фотографии. Хорошо работает с сайтами электронной коммерции. JPEG также хороши для снимков экрана.
• Стоит выбрать формат PNG , если картинка имеет небольшую цветовую палитру и в качестве альтернативы использовать JPEG. Преимущество этого формата - меньшая потеря качества по сравнению с JPEG, но, к сожалению, размер файла теряется. Поэтому они тяжелее, и может оказаться, что ими не выгодно пользоваться, лучше остаться с форматом JPEG.
• Если изображение содержит изображение, состоящее из геометрических фигур, рассмотрите возможность преобразования его в векторный формат ( SVG ).
• GIF- файлы можно использовать для небольшой графики (10 x 10 пикселей) или цветовой палитры, ограниченной 3 цветами, значками, а также для изображений с анимацией.

Вы не должны использовать форматы BMP или TIFF.

Следующая диаграмма иллюстрирует алгоритм выбора соответствующего формата для файла, который будет сохранен.

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

Выбор опции «Сохранить для Интернета»

Графические программы имеют опции для сохранения файла для Интернета, и стоит использовать эти опции. В Adobe Photoshop это, например, опция «Сохранить для Интернета» и ее ползунок качества (от 1 до 100, влияющий на работу набора алгоритмов для оптимизации с потерями и без потерь). Стоит протестировать различные настройки качества записи, чтобы получить наилучшие результаты с максимально возможным уменьшением размера сохраняемого файла. Другие предлагаемые методы лечения, которые помогают при сжатии фотографий:

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

Используйте инструменты для оптимизации фотографий

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

Изменить размер фото

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

• Photoshop
• GIMP (бесплатно)
• краска
• ImageOptim (Mac)
• Irfan View (бесплатно для некоммерческих приложений)
• Zmniejszacz.pl (WEB версия) - здесь мы можем дополнительно применить водяной знак, выполнить простые операции, такие как поворот фотографии, добавить простые эффекты (размытие, сепия и т. Д.).
• Picresize.com (WEB версия)

Сжатие фотографий

Вы можете использовать сжатие фотографий, чтобы:

Оптимизация изображения - это искусство и наука

Я полностью согласен с тем, что написал Ля Григорик : «Оптимизация изображения - это и искусство, и наука: искусство, потому что нет единого правильного ответа, как лучше сжать данное изображение; наука, потому что многие методы и алгоритмы были разработаны, чтобы значительно уменьшить размер изображения ". Столкнувшись с этой темой, не бойтесь экспериментировать с различными параметрами программного обеспечения для сжатия фотографий, сохраняйте результаты своих попыток, пока не найдете оптимальные настройки для ваших изображений.

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

Шаг 3: Важные детали

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

Также важно использовать атрибут ALT для описания картинки. ALT - это альтернативный текст, который будет отображаться в браузере, если изображение по какой-либо причине не отображается. Каждая платформа магазина или веб-сайт должны иметь возможность вводить содержимое этого атрибута - также позаботиться о ключевых словах и адекватном описании фотографии. Описания не должны быть упакованы с ненужными прилагательными, им нечего продавать и точно выдавать то, что фотография / баннер / графика представляет. Если вы позаботитесь об именах фотографий и их атрибутах ALT - вы получите максимальный эффект в виде улучшения позиций поисковой системы, и вы сможете считать процесс оптимизации графики 100%.

суммирование

Лично для меня лучшим решением является внесение изменений в файлы в одном месте (как уменьшение, так и сжатие), поэтому я использовал самые удобные тесты для этой статьи из Imagify.io и RIOT.

Результаты Imagify.io: хорошее качество, картинка уменьшается вдвое, а сжатие = 75% веса! , Недостатком является то, что на этом сайте есть ограничения на использование бесплатной версии (вы можете оптимизировать файлы общим объемом 25 МБ / месяц). Я посмотрю, будет ли этого достаточно для меня.

Результаты RIOT - хорошее качество, картинка уменьшается вдвое, а сжатие = 75% веса! , Программа используется комфортно, сама напоминает вам уменьшить размер файла перед сжатием, работает мгновенно и достигает наилучших результатов. Вы можете использовать его бесплатно.

Когда дело доходит до самого сжатия, Optimizilla.com также хорошо справился с моим файлом (хорошее качество, картинка осталась в своем первоначальном размере = 70% уменьшения веса! ) Бесплатному использованию нет ограничений.

Похожие

Комментарии