Якість зображень

[Kostiantyn_N]

Добрий день. Мені недавно встановили opencart, тема Remarket. В мене книжковий інтернет-магазин. Незадоволений якістю зображень на виході порівняно із якістю на сайті видавництва, де взято ці зображення і навіть порівняно з моїм старим діючим сайтом на іншій cms. При збільшенні зображення впадає в очі поганенька якість. Якщо літери на сторінці з текстом невеликі, читати погано.

 

Я збільшив розмір "великого зображення товару" і розмір "спливаючого зображення товару" з 700х700 до 970х970 (такий розмір оригіналів в PNG), в файлі system/library/image.php якість збереження файлів виставив 100% замість 90%. Пробував відключати webp - як не дивно, в якості суттєвої різниці при збільшенні не бачу.

 

І от питання... якщо збережено розмір оригінального зображення, якість збереження файлів стоїть 100%, відключено webp - то як може бути, що все одно в результаті зображення виходить значно гіршим за якістю, не таким чітким, як оригінал? Виходить, незважаючи на ці налаштування, двигун все одно суттєво жамкає оригінальне зображення.

 

Є ті, хто також вбачає в цьому проблему? Що можна зробити з цим?

Змінено 1 травня 2025 користувачем Kostiantyn_N

[TBou3aBTpaK]

Дивіться напевно в модифікаторі шаблону. 

01.05.2025 в 14:57, Kostiantyn_N сказал:

файлі system/library/image.php якість збереження файлів виставив 100% замість 90%.

/system/oct_***_theme.ocmod.xml

[TBou3aBTpaK]

Якщо це потрібно для "демо" книжок, то бачив роблять у pdf і кріплять у товар. 

[drOC]

Ви впевнені що у вас фактично 100% стиснення застосовується?

 

В принципі, є дві популярні бібліотеки - GD та Imagick, але ймовірно у вас просто налаштування 100% а фактично десь в коді прописано 95 чи щось типу того. Або йде переконвертація між форматами, треба дивитись приклади.

 

Може у вас просто ще додаткове масштабування через браузер, типу ще на стороні клієнта йде якась додаткова обробка від шаблону або встановлений якийсь модуль кешування, який додатково переконвертує графіку.. причин багато може бути.

[Yoda]

01.05.2025 в 14:57, Kostiantyn_N сказал:

Добрий день. Мені недавно встановили opencart, тема Remarket. В мене книжковий інтернет-магазин. Незадоволений якістю зображень на виході порівняно із якістю на сайті видавництва, де взято ці зображення і навіть порівняно з моїм старим діючим сайтом на іншій cms. При збільшенні зображення впадає в очі поганенька якість. Якщо літери на сторінці з текстом невеликі, читати погано.

 

Я збільшив розмір "великого зображення товару" і розмір "спливаючого зображення товару" з 700х700 до 970х970 (такий розмір оригіналів в PNG), в файлі system/library/image.php якість збереження файлів виставив 100% замість 90%. Пробував відключати webp - як не дивно, в якості суттєвої різниці при збільшенні не бачу.

 

І от питання... якщо збережено розмір оригінального зображення, якість збереження файлів стоїть 100%, відключено webp - то як може бути, що все одно в результаті зображення виходить значно гіршим за якістю, не таким чітким, як оригінал? Виходить, незважаючи на ці налаштування, двигун все одно суттєво жамкає оригінальне зображення.

 

Є ті, хто також вбачає в цьому проблему? Що можна зробити з цим?

https://github.com/IP-CAM/Imagick-Library-Opencart-v.2.0.x/blob/master/image.php

[Kostiantyn_N]

А якщо зробити, щоб в галереї показувались оригінали зображень, а не ескізи, то це велика складна робота чи це можна десь просто налаштувати?

[ostriq]

В 06.06.2025 в 15:18, Kostiantyn_N сказав:

А якщо зробити, щоб в галереї показувались оригінали зображень, а не ескізи, то це велика складна робота чи це можна десь просто налаштувати?

Так одне зображення буде забагато "важити" і сторінка буде грузитись дуже повільно, що погано як для гугла так і для юзера. 

[Kostiantyn_N]

Цитата

Так одне зображення буде забагато "важити" і сторінка буде грузитись дуже повільно, що погано як для гугла так і для юзера. 

 

А якщо це не зробити, то юзер закриє сторінку через нечіткі зображення і неможливість прочитати дрібний текст. Що робити? Тут писали про https://github.com/IP-CAM/Imagick-Library-Opencart-v.2.0.x/blob/master/image.php , але я дивився сайт, де це працює, і не побачив там хорошої якості зображень.

 

[sasha3337774]

В 01.07.2025 в 21:05, Kostiantyn_N сказав:

 

А якщо це не зробити, то юзер закриє сторінку через нечіткі зображення і неможливість прочитати дрібний текст. Що робити? Тут писали про https://github.com/IP-CAM/Imagick-Library-Opencart-v.2.0.x/blob/master/image.php , але я дивився сайт, де це працює, і не побачив там хорошої якості зображень.

 

