Как уменьшить размер файла GIF для повышения производительности веб-сайта

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

GIF изображения и веб

Изображения GIF не должны рассматриваться как одно решение, подходящее для всех. Изображения в формате GIF имеют максимум 256 цветов, что означает серьезную деградацию изображения и цвета, если вы не будете осторожны. Формат файла GIF, во многих отношениях, является устаревшим форматом, который восходит к самым ранним дням Интернета. До введения формата GIF веб-изображения были черно-белыми и сжимались в формате RLE. Впервые они появились на сцене в 1987 году, когда Compuserve выпустила этот формат в качестве решения для создания веб-изображений. В то время цвет только появлялся на рабочем столе, и доступ в Интернет осуществлялся через модемы, подключенные к телефонной линии. Это создало необходимость в формате изображений, который позволял бы сохранять изображения достаточно маленькими, чтобы их можно было в короткие сроки доставить через веб-браузер в веб-браузер.

Изображения в формате GIF идеально подходят для графики с острыми краями и ограниченной цветовой палитры, например логотипа или линии. Хотя их можно использовать для фотографий, уменьшенная цветовая палитра привнесет в изображение артефакты. Тем не менее, движение Glitch Art и рост кинематографа вызвали новый интерес к формату GIF.

Как уменьшить размер файла GIF для повышения производительности веб-сайта

Эти советы помогут вам сделать ваши GIF как можно меньше.

  1. Обрезать лишнее пространство вокруг изображения. Уменьшение размера изображения в пикселях – это единственный наиболее эффективный способ уменьшить размер файла. Если вы используете Photoshop, команда Trim хорошо подходит для этого.

  2. Когда вы готовите изображение в формате gif, вы можете уменьшить размеры вывода.

  3. Уменьшите количество цветов на изображении.

  4. Для анимированных GIF-файлов уменьшите количество кадров в изображении.

  5. Если вы используете Photoshop, вы можете создать файл GIF с помощью пункта меню «Экспортировать как». Выберите Файл > Экспортировать как … и, когда откроется меню, выберите GIF в качестве формата файла и уменьшите физические размеры (Ширина и Высота) изображения.

  6. Если вы используете Adobe Photoshop Elements, выберите Файл > Сохранить для Интернета. Откроется диалоговое окно «Сохранить для Интернета», которое также находится в Adobe Photoshop, Файл <./strong >> Экспорт > Сохранить для Интернета (устаревшая версия) . Когда он открывается, вы можете применить дизеринг, уменьшить цвет и физические размеры изображения.

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

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

  9. Не используйте переплетение. Чересстрочная развертка обычно увеличивает размер файла.

  10. Как Photoshop, так и Photoshop Elements покажут вам время загрузки. Не обращай на это внимания. Он основан на использовании модема 56k. Более правильный номер появится, если вы выберете кабельный модем из выпадающего меню.

подсказки

  • Избегайте бесполезной анимации. Чрезмерная анимация не только увеличивает время загрузки вашей веб-страницы, но и многих пользователей это отвлекает.
  • Изображения GIF с большими блоками сплошного цвета и горизонтальными узорами сжимаются лучше, чем изображения с градациями цветов, мягкими тенями и вертикальными узорами.
  • При уменьшении цветов в GIF-файлах вы получите наилучшее сжатие, если для числовых цветов задано наименьшее из следующих значений: 2, 4, 8, 16, 32, 64, 128 или 256.
Оцените статью
Solutics.ru
Добавить комментарий