Изображения в Opencart 3

Тема в разделе "Общие вопросы", создана пользователем zeleni, 26 мар 2021.

  1. zeleni

    zeleni Новичок

    Сообщения:
    9
    Симпатии:
    1
    Всем привет.
    Нужно как-то сделать, чтобы изображения товара по качеству были такими же, как и оригинал. Ocart почему-то их сжимает.
    Может кто знает как это сделать?
    P.s. В файле image.php, quality стоит на 100
     
  2. EugeneWebdev

    EugeneWebdev Пользователь

    Сообщения:
    80
    Симпатии:
    18
    Только по качеству? или и по размеру. К примеру можно легко выводить не обработанное изображение поменяв пару строк в нужном контроллере. Можно точнее суть задачи...
     
  3. zeleni

    zeleni Новичок

    Сообщения:
    9
    Симпатии:
    1
    Разве размер не зависит напрямую от качества или наоборот? По идее нужно и то и другое оставить без обработки
    Насколько я понимаю, нужно что-то с ресайзом делать.
     
  4. EugeneWebdev

    EugeneWebdev Пользователь

    Сообщения:
    80
    Симпатии:
    18
    Верно. Смотрите мы загружаем картинку и если вывод идет через обработчик и ресайз то картинка по любому будет меняться хоть вы качество 100 ставите.

    Во всех контроллерах картинки выводятся через ресайз:
    $this->model_tool_image->resize
    к примеру модуль рекомендуемые товары:
    \catalog\controller\extension\module\featured.php

    36 строка:
    $image = $this->model_tool_image->resize($product_info['image'], $setting['width'], $setting['height']);

    меняем на
    $image = 'image/' .$product_info['image'];

    И будет оригинал. И так везде где нужно выводить оригинал.
     
    zeleni нравится это.
  5. zeleni

    zeleni Новичок

    Сообщения:
    9
    Симпатии:
    1
    Благодарю)
    Тему можно закрывать
     
    EugeneWebdev нравится это.
  6. Chukcha

    Chukcha Специалист

    Сообщения:
    3.013
    Симпатии:
    685
    рано :)

    Все зависит от того что вы хотите поиметь с картинок

    Если вам нужно картинки в списках (категории, производители, модули и пр)
    То они должны быть отресайзены, хоть круть, хоть верть

    В карточке товара
    Основная Картинка должна иметь как минимум три размера
    и размещаться они должны в srcset под разные разрешения screen
    также и с доп картинками

    Путь неправильный, недорогой описан

    Путь правильный , но дорогой

    Не надо ничего менять - не благодарное дело
    1. Нужно писать модуль (заказать), с событиями, которые перехватывают модель-ресайз и создает массив нужных изображений

    Далее нужна адаптация практически под каждый шаблон
    2. Нужен правильный лазилоадер (я видел только у одного шаблона, но и там есть вопросы)
    3. и вот тут.. добавление srcset

    Для примера

    https://demo3.slasoft.kharkov.ua/en/product/joy-2019-black-new-skladyvayushijsya.html


    https://developers.google.com/speed...9-black-new-skladyvayushijsya.html&tab=mobile


    48 изображений!


    Когда php научится жать правильно webp то дойдет до 80 для моб девайсов
    + в примере не применялись никакие методы оптимизации
     
    Uspehav и Val_Ery нравится это.
  7. Val_Ery

    Val_Ery Новичок

    Сообщения:
    16
    Симпатии:
    0
    Да вроде правильно оно жмет... Я, во всяком случае, не вижу разницы в результатах, полученных при помощи GD и cwebp (при условии, что качество и там, и там выбирается одинаковое).

    В примере с великами низкое значение не из-за неправильной работы GD. А из-за того, что для каждого img установлен размер 92х92, а по факту грузится 500х500 и масштабируется.
    Код:
    <img decoding="async" class="lozad"
    src="https://demo3.slasoft.kharkov.ua/image/cache/500x500/catalog/Joy%202019%20gray/VEGA_JOY-1.webp"   
    srcset="
    https://demo3.slasoft.kharkov.ua/image/cache/300x300/catalog/Joy%202019%20gray/VEGA_JOY-1.webp 300w, 
    https://demo3.slasoft.kharkov.ua/image/cache/700x700/catalog/Joy%202019%20gray/VEGA_JOY-1.webp 768w, 
    https://demo3.slasoft.kharkov.ua/image/cache/500x500/catalog/Joy%202019%20gray/VEGA_JOY-1.webp 1200w"
    sizes="(max-width: 300px) 100vw, 680px"
    data-srcset="
    https://demo3.slasoft.kharkov.ua/image/cache/300x300/catalog/Joy%202019%20gray/VEGA_JOY-1.webp 300w, 
    https://demo3.slasoft.kharkov.ua/image/cache/700x700/catalog/Joy%202019%20gray/VEGA_JOY-1.webp 768w, 
    https://demo3.slasoft.kharkov.ua/image/cache/500x500/catalog/Joy%202019%20gray/VEGA_JOY-1.webp 1200w" title="JOY 2019 (black) new (складывающийся)" 
    alt="JOY 2019 (black) new (складывающийся)" data-loaded="true" 
    width="92" height="92">
    
    Вообще, странное решение для лайтбокса: зачем в thumbnail загонять все возможные размеры (когда там достаточно 92х92, а для вывода окна создается figure - в неё и надо закидывать все srcset) и что такое 300w (я не уверен, что сейчас найдется тело с шириной экрана, меньшей 300 пикселей), зачем оно?
    Тоже самое и с "главной" картинкой продукта - если она 228х228, то зачем вместо неё грузить 500х500?
    А в результате получается, что гугл пейдж спиду не нравятся неподходящие размеры...

    С веппи, на моё ИМХО, проблема в другом.
    Ресайз в ОК работает через getimagesize. И если у владельца магазин на php с версией, меньшей, чем 7.1, то GD не сможет получить размеры для webp. Там только через imagesx, imagesy... Получается, что для поддержки магазинов на старых версиях опенкарт нужно проверять версию php и создавать под неё какой-нибудь resize_webp().
    Сам на эти грабли наступил, когда тему для ВП делал: на хостинге клиентском старый php 7.0.22 был
     
  8. Chukcha

    Chukcha Специалист

    Сообщения:
    3.013
    Симпатии:
    685
    нет, не грузится 500х500
    В том-то и дело
    а грузится из srcset - почитайте как это работает

    Цель - иметь в src сразу эффективное изображение, и ругается не на время загрузки большого контента, а именно на его размер

    48,9 KiB => 42,7 KiB

    Кроме того, если обратите внимание, то уменьшен и DOM (а некоторые шаблоны, так ообврапят картинки, что мама не горюй)
    вместо
    li
    a
    img

    используется
    li
    img
     
  9. Val_Ery

    Val_Ery Новичок

    Сообщения:
    16
    Симпатии:
    0
    Ну, я исхожу из того, что показывает гугл пейдж спид.
    Перехожу по вашей же ссылке, открываю "настройте подходящий размер", выбираю любую ссылку на веппи, а там - https://demo3.slasoft.kharkov.ua/image/cache/500x500/catalog/Joy 2019 gray/VEGA_JOY-3.webp

    То есь, 500х500 - это не я придумал ;)

    Из сета на мобилках берётся тот, который подходит. Это 768px, а значит картинка с 500х500.

    Килобайты разницы получаются, когда пейдж спид берет актуальный вес изображения и сравнивает его с возможным весом этой картинки для мобильных экранов. Какой экран они считают эталоном - не знаю, может Яфон. Но они дают спрэд в 4 килобайта. Поэтому, какой у вас будет 360px или 400px - не имеет значения. Ибо в 4кб впишется...
    Кстати, сам гугл рекомендует такое действие
    Рисайз, вроде, изменить ширину/высоту...

    Последнее.
    Я не понимаю, зачем srcset засовывать в список с картинками. Там должен быть только thumbnail. А то, что открывается в попапе, вот туда и применять эти srcset'ы.
     
  10. Chukcha

    Chukcha Специалист

    Сообщения:
    3.013
    Симпатии:
    685
    не вы,
    но размер здесь НЕ ПРИЧЕМ

    в том-то и дело что в качестве превью используется нужное изображение (размер thumbnail), мало того там еще и lasyload

    Еще раз поясню
    Гугл индексирует картинку по src
     
  11. Uspehav

    Uspehav Новичок

    Сообщения:
    1
    Симпатии:
    0
    У меня только через $image = 'image/' .$result['image']; прошел. Но спасибо за направление мысли!)