Влияние размера (объема) картинок на продвижение

[Val_Ery]

Как и обещал... Картинки...
jpg - https://res.cloudinary.com/valery/image/upload/v1556719398/_DSC0260_sigvnt.jpg
webp - https://res.cloudinary.com/valery/image/upload/v1556719396/dsc0260_z1zp2a.webp

На самом деле качество страдает. Я специально выбрал картинку с собакой. Там по шерсти артефакты лучше видны.
Но всё-таки! Размер 4 928px × 3 264px и 280 килобайт!
И оригинал не самый лучший.

Что если картинку в wepp'е уменьшить по пикселям до нужного размера а потом обратно перевести в  jpeg? Будет ли размер тем же, как если просто уменьшить  jpeg?

Я думаю, размер будет больше.

Там штука вот в чем: если из jpg делать webp со 100% качеством (вообще без потерь), то результат получается тяжелее. Я особо не разбирался, но, по-моему, они в веппи альфа-канал добавляют и сам контейнер какой-то наворочено-тяжелый. С альфа-каналом такое чувство, что при декомпрессии (dwebp) они его просто оставляют. То есть, не то, что flatten image, а именно вытаскивают из одного контейнера всё и это всё вставляют в jpg

[zanuda]

На самом деле качество страдает. Я специально выбрал картинку с собакой. ...
И оригинал не самый лучший.

Мне лично не сильно заметно. Может, к вечеру глаза просто устали...

А мне вот интересно как фирмы делают jpeg'и с приличными пикселями очень хорошего качество и всего не больше пары сотен мег. (иногда приходится работать - присылают для журнала, совершенно шикарные, уменьшаются нормально, как по размерм, так и - не хочется прибавить контрастов и яркости).

[Val_Ery]

А мне вот интересно как фирмы делают jpeg'и с приличными пикселями очень хорошего качество

Посмотреть бы такие изображения...

Я на самом деле не знаю, только предполагаю.

Скорее всего там исходник сделан на шаблоне с низким разрешением, типа 72 пикселя на дюйм (ещё не так давно в фoтошоп предустановленные шаблоны предлагали именно 72 пикселя для нового дoкумента).
Далее... Стандартное увеличение размеров (ширины и высоты) через изменение этого разрешения.
Например, если ваш исходник имеет ширину 1920 пикселей при разрешение 72п/дюйм, увеличение разрешения до 300 даст ширину в 8000 пикселей. А это уже не влезет в 5К-монитор Причем, абсолютно без потери качества.

То есть, макет на 72 пикселя на дюйм, а у результата, например, 600.
Я сейчас на пробу взял фoтографию jpg (которую выложил выше). Там по умолчанию 300. Увеличил до 600. Сразу получаю картинку 9856х6528 с весом более 100 мегабайт.

Похоже?

[Romangurov]

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

[turli25]

Не все изображения должны быть менее 100 Кб. Зависит от контекста и целей сайта. Если создаете сайт для художников или фoтографов, где качество изображений является приоритетом, то не нужно сжимать изображения до 100 Кб.

Если все же хотите сжимать изображения, но не терять качество, используйте lossless-сжатие, например:

WebP (Web Picture)
JPEG XR (JPEG Extended Range)
JPEG 2000 (JPEG 2000 Compression)

[Val_Ery]

используйте lossless-сжатие

Ну, сколько можно использовать красиво звучащие иностранные слова...

Вы тут упоминали в качестве примера lossless webp... Делаем:

$ cwebp -lossless _DSC0238-01.jpeg -o _DSC0238-01.webp
Saving file '_DSC0238-01.webp'
File:      _DSC0238-01.jpeg
Dimension: 4928 x 2771
Output:    9355824 bytes (5.48 bpp)
Lossless-ARGB compressed size: 9355824 bytes
  * Header size: 17278 bytes, image data size: 9338520
  * Lossless features used: PREDICTION CROSS-COLOR-TRANSFORM SUBTRACT-GREEN
  * Precision Bits: histogram=7 transform=5 cache=0

Что там с весом (выделено красным)

$ ls -al _DSC0238-01*
-rw-r--r-- 1 valery valery 2771426 дек 28  2023 _DSC0238-01.jpeg
-rw-r--r-- 1 valery valery 9355824 янв 12 20:11 _DSC0238-01.webp

Теперь вопрос: ваш совет "использовать lossless" - это, не иначе, от большого опыта использования?

Ладно, предположим, что под lossless вы понимаете коэффициент сжатия каналов RGB, равный 100

$ cwebp -q 100 _DSC0238-01.jpeg -o _DSC0238-01-Q100.webp
Saving file '_DSC0238-01-Q100.webp'
File:      _DSC0238-01.jpeg
Dimension: 4928 x 2771
Output:    2999706 bytes Y-U-V-All-PSNR 53.59 54.58 54.82   53.93 dB
           (1.76 bpp)
block count:  intra4:      34064  (63.56%)
              intra16:     19528  (36.44%)
              skipped:      7263  (13.55%)
bytes used:  header:            886  (0.0%)
             mode-partition: 154897  (5.2%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |     100%|       0%|       0%|       0%|   53592
      quantizer:  |       0 |       0 |       0 |       0 |
   filter level:  |       0 |       0 |       0 |       0 |

Результат-то все равно сжатием не назовешь

$ ls -al _DSC0238-01*
-rw-r--r-- 1 valery valery 2771426 дек 28  2023 _DSC0238-01.jpeg
-rw-r--r-- 1 valery valery 2999706 янв 12 20:12 _DSC0238-01-Q100.webp
-rw-r--r-- 1 valery valery 9355824 янв 12 20:11 _DSC0238-01.webp

Потому... Не советуйте лучше...