Как уменьшить вес png

Как сжать изображение PNG на рабочем столе или в Интернете без потери качества

Размещено от Джейн Уинстон Январь 13, 2020 16: 20

PNG, расшифровывается как Portable Network Graphics, является широко используемым форматом изображений. Хотя это формат файла без потерь, он сжимает визуальный контент. Однако файлы изображений PNG всегда имеют больший размер. Чтобы сэкономить место на диске или быстро опубликовать в Интернете, вам может потребоваться сжать изображение PNG файлы регулярно. Поэтому в этой статье предполагается представить четыре способа сжатия файлов изображений PNG в Windows, Mac OS X / 11 и Linux. Некоторые из них даже могут сжимать изображения на 70% без размытия.

Часть 1: Самый простой способ сжать PNG

Если вы не любите устанавливать программное обеспечение на свой компьютер, Apeaksoft бесплатный онлайн-компрессор изображений это лучший вариант для сжатия PNG онлайн. Он не только прост в использовании, но и способен уменьшать изображения от МБ до КБ без потери качества.

1. Сжатие изображений PNG онлайн с сохранением прозрачности.

2. Пакетная обработка до 40 изображений без потери качества.

3. Повысьте производительность, используя передовые технологии.

4. Доступно для всех машин под управлением Windows, Mac OS X / 11 и Linux.

Как сжать PNG онлайн

Шаг 1Откройте веб-браузер, скопируйте и вставьте https://www.apeaksoft.com/free-online-image-compressor/ в адресную строку и нажмите Enter ключ для доступа к онлайн-компрессору PNG.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Шаг 2Хит Добавить изображения кнопку на странице, чтобы активировать диалог открытия файла. Затем найдите файлы PNG, которые вы хотите сжать, выберите их и нажмите Откройте загрузить их. Или вы можете перетащить эти изображения PNG на веб-страницу напрямую.

Шаг 3После загрузки онлайн-компрессор PNG выполнит эту работу автоматически. Когда это будет сделано, вы увидите кнопку Скачать. Здесь вы можете скачать каждое сжатое изображение отдельно или получить все файлы в одном пакете, нажав Скачать все кнопку.

Часть 2. Сжатие изображения PNG в Windows

Шаг 1 Найдите изображение PNG, которое вы хотите сжать в JPG. Щелкните правой кнопкой мыши на файле, выберите Открыть с помощью и выберите Paint, чтобы открыть его в Windows Paint.

Шаг 2 Во-первых, используйте Выберите инструмент на верхней панели инструментов. Перетащите флажок, чтобы закрыть часть, чтобы оставить, а затем нажмите урожай инструмент для вырезания изображения.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Шаг 3 Затем выберите Изменение размера инструмент, чтобы открыть диалоговое окно изменения размера. выбирать Пикселей и установите меньшие значения в горизонтальный и вертикальный коробки. щелчок OK чтобы подтвердить это.

PowerPoint также является инструментом, помогающим сжать изображения на компьютере Windows.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Часть 3: Сжатие изображения PNG на Mac

Когда дело доходит до сжатия изображения PNG в Mac OS X / 11, у вас меньше возможностей, чем на ПК. Есть несколько редакторов изображений, предлагающих версию для Mac, например Photoshop. Он позволяет изменять размер изображения PNG и сжимать его.

Шаг 1 Запустите ваш Photoshop и перетащите изображение PNG в программу.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Больше решений для изменить размер фотографии на MacВы можете проверить это здесь.

Часть 4: Сжатие PNG в Linux

Хотя вы можете сжимать изображения PNG, сохраняя прозрачность, используя TinyPNG и другие веб-приложения в Linux, командные строки по-прежнему распространены. Мы используем Pngquant в качестве примера, чтобы показать вам процедуру.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Часть 5. Часто задаваемые вопросы о сжатии PNG

Вопрос 1: Можно ли сжать изображения в формате PNG?

Ответ: Да, PNG изображения могут быть сжаты. Файлы изображений PNG представляют собой сжатые растровые изображения без потерь. Даже если изображения PNG сжаты, размер файла может быть очень большим. Таким образом, вы можете уменьшить размер файла PNG с помощью компрессора изображений.

