Pre-genera las vistas previas usando convert de imagemagick en una terminal
In English  

Temas

• Lo que queremos
• Como hacerlo mejor
• Herramientas necesarias
• Escalar todas las imágenes por porcentaje
• Reducir todas las imágenes a no más de cierto tamaño
• Meter todas las imágenes en cierta area
• Darle a todas las imágenes un ancho máximo
• Darle a todas las imágenes un alto máximo
• Los comandos en una línea
• Notas al pie

Lo que queremos

Anteriormente escribí algunos artículos sobre como manejar las vistas previas en PHP.

Estos artículos hablan sobre la creación de vistas previas al ser requeridas. Si un cliente la pide, la vista previa es creada, servida, y removida.

Como hacerlo mejor

Mientras que esto hace el trabajo que es requerido, no es la manera más eficiente de hacer esto. Cada vez que una página es servida, las vistas previas son creadas.

Puedo pensar en al menos tres maneras de hacer esto más eficientemente, lo que resulta en una mayor velocidad de carga:

• Podemos servir la imagen completa, y hacer que Javascript o el navegador maneje las vistas previas en la máquina del visitante. La ventaja obvia de esto es que nuestro servidor trabaja menos. Pero estamos sirviendo las imágenes en tamaño completo. No veo esto como una manera elegante de hacerlo, pero con el poder de los navegadores ahora, difícilmente hay que pensar mucho en esto.
• Podemos pre-generar las diferentes versiones de las vistas previas y servir la que sea la mejor. Esto ahorrará ancho de banda y trabajo en el servidor. Esto es lo que estaremos haciendo en este artículo.
• Podemos pre-generar una imagen conteniendo todas las vistas previas a ser servidas, y entonces usar CSS para montrar cada parte de la imagen según sea necesario.

Este artículo cubrirá la tercera manera. Utilizaremos comandos para pre-generar las vistas previas necesarias para ahorrar poder de procesamiento y tiempo de carga. Nos costará espacio en el servidor. Como exemplo usaré estas tres imágenes, una 300x300, una 500x300 y una 300x500.

Herramientas necesarias

Si tienes las imágenes en Linux o en Mac, solo necesitas tener imagemagick instalado, una manera de revisar esto es:

Si no tienes el comando, en Ubuntu o una distribución basada en Ubuntu puedes simplemente usar:

En Mac puedes usar brew para installar imagemagick:

Una vez que imagemagick este disponible, podemos proceder a pre-generar las vistas previas.

Escalar todas las imágenes por porcentaje

Esto escalará las imágenes a un cierto porcentaje de su tamaño. Si es a 20%, el tamaño de 300 se vuelve 60, 500 se vuelven 100. Así que de las imágenes 300x300, 500x300 y 300x500; obtenemos 60x60, 100x60 y 60x100.

for original in *.jpg;
    do
        convert $original \
            -depth 16 \
            -gamma 0.454545 \
            -filter lanczos \
            -scale 20% \
            -gamma 2.2 \
            -quality 100 \
            -sampling-factor 1x1 \
        previo_20_`echo $original | tr '[:upper:]' '[:lower:]'`;
    done

Reducir todas las imágenes a no más de cierto tamaño

Esto creará una vista previa con un tamaño de no más de 100px. Para mantener las proporciones de las vistas previas y que no se vean distorcionadas, en las imágenes más anchas que altas la altura será menor a 100 pixeles. En las imágenes más altas que anchas, el ancho será menor de 100 pixeles.

for original in *.jpg; 
    do convert $original \
        -depth 16 \
        -gamma 0.454545 \
        -filter lanczos \
        -resize 100x100 \
        -gamma 2.2 \
        -quality 100 \
        -sampling-factor 1x1 \
        previo_100x100_`echo $original | tr '[:upper:]' '[:lower:]'`; 
    done

Meter todas las imágenes en cierta area

Esto va a crear un cuadrado de 100x100 pixeles y colocará la imagen justo en el centro. Esto es como el comando previo, solo que estiende el lado más corto y centra el resultado en el cuadro.

for original in *.jpg; 
    do convert $original \
        -depth 16 \
        -gamma 0.454545 \
        -filter lanczos \
        -resize 100x100 \
        -gamma 2.2 \
        -quality 100 \
        -sampling-factor 1x1 \
        -gravity center \
        -extent 100x100
        previo_boxed_`echo $original | tr '[:upper:]' '[:lower:]'`; 
    done

Darle a todas las imágenes un ancho máximo

Esto creará una vista previa con un archo de 100 pixeles independientemente del tamaño de la imagen. Para mantener las proporciones y que las vistas previas no se vean distorcionadas, algunas imágenes podrían ser más altas o más cortas, pero todas las imágenes resultantes tendrán un ancho de 100 pixéles.

for original in *.jpg; 
    do convert $original \
        -depth 16 \
        -gamma 0.454545 \
        -filter lanczos \
        -resize 100x \
        -gamma 2.2 \
        -quality 100 \
        -sampling-factor 1x1 \
        previo_w100_`echo $original | tr '[:upper:]' '[:lower:]'`; 
    done

Darle a todas las imágenes un alto máximo

Por otro lado, esto hará una vista previa con 100 pixeles de altura. Para mantener las proporciones y así las imágenes no se vean distorcionadas, algunas imágenes podrían ser más anchas y algunas más delgadas. Pero todas las imágenes resultantes tendrán una altura de 100 pixeles.

for original in *.jpg; 
    do convert $original \
        -depth 16 \
        -gamma 0.454545 \
        -filter lanczos \
        -resize 100x \
        -gamma 2.2 \
        -quality 100 \
        -sampling-factor 1x1 \
        previo_`echo $original | tr '[:upper:]' '[:lower:]'`; 
    done

Los comandos en una línea

Escalar todas las imágenes por porcentaje. Esto escalará las imágenes a un cierto porcentaje de su tamaño.

Reducir todas las imágenes a no más de cierto tamaño. Esto creará una vista previa con un tamaño de no más de 100px.

Meter todas las imágenes en cierta area. Esto va a crear un cuadrado de 100x100 pixeles y colocará la imagen justo en el centro.

Darle a todas las imágenes un ancho máximo. Esto creará una vista previa con un archo de 100 pixeles independientemente del tamaño de la imagen.

Darle a todas las imágenes un alto máximo. Esto hará una vista previa con 100 pixeles de altura.

Notas al pie

Para una referencia completa del comando convert puedes ver la referencia, está en inglés:

https://legacy.imagemagick.org/Usage/resize/ (Me gusta más legacy)

https://imagemagick.org/script/convert.php