Cómo aumentar la calidad de las fotos de productos JPG (Magento 2)


18

La compresión JPG en Magento 2 es muy fuerte, por lo que la calidad de las imágenes del producto se vuelve realmente mala en la vista Catálogo y Producto. ¿Cómo puedo cambiar la compresión de imagen para JPG en Magento 2?

Respuestas:


15

Esta solución me funciona:

Archivo: {Proveedor} / {Módulo} /etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Catalog\Model\Product\Image" type="{Vendor}\{Module}\Model\Product\Image" />
</config>

Archivo: {Proveedor} / {Módulo} / Modelo / Producto Puede establecer la calidad a lo que desee. Luego, vacíe el caché de imágenes.

namespace {Vendor}\{Module}\Model\Product;

class Image extends \Magento\Catalog\Model\Product\Image {

    protected function _construct() {
        $this->_quality = 100;

        parent::_construct();
    }
}

¿Cuál es la ruta para poner este archivo en su tema personalizado? No puedo entender la estructura de archivo M2. M1 fue muuuucho más fácil
styzzz

En app / code / {Vendor} / {Module}
Papamike

pero, ¿no se anulará durante la actualización? Pensé que tendrías que ponerlo en tu tema. ¿No?
styzzz

1
No, la carpeta {Vendor} debe ser reemplazada por su espacio de nombres (podría ser styzzz por ejemplo). No será anulado. Ej .: / app / code / styzzz / ImageCompression / ...
Papamike

Si tiene una imagen PNG para el producto, el nivel de compresión está codificado en el adaptador GD2: vendor/magento/framework/Image/Adapter/Gd2.php:167a 9 (máximo)
Franck Garnier

5

En cuanto a Magento 2.3.2, es posible establecer la calidad de imagen sin cambiar el código:

Tiendas> Configuración> Avanzado> Sistema> Configuración de carga de imágenes> Calidad> 100

La ruta de configuración XML es:

system/upload_configuration/jpeg_quality

Esto no proporciona una respuesta a la pregunta. Una vez que tenga suficiente reputación podrá comentar cualquier publicación ; en su lugar, proporcione respuestas que no requieran una aclaración del autor de la pregunta . - De la opinión
Jai

1
"¿Cómo puedo cambiar la compresión de imagen para JPG en Magento 2" ... ¿No era esta la pregunta?
K Vij

mejor que las otras respuestas ya que no se requiere cambio de código
Barry

2

inside - vendor / magento / module-catalog / Helper / Image.php

Encontrará el genérico:

public function setQuality($quality)
{
    $this->_getModel()->setQuality($quality);
    return $this;  
}

Si busca su uso, encontrará un método con el mismo nombre en:

magento / module-catalog / Model / Product / Image.php

y dentro de ese archivo:

/**
 * Default quality value (for JPEG images only).
 *
 * @var int
 */         
protected $_quality = 80;

Es este valor, que necesita configurarse en 95.

Esto reducirá la compresión y los artefactos en el sitio.

Supongo que sus muchachos tendrán que hacer estas modificaciones con una anulación de código adecuadamente implementada, es decir, no mediante la modificación de este archivo central. No soy un desarrollador de magento, de lo contrario tendría un crack ...


3
En realidad, el cambio de cualquier valor en el Core (proveedor) se sobrescribirá con la próxima actualización, por lo que cambiar los archivos core es, en general, una mala idea
Marcel Hauri

2

Las respuestas aquí son bastante incorrectas IMO. No es la calidad que debería cambiar de primera mano , es el tamaño de las imágenes. ¿Por qué?

Bueno, cuando se comprime una imagen para obtener el tamaño de archivo más pequeño posible, la tasa de compresión es la más beneficiosa para lograr ese objetivo. El segundo es las dimensiones de la imagen. Además, siempre debe comprimir la imagen de origen original antes de reducirla (no he comprobado cómo magento maneja esto) para reducir el tamaño del archivo tanto como sea posible mientras se conservan los detalles.

En las pantallas de retina necesita 2 veces el tamaño mostrado. Entonces, para que se muestre una imagen nítida a 250x250 píxeles, la imagen debe ser de 500x500 píxeles.

Así que comenzaría cambiando los temas view.xmlpara duplicar el tamaño mostrado. Si la imagen aún no se ve bien, entonces consideraría aumentar la configuración de calidad. Si tiene tiempo, también podría implementar imágenes receptivas (por lo que los tamaños duplicados solo se cargan en dispositivos de pantalla retina ).

También puede reducir el tamaño eliminando todos los metadatos de la imagen, sin estar seguro de si magento lo hace por defecto o no. Por lo general, es parte de buenos servicios de compresión de imágenes.


1
¡Gracias por explicar este compañero! ¡Sabía que debía haber una razón lógica para la tontería de imagen de magento! Sin embargo, todavía estoy un poco confundido acerca de la implementación. Entonces, supongamos que mis productos se muestran en la página del producto como un cuadrado de 700 px, entonces necesitaría crear una imagen que tenga un cuadrado de 1400 px y luego cambiar la configuración correspondiente en el archivo view.xml a 1400 px también. He estado jugando con esto, así como con la anulación mencionada en otras respuestas, pero la calidad siempre es menor en la página del producto que cuando hago clic en la imagen para ingresar a la vista 'ampliada'.
Joshua Flood

@JoshuaFlood Creo que la imagen ampliada tiene su propia entrada en view.xml con un tamaño más grande, no puedo recordar exactamente qué clave tiene o qué tamaño es
OZZIE

No te preocupes, lo solucioné. ¡Gracias por el consejo! No estoy seguro de qué fue exactamente, pero olvidé reemplazar las imágenes 'pequeñas' por las de doble tamaño, por lo que el problema podría estar allí.
Joshua Flood

Esta no es una buena respuesta. Lo que debe hacer es usar imágenes receptivas y el atributo srcset, no solo proporcionar una imagen más grande en general que se reducirá cuando sea necesario.
fritzmg

@fritzmg "de primera mano" "Si tiene tiempo, también podría implementar imágenes receptivas" ... ¿qué parte le resulta difícil de entender?
OZZIE
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.