Вопрос 2: Какой типичный размер файла для PNG до и после сжатия?

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

Вопрос 3: Для чего используется формат файла PNG?

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

Вопрос 4: Каковы преимущества PNG?

В этой статье рассказывается о нескольких способах сжатия файлов изображений PNG в Windows, Mac OS X / 11 и Linux. Все они обладают уникальными преимуществами и преимуществами. Например, Apeaksoft Free Online Image Compressor может сжимать PNG онлайн без необходимости установки какого-либо программного обеспечения. Кроме того, как веб-приложение оно доступно для всех ноутбуков и компьютеров. Вы можете взять свой любимый инструмент и следовать нашему руководству, чтобы выполнить задание. Если у вас есть дополнительные вопросы, связанные со сжатием PNG, запишите их под этой статьей.

Источник

Как уменьшить изображение в фотошопе без потери качества

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

Поскольку у меня блог про тему фотографии, то фоток на моем сайта предостаточно, что только добавляет мне вопросов оптимизации фотографий.

В начале

Обычно перед тем, как выложить статью на блоге, я все изображения загружаю в фотошоп, и там их уменьшаю. Делаю я это через функцию «Сохранить для веб», или горячими клавишами Shift+Ctrl+Alt+S.

С виду много клавиш, которые нужно зажать, но на практике получается очень удобно, если поставить большой палец на Alt, мизинец на Ctrl, безымянный на Shift, ну и указательный на S. Получилось? Видите, как просто.

Недавно я выкладывал статью про самые дорогие мотоциклы в мире, и вот у меня так было в фотошопе:

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес pngЕсли вы обратите внимание, то весит эта фотография самого мотоцикла 2,15 Мб.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Понятно, что в таком виде на сайт выкладывать ее совершенно не нужно. Это огромный вес для интернета. Нажимаем наши волшебные клавиши Shift+Ctrl+Alt+S, и у нас открывается вот такое окошко.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Параметры сохранения

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

Как вы видите, фотошоп уже сжал фото с 2,15 Мб до 300 Кб. И это уже очень хорошо. Но обычно я не использую в своем блоге изображений весом больше 200 кб.

И то это редкий случай, когда нужно показать красивую фотографию в полном размере, как например, фотографии в пресетах Лайтрум, где нужно показать красоту обработки фильтра.

А в обычных статьях блога сейчас стал делать фотки где-то в районе 100кб плюс минус 20-30кб. Раньше, в первых статьях старался вообще делать где-то 50-70кб, но это сильно искажало картинку, и теперь стараюсь делать побольше.

Формат

Давайте теперь более подробно разбираться в тонкостях этих настроек, и начнем мы с формата. Как я уже сказал, где-то можно сохранить в jpeg, где-то в png.

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

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Мы делаем формат jpeg, качество 80, ширину убавляем до 800, и видим, что наше фото уменьшилось в весе, и стало 146 кб. Это для вас приемлемо? На сайте она будет выглядеть вот таким образом, т.е. полностью в ширину контекстной части.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

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

Если для вас это много по весу, давайте попробуем сделать меньше размер, не 800px, а сделаем 700px, смотрим что у нас получается в самой программе.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Вы уже видите, что вес уменьшился, и стал уже 117 кб. Длину фото мы сделали 700px. Вот как эта фотография будет выглядеть у вас в блоге в контексте записи:

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

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

Кстати, разница по ширине в статье совсем не заметна. Я тоже для себя кое-что вынесу из этого урока! Будем еще меньше делать фото? Давайте сделаем в настройках 600px. Мне кажется это вполне еще приемлемо. Вот так будет в программе:

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

И мы уже видим, что при размере в 600px, вес стал 91кб. Совсем не много, мне кажется, для любого сайта. И вот как эта фотка будет выглядеть в вашей заметке:

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

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

Давайте перейдем к другому параметру, и посмотрим как он отражается на самой фотографии, и на сколько можно уменьшать эти настройки.

Качество

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

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

Как мы видели, размеры 800px и 700px совсем не отличаются по тому, как они выглядят на сайте. Поэтому, я предлагаю двигать качество на размере 600px.

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

