Требуется оптимизация изображения

Question

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

Answer 1

Оптимизация изображения

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

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

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

TinyPNG (https://tinypng.com/)

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

ИЛИ

TinyJPG (https://tinyjpg.com/) Для файлов JPG

Ссылка: http://websitespeedoptimizations.com/ImageOptzPost.aspx

Answer 2

Если вы хотите заняться этим, тогда я полностью рекомендую прочитать это руководство: https://images.guide/

Если вы просто хотите решить проблему раз и навсегда для своего веб-сайта, вы можете попробовать https://piio.co

Интеграция очень проста, вы просто измените свой <img src="image.jpg" /> на <img data-piio="image.jpg /> и включите библиотеку JS в HTML.

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

Answer 3

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

http://developer.yahoo.com/yslow/smushit/

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

Answer 4

Придайте изображению немного любви.

"sips -s formatOptions 60 image / path" для изображения / пути, вы также можете просто перетащить изображение внутрь.

вы также можете попробоватьизменить размер изображения для сохранения скорости

"sips -Z 800 image / path"

этот код сохранит соотношение сторон

для нетехнического решения TinyPNG (https://tinypng.com/)

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