Как оптимизировать изображения для SEO и Google Pagespeed и улучшить веб-сохранение
Практически с каждым тестом Pagespeed, который я делаю для всего своего веб-сайта, я получаю комментарий "Оптимизация изображений с помощью сжатия X без потерь", который часто значительно повышает рейтинг моей страницы.
Я уже сохраняю КАЖДОЕ изображение с помощью "Сохранить для Интернета" в Photoshop, но мне было интересно, как я могу еще больше "оптимизировать изображения путем сжатия без потерь". Насколько я знаю, я уже делаю все, что могу.
Действительно интересно..
Не по теме, но я заметил, что Google PageSpeed использует устройство Retina для проверки, так как все мои изображения Retina загружались вместо обычных. Так как они больше, чем площадь, я получил оценку 1/100 в мобильном сегменте. Ха - ха.
2 ответа
Это было настоящей проблемой для многих моих сайтов, однако я использую бесплатную версию kraken, чтобы "свободно сжимать" все мои изображения, и это проходит тест Google, тем самым повышая рейтинг!
https://kraken.io/web-interface
Я, должно быть, уже использовал это для более чем 10000 изображений!
Изображения, которые вы создаете в таких программах, как Photoshop и Illustrator, выглядят потрясающе, но часто размеры файлов очень велики. Это связано с тем, что изображения сделаны в формате, облегчающем манипулирование ими различными способами. Если вы разместите эти файлы на своем веб-сайте, он будет загружаться очень медленно. Оптимизация ваших изображений для Интернета означает сохранение или компиляцию ваших изображений в удобном для Интернета формате в зависимости от того, что содержит изображение.
Как это работает? Нам нужно понять две формы сжатия: с потерями и без потерь.
Изображения, сохраненные в формате с потерями, будут немного отличаться от исходного изображения в несжатом виде. Имейте в виду, что это видно только при очень близком рассмотрении. Сжатие с потерями хорошо для Интернета, потому что изображения занимают небольшой объем памяти, но могут быть достаточно похожими на исходное изображение.
Изображения, сохраненные в формате без потерь, сохраняют всю информацию, необходимую для создания исходного изображения. По этой причине эти изображения несут гораздо больше данных и, в свою очередь, имеют гораздо больший размер файла.
Мы также можем оптимизировать изображения для Интернета, сохранив их в соответствующих размерах. Изменение размера изображения на самой веб-странице с помощью CSS полезно, но проблема в том, что веб-браузер все равно загрузит весь исходный файл, затем изменит его размер и отобразит.
Можете ли вы представить себе изображение размером с плакат и использовать его в качестве эскиза? Маленькое изображение размером 20 на 20 пикселей загружалось бы столько же времени, сколько и оригинальный постер, когда мы могли бы просто загружать изображение размером 20 пикселей все время.
Как оптимизировать изображения?
Проще говоря, оптимизация вашего изображения работает путем удаления всех ненужных данных, которые сохраняются в изображении, чтобы уменьшить размер файла изображения в зависимости от того, где оно используется на вашем веб-сайте. Оптимизация изображений для Интернета может уменьшить общий размер загружаемой страницы до 80%.
Полная оптимизация изображений может быть настоящим искусством, поскольку существует огромное разнообразие изображений, с которыми вы можете иметь дело. Вот наиболее распространенные способы оптимизации изображений для Интернета.
Уменьшите пустое пространство вокруг изображений — некоторые разработчики используют пустое пространство для заполнения, что является большим запретом. Обрезайте изображения, чтобы удалить все пробелы вокруг изображения, и используйте CSS для добавления отступов. Используйте правильные форматы файлов. Если у вас есть значки, маркеры или любая графика, в которой не слишком много цветов, используйте такой формат, как GIF, и сохраните файл с меньшим количеством цветов. Если у вас есть более подробная графика, используйте формат файла JPG, чтобы сохранить изображения и уменьшить качество. Сохраняйте изображения в нужных размерах. Если вам приходится использовать HTML или CSS для изменения размера изображений, остановитесь прямо сейчас. Сохраните изображение нужного размера, чтобы уменьшить размер файла. Чтобы изменить размер изображений, вам придется использовать какую-либо программу. Для базового сжатия вы можете использовать простую программу редактирования, такую как GIMP.