Можете сайт свій показати?

[Kostiantyn_N]

Цитата

Можете сайт свій показати?

 

Його наразі розробник тримає на паролі

[markimax]

В 01.05.2025 в 14:57, Kostiantyn_N сказав:

І от питання... якщо збережено розмір оригінального зображення, якість збереження файлів стоїть 100%, відключено webp - то як може бути, що все одно в результаті зображення виходить значно гіршим за якістю, не таким чітким, як оригінал?

Який розмір в пікселях оригінального зображення?

Бо

			if ($width_orig != $width || $height_orig != $height) {
				$image = new Image(DIR_IMAGE . $image_old);
				$image->resize($width, $height);
				$image->save(DIR_IMAGE . $image_new);
			} else {
				copy(DIR_IMAGE . $image_old, DIR_IMAGE . $image_new);
			}

Якщо будите вказувати розміри оригіналу, не буде "двигун" обробляти зображення при ресайзі та буде виводити фактично ориігнал
А для стискання WEBP треба використовувати оригінальну бібліотеку від Google в режиму якості "Оптимізація без втрат"

[Kostiantyn_N]

В 09.07.2025 в 16:30, markimax сказав:

Якщо будите вказувати розміри оригіналу, не буде "двигун" обробляти зображення при ресайзі та буде виводити фактично ориігнал

 

Так, в цьому випадку якість хороша, пробували. Але в мене всі зображення різних розмірів, різних пропорцій і орієнтацій. То щоб виводився оригінал, треба було б всі зображення повписувати, наприклад, в квадрат єдиного розміру, а як це зробити для тисяч зображень, тим більше зображення переносяться автоматично через xml зі старого сайту.

[markimax]

В 09.07.2025 в 18:42, Kostiantyn_N сказав:

 

Так, в цьому випадку якість хороша, пробували. Але в мене всі зображення різних розмірів, різних пропорцій і орієнтацій. То щоб виводився оригінал, треба було б всі зображення повписувати, наприклад, в квадрат єдиного розміру, а як це зробити для тисяч зображень, тим більше зображення переносяться автоматично через xml зі старого сайту.

Ну так зробіть "стандартний" Layer в Photoshop зі стандартним розмірами під ресайз, та уніфікуйте зображення з Export to WEB. Це вже, як кажуть, "ваша" проблема.
А opencart тут не "винний", він чітко може показувати оригінали без погіршення якості. Просто copy(DIR_IMAGE . $image_old, DIR_IMAGE . $image_new); І навіть якісно WEBP в режиму якості "Оптимізація без втрат" через модулі оригінальної бібліотеки Google cwebp

[markimax]

Ось що пише ШІ (Штучний Ідіот) по питанню уніфікації розмірів зображень пакетно
 

Щоб пакетно змінити розміри всіх зображень до 1000x1000 пікселів, незалежно від їх початкових розмірів, можна зробити це автоматично в кількох програмах:

---

🥇 Adobe Photoshop (через Image Processor + Action)

🔧 Кроки:

1. Створи Action (дію):

   • Відкрий будь-яке зображення.

   • Відкрий панель Actions (Window → Actions).

   • Створи нову дію: New Action.

   • В меню Image → Canvas Size, постав 1000 x 1000 px, вибери якір по центру, фон — білий або прозорий.

   • Потім у Image → Image Size встанови ширину або висоту 1000 px (залишаючи співвідношення).

   • Зупини запис.

2. Запусти пакетну обробку:

   • File → Automate → Batch

   • Вибери свою дію.

   • Джерело — вказуєш теку зі зображеннями.

   • Output — вказуєш папку для збереження.

   • Натисни OK — Photoshop обробить всі файли.

✅ Це дасть однаковий розмір полотна 1000x1000 та пропорційне зображення всередині.

---

🥈 XnConvert (безкоштовна, для Windows/macOS/Linux)

🔧 Кроки:

1. Завантаж XnConvert.

2. Перейди у вкладку "Input" — додай усі файли.

3. Вкладка "Actions":

   • Додай дію Image → Resize — встанови 1000 x 1000, пропорції можна увімкнути/вимкнути.

   • Додай дію Canvas Resize (якщо хочеш вставити зображення в квадратне полотно).

4. У вкладці "Output" обери папку та формат.

5. Натисни Convert.

✅ Простий, швидкий інтерфейс, чудово підходить для batch-обробки без Photoshop.

---

🥉 ImageMagick (через командний рядок)

Для просунутих користувачів або автоматизації скриптами.

magick mogrify -path output_folder -resize 1000x1000^ -gravity center -extent 1000x1000 *.jpg

• -resize 1000x1000^ — збільшує до покриття

• -extent 1000x1000 — обрізає або додає поля

• -gravity center — центрує

---

Підсумок:

Метод	Плюси	Мінуси
Photoshop	Гнучкість, якість	Потрібна ліцензія
XnConvert	Безкоштовний, простий	Менше контролю над кожним кроком
ImageMagick	Ідеально для скриптів і автоматизації	Потрібно знання терміналу