¿Cómo optimizar masivamente imágenes PNG para PrestaShop?

Este fin de semana hemos estado peleándonos con las imágenes de un ecommerce bajo PrestaShop, por lo que vamos a compartir con todos vosotros el problema y la solución que hemos aplicado. Os explicaremos como maneja PrestaShop las imágenes, como convertir masivamente imágenes PNG y como optimizar esas imágenes PNG.

La situación inicial

Todo empezó con los problemas que tenían las imágenes de los productos de un ecommerce bajo PrestaShop en Google Shoppping. La mayor parte de las imágenes de los productos de la tienda eran imágenes PNG-8 indexado con fondo transparente, algunas imágenes PNG-24 con espacio de color RGB y unas cuantas imágenes JPG.

Con las imágenes JPG Google Shopping funciona sin problemas, con las imágenes PNG-24 también, pero con las imágenes PNG-8 indexadas teníamos el problema de que el fondo en vez de ser transparente cambiaba a negro. Y este problema se acentuaba con los anuncios de remarketing dinámico de producto, ya que ahí quedaba fatal el fondo negro de algunos productos.

El problema de PrestaShop con las imágenes PNG

El problema principal de PrestaShop es como maneja las imágenes PNG.

PrestaShop parte de la base que las imágenes de productos tienen que estar en formato JPG.

La función “public function getImageLink” cuando muestra una imagen siempre cambia la extensión a JPG. Por tanto la imagen se guarda correctamente al subirla, pero al mostrarla en la web la función siempre cambia la extensión por JPG. No hace una conversión; sino que solo cambia el nombre de la extensión.

O sea, subimos una imagen de producto en formato PNG y cuando PrestaShop la muestra le pone extensión JPG (aunque la imagen siga siendo una imagen PNG). A los navegadores les da igual, pero si guardamos la imagen PNG con extensión JPG y la abrimos con PrestaShop, da un error de formato de imagen incorrecto.

Y este es el comportamiento por defecto de PrestaShop. Normalmente no nos damos cuenta porque las imágenes de producto se suelen subir en formato JPG. JPG está hecho para fotos y se pueden comprimir mucho mejor; normalmente no se suben imágenes de productos en formato PNG.

La solución para PrestaShop

Hacer un override de la función “public function getImageLink” y unos cambios en el archivo .htaccess para que PrestaShop muestre las imágenes de producto con extensión PNG (cuando son archivos PNG) y no siempre con la extensión JPG.

Nosotros lo tenemos implementado ya en varios PrestaShop y ahora estamos viendo como lo podemos estandarizar en un módulo. A ver si nuestros especialistas de PrestaShop tienen unos dias y lo pueden hacer.

La solución a nuestro problema

La solución del problema pasa por dos fases:

1. Quitar el fondo transparente de las imágenes PNG y reemplazarlas por un fondo blanco.
2. De paso que modificamos las imágenes, las optimizamos también, para que tengan el menor tamaño posible. ¡Viva el WPO y WordPress!

Quitar el fondo transparente de un PNG de forma automática

Esto lo podemos hacer con el programa de línea de comando CONVERT incluido en Imagegick.

Aquí os explicamos como hacerlo bajo Windows, después de haber instalado Imagemagick en la carpeta «C:\Program Files\ImageMagick\». Si lo instaláis en otra carpeta, hay que adaptar el archivo BAT con la ruta del archivo convert.exe.

Los pasos:

1) Bajamos las imágenes desde PrestaShop a una carpeta en el ordenador.

2) Creamos un archivo BAT llamado 01convertir.bat con el siguiente contenido (lo que hace es buscar todos los archivo PNG de la carpeta actual y de todas las carpetas que cuelguen de la misma; y va procesándolas una a una):

for /R %%f in (*.png) do (
"C:\Program Files\ImageMagick\convert.exe" -background white -alpha remove -alpha off "%%f" "%%f"
)
pause

3) Lo guardamos.

4) Lo ejecutamos y automáticamente elimina el fondo transparente de la imagen y le pone un fondo blanco.

OJO: Hacer una copia de seguridad antes de ejecutar el archivo de proceso por lotes, ya que 01convertir.png sobreescribe las imágenes.

Optimizar las imágenes PNG de forma automática

La web que utilizamos muchas veces para optimizar una o dos imágenes JPG y PNG es http://tinypng.com que utiliza la librería pngquant que puede descargarse y usarse bajo Windows, Linux y Mac OS.

Para Windows y Mac OS además hay un interfaz gráfico, pero para la optimización de muchas imágenes es mucho más cómodo utilizar la línea de comando.

pngquant consigue comprimir imágenes PNG hasta en un 73% frente al tamaño que tiene una imagen guardada con «Guardar para web» de PrestaShop. Sencillamente genial y por eso nos encanta.

Aquí os explicamos como hacerlo bajo Windows, después de haber instalado pngquant (os recomendamos instalar PNGoo — Windows GUI for batch conversion) en la carpeta «C:\Program Files\png\». Si lo instaláis en otra carpeta, hay que adaptar el archivo BAT con la ruta del archivo convert.exe.

1) En la carpeta a la que nos hemos bajado las imágenes en el punto anterior creamos un archivo BAT llamado 02optimizar.bat con el siguiente contenido lo que hace es buscar todos los archivo PNG de la carpeta actual y de todas las carpetas que cuelguen de la misma; y va procesándolas una a una):

for /R %%f in (*.png) do (
"C:\Program Files\png\libs\pngquanti\pngquanti.exe" "%%f" --ext .png --force
)
pause

2) Lo ejecutamos y automáticamente va optimizando todas las imágenes en las carpetas y subcarpetas, sobreescribiendo las imágenes originales.

OJO: Hacer una copia de seguridad antes de ejecutar el archivo de proceso por lotes, ya que 02optimizar.png sobreescribe las imágenes.

Volver a subir las imágenes a PrestaShop

Una vez cambiado el fondo y optimizadas las imágenes, las volvemos a subir por FTP a la tienda de PrestaShop. Como no hemos hecho ningún cambio de tamaño de las mismas, se pueden reemplazar los archivos tal cual, sin tener que hacer nada más.

 

Aunque muchas veces no tengáis exactamente el mismo problema, hemos querido compartir nuestra solución con todos vosotros, para que os de ideas o para que os sirva para saber como se puede optimizar imágenes PNG automáticamente y de forma recursiva en distintas carpetas.

Si tenéis algunda duda, dejarnos un comentario. Y no olvidéis siempre hacer una copia de seguridad y luego comprobar que todo funciona correctamente.