Качество 80% у нас уже было, поэтому давайте уменьшим до 70%, и посмотрим что у нас получится. В программе это будет выглядеть вот так:

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Смотрим сколько у нас теперь весит картинка? Только 71Кб! Это очень хороший результат для сжатия изображения. И что же мы будем видеть на сайте с такими параметрами? А вот что!

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес pngТут уже на любителя, и кто как видит. Для меня, это не очень хорошая фотка, а для вас — смотрите сами. Давайте я еще уменьшу на 10% качество, раз уже мы двигаемся в эту сторону и посмотрим что будет происходить. Ставим параметр 60% на 600px. Окно программы будет вот такое:

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

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

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

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

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

Jpeg или png

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

А секрет вот в чем, я уже говорил о нем. Если вам нужно показать картинку, то вы делаете jpeg, если вам нужно показать цифры, или скриншот программы, то вы делаете png.

Именно так и я делал выше. Если вы внимательно поглядите на сам мотоцикл в скриншотах программы, где стоят настройки, то вы увидите очень грубые градиенты перехода цвета. К примеру на зеленых деталях мотоцикла. Посмотрите внимательно!

Конечно, когда мы следим за цифрами, допустим в окне программы, то сама картинка уходит на второй план, и все внимание на показатели, с которыми мы работаем.

Но если сделать png для самой картинки, то я могу показать что будет. Давайте сравним как будет выглядеть png и jpeg с одними и теми же настройками всего остального. Вот глядите, ставим в программе 600px и ставим формат png:

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Как видим такое изображение будет весить 108 Кб. Это примерно 700px формата jpeg c 80% качества. И что теперь мы будем видеть на сайте:

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Вполне себе рабочий вариант, и можно так делать. Но в данном случае, лучше будет сделать jpeg, потому что он будет весить меньше и качество будет лучше.

А вот рабочий процесс программы делаю по другому. Допустим, я выставляю разные настройки для изображения, делаю скрин этого процесса. А потом для того, чтобы выложить это на сайте, сохраняю этот скрин в png, причем размер я не трогаю:

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Т.е. вы видите размер у меня тут на этой картинке 1135 px, и так видно хорошо все цифры и все параметры. Весит 137Кб такая картинка, но если сделать меньше, то будет все очень плохо видно.

В заключении

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

Надеюсь, вам все было понятно. Для начала, я думаю, это достаточно заморочисто, но вот такой это вопрос. Пишите в комментарии, если у вас будут вопросы, отвечу на все.

Нужно немного практики, пробуйте разные варианты. Все еще зависит от самой фотки и её качества. Бывают качественные картинки приходится сжимать, а бывает и плохое качество. Тогда тоже нужно опытным путем подобрать настройки и выбрать наиболее приемлемые для вас.

Источник

Как ускорить сайт с помощью gzip, brotli, кэша, минификации и других способов

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

В статье:

Зачем уменьшать размер HTML-страницы

С каждым годом вес HTML-страниц в среднем увеличивается. По данным MachMetrics, средний размер веб-страницы в 2018 году — 2МБ, это в три раза больше, чем три года назад. Это происходит, потому что на сайты добавляют более качественные и тяжелые изображения и видео, CSS или JS-файлы.

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

Пользователи не будут ждать долгой загрузки, максимум, который они ждут — 2-3 секунды на десктопе или 3-4 на мобильном устройстве. Если сайт так и не загрузился, пользователь закроет страницу — для поисковиков это будет значить, что сайт не удовлетворяет задачи пользователей. Поисковики стимулируют веб-мастеров ускорять и облегчать сайты. Обновление Google Speed Update занижает позиции очень медленных сайтов, к тому же Google переводит сайты в Mobile-first index — это значит, что mobile-friendly сайты получат преимущество, десктопная выдача будет строиться на основе мобильной, где особенно важен вес страницы.

Иногда незначительные задержки скорости не критичны, если посетители целенаправленно хотят получить услуги, товары или информацию с конкретного сайта. К примеру, по данным инструмента Google PageSpeed Insights, у сайта amazon.com довольно низкая скорость загрузки с мобильных устройств, но Amazon востребован: пользователи готовы ждать, чтобы делать выгодные заказы.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес pngАнализ amazon.com

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

