Optimización de imágenes mejorando rendimiento y posicionamiento

Introducción

Tras llevar bastante batallando en el campo móvil, hemos advertido de que prácticamente ningún proyecto se preocupa por este proceso.

¿Cómo de importante es optimizar las imágenes?

Parece un tontería pero es realmente importante. Afecta a la velocidad de carga de la web, a la memoria usada por el dispositivo y a la experiencia del usuario.

Todo esto es muy importante para Google, por lo que si lo corregimos conseguiremos mejorar el posicionamiento.

¿Cómo descubrir si nuestro Prestashop está afectado?

Seguramente nuestra tienda Prestashop estará afectada, puedes buscar o localizar algún módulo que prometa arreglarlo, sin embargo, no existe a día de hoy módulo alguno que arregle esto en los ecommerce Prestashop.

Comprobar hasta dónde llega el problema es fácil, simplemente preguntamos a aquel que todo lo sabe en la red: Google.

Google cuenta con un herramienta llamada PageSpeed Inights, esta herramienta nos facilitará un resumen de todo lo que podemos mejorar dentro de la tienda Prestashop, incluyendo un apartado para la optimización de imágenes.

Para aquéllos que se ahogan en un vaso de agua, indicamos cómo analizar nuestro ecommerce en 6 sencillos paso:

1. Accedemos desde un navegador a esta página https://developers.google.com/speed/pagespeed/insights/
2. Copiamos (ctrl + c) la URL de la página que queremos analizar.
3. Insertamos (ctrl + v) la URL de antes, en la página de la herramienta..
4. Pulsamos el botón “Analizar”
5. Esperamos…
6. La herramienta muestra un conjunto de sugerencias para mejorar nuestro sitio web y, dependiendo de lo que se desee mejorar, solo tendremos que desplegar las opciones para obtener más información.

Optimización de las imágenes de mi tienda Prestashop del tirón

Como ya te indicábamos, en Prestashop Google siempre te dirá que hay imágenes para optimizar, si se tratan de unas pocas podemos solucionarlo fácilmente pero, si no es así, tendremos un problema.

Somos informáticos y nos gustan los retos, por ello podemos montar un sistema para optimizar las imágenes de un directorio con solo un comando (en un futuro lo haremos en un módulo Prestashop directamente)

Para empezar necesitaremos una serie de programas que podéis encontrar fácilmente en la web:

• jpegtran
• optipng
• djpeg
• cjpeg

Los podremos encontrar en http://gnuwin32.sourceforge.net/packages/jpeg.htm y http://optipng.sourceforge.net/.

Una vez descargados los programas, creamos en C una carpeta llamada imgoptimization y copiamos en él el .exe de optipng.

Acto seguido, crearemos dos archivos bat para simplificar todas las llamadas.

Optimizar imágenes – optimize.bat

Creamos un archivo optimize.bat en la carpeta imgoptomization cuyo contenido debe ser el siguiente (reemplazando las rutas de los ejecutables):

@echo none
REM Optimizing JPEG with jpegtran
 forfiles /p %1 /s /m “*.jpg” /c “cmd /c ruta_a_optimizejpg.bat %1 @path”
 ::C: C:Usersnombre_usuarioruta_carpetaimagenesimageoptimizationjpegtran.exe -optimize -progressive -copy none -outfile @path @path
 REM Optimizing PNG with pngout
   ::forfiles /p %1 /s /m “*.png” /c “cmd /c echo processing @path && C:Usersnombre_usuarioruta_carpetaimagenesimageoptimizationpngout.exe @path”
   REM Optimizing PNG with optipng
forfiles /p %1 /s /m “*.png” /c “cmd /c echo processing @path &&  ruta_a_optipng.exe -force -o7 @path”
pause

Optimizar imágenes – optimizejpg.bat

Creamos el segundo archivo optimizejpg.bat en la misma carpeta con el siguiente contenido.

::http://gnuwin32.sourceforge.net/packages/jpeg.htm
echo processing %2
set size=0

::Ruta dónde está instalado el prorgama GnuWin32
” ruta_a_djpeg.exe” -pnm %2 > %1tmp.pnm
call :filesize %1tmp.pnm
IF %size% gtr 0 (
” ruta_a_cjpeg.exe” -quality 80 %1tmp.pnm > %1tmp.jpg
   call :filesize %1tmp.jpg
   IF %size% gtr 0 (
” ruta_a_jpegtran.exe” -optimize -progressive -copy none -outfile %2 %1tmp.jpg
)
)
del %1tmp.pnm
del %1tmp.jpg
:: set filesize of 1st argument in %size% variable, and return
:filesize
   set size=%~z1
   exit /b 0

Este script tiene como objetivo ejecutar los programas relacionados con los jpeg (será necesario cambiar las rutas de acceso a cada ejecutable por las de vuestro equipo).

Ejecutamos la optimización de imágenes

Para la ejecución de los programas se deberá abrir un cmd de windows, situarnos sobre la carpeta en la cual están los scripts y ejecutar el siguiente comando indicando la ruta dónde se encuentran las imágenes de nuestra tienda Prestashop:

optimize.bat ruta_a_optimizar

Este proceso puede tardar bastante tiempo, todo depende del volumen de datos que tenga para procesar.

Mientras se ejecuta puede que aparezca un error similar al siguiente:

Este error es producido a causa de que los programa no reconocen un archivo jpg, en estos casos se tendrá que pulsar sobre aceptar por cada una de las imágenes que presenten dicho problema.

Resultado del proceso

Tras finalizar los procesos, obtendremos todas las imágenes de la tienda prestashop reducidas y listas para ser cargadas de nuevo al servidor.

¿No te atreves o necesitas ayuda?

Consúltanos. Ya sea por teléfono o por email, estaremos encantados de echarte una mano.

Cuentas además con la opción de mantenimiento. Están es una de las tareas que podemos realizar en tu tienda.