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

Ссылка скопирована
1 ответ

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

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

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

Или как?

Дополнительно:

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

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

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

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

    Верно.

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

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

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

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

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

    Верно.

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

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

    • Оооо такое понятие для меня впервые
    • VEri63, тут важно понимать значения слова "маленькие". И спрайты - это НЕ про миниатюры о которых ты спрашиваешь.
    • Refguser верно заметил. В спрайты можно складывать всякие маленькие иконки, флаги стран, фоны и пр.
      А если миниатюры для статей, то лучше оптимизировать их по качеству и размеру, не задействуя спрайты.
    • Refguser, так я этого и не писала "маленькие"
    • VEri63, но ты прочла его в ответе. А я прокомментировал для правильного понимания. (поcле чего Иерокопус Таманский расписал в подробностях, за что получил мой плюсик ;) )

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

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

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

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

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

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

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

    • VEri63,

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

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

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

    • Refguser, то есть

      метод сжать

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

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

    • VEri63,

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

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

    • Refguser, как сжать - оптимизировать, а как оптимизировать - сжать
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Сергей Миронов Ответ

    Миниатюры и оптимизация изображений — разные вещи. WordPress создаёт разные размеры одного изображения, например thumbnail, medium, large и размеры темы. Это нужно, чтобы на странице ленты не грузить оригинал 4000 px. Но сам файл каждого размера всё равно может быть тяжёлым, если его не сжать и не отдать в современном формате.

    Для главной страницы с лентой записей нужно проверить три вещи:

    • какой размер изображения реально подставляется в карточку;
    • не грузится ли оригинал вместо thumbnail/medium;
    • есть ли WebP/AVIF и сжатие.

    В шаблоне лучше выводить миниатюру так:

    the_post_thumbnail('medium_large', [
        'loading' => 'lazy',
        'decoding' => 'async',
    ]);

    the_post_thumbnail('medium_large', [ 'loading' => 'lazy', 'decoding' => 'async', ]);

    Не используйте полный размер для карточек. Для сетки ленты обычно хватает 400-800 px по ширине, в зависимости от дизайна.

    WebP действительно помогает, но не заменяет правильные размеры. Если отдать WebP 3000 px в карточку 300 px, страница всё равно будет тяжёлой. Сначала размеры, потом сжатие, потом lazy load.

    Из инструментов для WordPress можно использовать ShortPixel, Imagify, EWWW, Converter for Media. Важно включить генерацию WebP и убедиться, что сервер реально отдаёт WebP в браузере. После оптимизации проверьте Network: размер файла, фактические dimensions и формат. Для иконок часто лучше SVG, если это простая графика, но SVG нужно sanitizing и аккуратное использование.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

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

    Вам также может быть интересно