Измерить скорость загрузки своего сайта и сравнить с конкурентными можно с помощью инструментов Google PageSpeed Insights или Проверка скорости сайта от PR-CY.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес pngФрагмент результатов проверки

Если хотите ускорить загрузку страницы, то рекомендуем уменьшить ее размер.

Как уменьшить размер HTML

Для уменьшения размера HTML-страницы нужно сжать код и облегчить элементы:

Использовать сжатие gzip или brotli

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

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

Сжатие данных алгоритмами состоит из этапов:

На втором этапе браузер сообщает серверу, какие методы сжатия поддерживает — посылает заголовки Accept-Encoding с кодом, где указаны алгоритмы сжатия, например, «accept-encoding: gzip, deflate, br». Сервер выбирает форматы из доступных: если клиент поддерживает brotli, то сервер ищет суффикс «.br» в заголовке и отправляет клиенту нужный файл. Если его нет, будет использовать другой алгоритм. Если клиент не поддерживает сжатие вообще, сервер отправит несжатую версию.

Какой алгоритм сжатия выбрать: gzip или brotli?

Многие веб-мастера используют оба способа, поскольку brotli позволяет сжимать сильнее, но gzip поддерживают больше браузеров, поэтому он будет использоваться чаще.

Как использовать сжатие gzip

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

Сжатие gzip для Nginx

В новых версиях Nginx gzip сжатие включено по умолчанию, но если такого нет, его можно настроить. Чтобы запустить сжатие gzip для сервера Nginx, нужно включить сжатие в модуле /etc/nginx/nginx.conf:

Директива «gzip_disable «msie6»» отключает сжатие для эксплорера 5.5 и 6, «gzip_proxied any» позволяет сжимать данные для proxy-серверов.

Уровень сжатия указывают в директиве «gzip_comp_level 6».

Директива «gzip_types text/css text/javascript application/javascript» указывает типы файлов для сжатия на сервере. Перечислите те, которые вам нужны. Cжатие text/html подразумевается и не может быть отключено, если вы не установили gzip off, а text/css и application/x-javascript включает сжатие gzip для файлов CSS и javascript соответственно.

Сжатие gzip можно включать и выключать для каждого «сервера» Nginx — более мелкой структуры, и для конкретного location — еще меньшей, зачастую располагающейся внутри него.

Gzip-сжатие файлов SVG для Nginx

Сжатие gzip будет работать для SVG, если формат векторной графики SVG есть в файле, который обычно располагается по пути «/etc/nginx/mime.types». Добавьте строку изображения «image/svg+xml svg svgz»

В файле конфигурации Nginx найдите «gzip types» и добавьте «image/svg+xml» к концу строки. Получившаяся строка может выглядеть так:

Сжатие gzip для Apache

Сервер Apache для работы со сжатыми ресурсами использует модуль mod_deflate или mod_gzip.

Есть еще такой вариант перечисления типов файлов для сжатия в одной строке:

В строке DeflateCompressionLevel 7 указывают степень сжатия. Сжатие будет работать после сохранения.

Gzip-сжатие файлов SVG для Apache

После вставки и сохранения функция должна работать. Следите, чтобы код в файле не повторялся.

Как использовать сжатие brotli

Brotli поддерживают браузеры Chrome, Firefox и Edge 15 для SSL-соединений. В заголовках должен быть «Accept-Encoding: br». В brotli есть собственный словарь из более сотни тысяч фраз, который используется для сжатия данных. Он же встроен в браузеры, которые поддерживают алгоритм, поэтому словарь не передается в архиве, и архив весит меньше.

Алгоритм сжатия brotli сжимает файлы сильнее, чем gzip. Максимальная степень сжатия у gzip — 9, а у brotli 11, степень 11 brotli дает файл на 25% меньше, чем сжатый 9 степенью gzip.

