Во многих случаях общий размер картинок, которые грузятся на странице составляет более 50% от веса все страницы. Критично важно подбирать правильный формат для используемых изображений. Их всего два PNG и JPG, поэтому это не так сложно.
PNG очень крутой формат, который заменил GIF. Особенности формата:
PNG позволяет показывать картинки без потери мельчайших деталей и с точной передачей цвета. Это делает формат удобным для:
Формат PNG24 использует максимальную глубину цветов. Такой тип подойдет для многоцветных картинок. PNG8 позволяет использовать ограниченную палитру от 1 бита (2 цвета) до 8 бит (256 цветов). Это может значительно сократить размер файлов с малым количеством цветов на картинке.
Преобразовать PNG24 в PNG8 можно используя pngnq:
pngnq -n 256 image.png
## Преобразуем в PNG8
Этот формат использует максимально доступную палитру. Для уменьшения размера используется специальный механизм сжатия и сглаживания.
Сильная сторона формата JPEG проявляется когда изображение содержит множество цветов и не нет особых требований к мелким деталям. Это идеально подходит для:
JPG поддерживает прогрессивный формат. Когда человек открывает такую картинку в браузере, он сначала увидит общие очертания, а потом детализация и качество повысится до максимального. Это составит впечатление о более быстрой загрузке сайта. Особенно важно использование progressive формата для случаев с низкой скоростью доступа в Интернет у посетителей.
Преобразование в progressive формат можно выполнить с помощью [p190 jpegtran]:
jpegtran -progressive -outfile image.jpg image.jpg
## изменит формат картинки на progressive
Либо imagemagick:
convert -interlace Plane input-file.jpg output-file.jpg
## изменит формат картинки на progressive
JPEG позволяет указать уровень сжатия/сглаживания при сохранении изображения. Это снижает качество. Но иногда снижения качества незаметно, зато экономия размера может получиться довольно большой. Для изменения сжатия используйте утилиту [p190 jpegtran]:
jpegtran -quality 80 -outfile optimized.image.jpg image.jpg
## Используйте значения от 5 до 95 для получения различного уровня сжатия
Нет смысла использовать GIF формат, т.к. существует PNG. Один случай, когда Вы захотите GIF — это наличие анимации. Может использоваться, например, для прелоадеров.
В качестве самого важного — Чеклист по работе с картинками в Web.
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…