Какие методы сжатия изображений (миниатюр) для сайта есть?

Question

[VEri63]

Какие методы сжатия (оптимизации) изображений (миниатюр) для сайта? На примере wordpress (так как на нем работает мой блог).

Я так понимаю что создание миниатюр и сжатие это все таки разные вещи, так как миниатюры создаются по принципу размера 1х1, такие как 150х150 и т.д. Такие миниатюры чаще используются для медиабиблиотеки wp и внутри статьи если выбирать отображение именно миниатюры в соотношении опять же 1х1.
Некоторые темы имеют такие же миниатюры для статей, но чаще размеры миниатюр все таки в другом соотношении, например 16х9.

Так как оптимизировать главную страницу с лентой записей с такими объемными миниатюрами? Конвертировать в webp формат. Я правильно понимаю?

Или как?

Comments

[szQocks]

просто оптимизируй изображения через какой-нибудь сервис и этого хватит tinypng

даже если предположим что там иконки в png и если их тоже оптимизировать то ничего не должно долго грузиться, я проверял на практике где более 100 картинок ( даже без ленивой подгрузки изображений ) на странице грузились без проблем если их тупо прогнать через сервисы

[VEri63]

szQocks, так это возможно когда вот только загрузить решаешь фото, а когда уже имеются загруженные фотографии с 2021 года на сайте?

[szQocks]

VEri63, так же руками или автоматизировать как-то этот процесс

Answer 1

[Михаил Р.]

Я так понимаю что создание миниатюр и сжатие это все таки разные вещи

Верно.

так как миниатюры создаются по принципу размера 1х1

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

Так как оптимизировать главную страницу с лентой записей с такими объемными миниатюрами?

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

Конвертировать в webp формат. Я правильно понимаю?

Верно.

Answer 2

[d'Ivan]

Вместо десятков маленьких изображений их можно паковать в спрайты. Это на порядок уменьшит их количество и уменьшит трафик.
Поиск: CSS image sprite

Comments

[VEri63]

Оооо такое понятие для меня впервые

[Refguser]

VEri63, тут важно понимать значения слова "маленькие". И спрайты - это НЕ про миниатюры о которых ты спрашиваешь.

[d'Ivan]

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

[VEri63]

Refguser, так я этого и не писала "маленькие"

[Refguser]

VEri63, но ты прочла его в ответе. А я прокомментировал для правильного понимания. (поcле чего Иерокопус Таманский расписал в подробностях, за что получил мой плюсик ;) )

Answer 3

[rPman]

Берешь утилиту convert из imagemagic (идет штатно с любым linux) и перебирая параметры сжатия добиваешься нужного размера изображений как в пикселах так и в байтах на диске.

Answer 4

[Kokonb]

У WebP есть такой нюанс - не все браузеры его поддерживают.
К примеру, некоторые версии iOS Safari, обычный Safari, IE - не поддерживают WebP.
https://caniuse.com/#feat=webp
Поэтому надо хранить всегда как минимум две версии каждой картинки. Webp (для браузеров с поддержкой WebP) и исходную карти
И отдавать нужную версию в зависимости от браузера.
А исходную картинку надо при этом еще и оптимизировать/сжимать - чтобы даже для браузеров без поддержки WebP картинки отдавались оптимизированными (более легкими по весу) - это еще третья! версия файла.
У сервиса optipic я недавно заметил новый функционал, в который это все уже заложено в коробку.
https://optipic.io/ru/webp/wordpress/
Можно даже подключить все так, чтобы урлы картинок не менялись (они остаются точно такими же и выглядят как внутренние url на моем сайте). Но на самом деле они подгружаются через их систему с автоматическим сжатием, конвертацией в webp и распознаванием поддержки webp.
Получается совсем все просто и красиво, да и недорого))

Answer 5

[Refguser]

Я так понимаю что создание миниатюр и сжатие это все таки разные вещи,

Именно. Более того - это понятия из параллельных вселенных.
Первое - это физ. размер (в пикселях), второе - характеристика оптимизации, результатом которой является объём (в байтах).

Так как оптимизировать главную страницу с лентой записей с такими объемными миниатюрами? Конвертировать в webp формат. Я правильно понимаю?

Нет. Достаточно нормально оптимизировать оригиналы (jpg/png) и никакие webp не нужны. Это только лишний балласт и нагрузки.

Comments

[VEri63]

Достаточно нормально оптимизировать оригиналы (jpg/png)

так в этом и вопрос, как? как вообще оптимизируются оригиналы? кто пишет мне про миниатюры, которые не имеют отношения к уменьшению объема фото. если только нарезать фото размером 960х480 например.

[Refguser]

VEri63,

так в этом и вопрос, как?

Нет, такого вопроса не было. "Методы" != "способы и средства" .

Задашь такой вопрос (отдельно, как того требуют правила) - я напишу и чем и как.

[VEri63]

Refguser, то есть

метод сжать

- оптимизировать

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

[Refguser]

VEri63,

но по сути это не метод сжатия. оптимизация это вообще другое. оптимизируют код, текст, код, мета теги.

Этот сеошный мусор не имеет никакого отношения к оптимизации ("сжиманию") графики.

[VEri63]

Refguser, как сжать - оптимизировать, а как оптимизировать - сжать