Некоторые веб-мастера считают, что brotli нет смысла использовать для динамических страниц, поскольку он медленнее gzip. Такое ощущение складывается, если сравнивать параметры по умолчанию: у команды brotli стоит максимальный 11 уровень сжатия, для него нужно больше времени, поэтому процесс сжатия получается медленнее.

Для динамических страниц рекомендуем использовать уровень 5-6, тогда скорость сжатия будет достаточно быстрой. Для статических страниц можно использовать скрипт для сжатия 11 уровня.

Сжатие brotli для Nginx

Сервер Nginx использует brotli при включенном модуле «brotli_static» в конфигурации «brotli_static on». Тогда сервер получит от браузера заголовок, проверит, есть ли в нем файл с расширением «.br» и отдаст нужный файл как архив, сжатый в brotli.

Brotli-архивы нужно установить из репозитория или собрать утилиты:

Для сжатия «на лету» можно установить дополнительный модуль nginx brotli. Модуль Nginx для сжатия brotli «на лету» на Github.

Сжатие brotli для Apache

Сжатие brotli поддерживает Apache версии 2.4.26 и выше.

Как проверить сжатие данных

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

Для проверки работы gzip есть Check GZIP compressed.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес pngФрагмент результатов проверки тестом

Google PageSpeed Insights оценит скорость загрузки и покажет список файлов, для которых не работает сжатие.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес pngФрагмент результатов проверки инструментом

Инструмент «Проверка скорости сайта» от PR-CY оценит скорость и покажет страницы, на которых не работает сжатие.

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес pngФрагмент результатов проверки инструментом

Использовать минификацию HTML, CSS и JS

Еще один способ уменьшить код — сократить его. В коде часто остаются комментарии, ненужные фрагменты, разрывы строк, разделители блоков и лишние пробелы, библиотеки JavaScript, которые не используют. Ненужные символы можно удалить, для этого проводят минификацию CSS, JS, HTML-файлов.

Минификация помогает уменьшить размер фрагментов кода JS, она не влияет на сам файл, но оптимизирует его и уменьшает размер, за счет чего повышается скорость загрузки. Файлы, прошедшие минификацию, получают расширение «.min». После минификации в CSS, HTML, JS-файле не будет разделителей, переносов, лишних пробелов, поэтому его будет сложнее читать.

Бесплатные инструменты для минификации CSS, JS, HTML-файлов

Собрали несколько бесплатных онлайн-инструментов для сокращения кода.

Использовать кэш браузера для ускорения

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

Google рекомендует настроить сервер так, чтобы он возвращал ответ с HTTP-заголовком Cache-Control, например:

Директива «max-age» указывает, как долго браузер должен кэшировать ресурс в секундах. Значение 31536000 соответствует году: 60 секунд * 60 минут * 24 часа * 365 дней = 31536000 секунд.

Google советует применять «no-cache» для объектов, которые могут обновляться: тогда браузер по-прежнему будет кэшировать ресурс со значением «no-cache», но сначала проверит актуальность на сервере.

Кэширование для Nginx

Для сервера Nginx подходит модуль expires в файле конфигурации. Нужно перечислить форматы файлов для кэширования и указать время хранения кэша:

Время можно указать в любом формате: секунды — s, часы — h, дни — d и месяцы — m, обозначение «max» указывает на кэширование навсегда.

Вместо времени хранения файла можно указать дату следующего обновления файла в кэше:

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

Кэширование для Apache

Метод Cache-Control

Кэширование по времени

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

После сохранения нужно обновить страницу.

Проверить кэширование в Google Chrome можно с помощью веб-инспектора Chrome DevTools. Столбец Size в Chrome DevTools поможет убедиться, что ресурс в кэше:

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Столбец Size в Chrome DevTool. Источник — Google

Вкладка Headers покажет, как установлен Cache-Control:

Как уменьшить вес png. Смотреть фото Как уменьшить вес png. Смотреть картинку Как уменьшить вес png. Картинка про Как уменьшить вес png. Фото Как уменьшить вес png

Проверка заголовка Cache-Control. Источник — Google

Сжать фотографии, иллюстрации и другую графику

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

Как оптимизировать картинки для сайта:

Инструменты и сервисы для оптимизации изображений на сайте:

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *