GNU/Linux >> Tutoriales Linux >  >> Linux

Mis comandos favoritos de Linux para optimizar imágenes web

Solía ​​mantenerme alejado de las imágenes cuando trabajaba en línea. El manejo y la optimización de imágenes pueden ser imprecisos y lentos.

Luego encontré algunos comandos que me hicieron cambiar de opinión. Para crear páginas web, uso Jekyll, así que lo he incluido en las instrucciones. Sin embargo, estos comandos también funcionarán con otros generadores de sitios estáticos.

Comandos de imagen en Linux

Más recursos de Linux

  • Hoja de trucos de los comandos de Linux
  • Hoja de trucos de comandos avanzados de Linux
  • Curso en línea gratuito:Descripción general técnica de RHEL
  • Hoja de trucos de red de Linux
  • Hoja de trucos de SELinux
  • Hoja de trucos de los comandos comunes de Linux
  • ¿Qué son los contenedores de Linux?
  • Nuestros últimos artículos sobre Linux

Los comandos que marcaron la diferencia para mí son optipng , jpegoptim y, por supuesto, el venerable imagemagick . Juntos, hacen que el manejo de imágenes sea fácil de administrar o incluso automatizar.

Aquí hay una descripción general de cómo implementé mi solución usando estos comandos. Coloqué imágenes de artículos en mi static/images carpeta. A partir de ahí, generé dos copias de todas las imágenes PNG y JPG:

  1. Una versión en miniatura recortada que mide 422 por 316
  2. Una versión de banner más grande, que mide 1024 por 768

Luego coloqué cada copia (la miniatura y el banner) en su propia carpeta y aproveché las variables personalizadas de Jekyll para las rutas de las carpetas. Describo cada uno de estos pasos con mayor detalle a continuación.

Instalación

Para seguir mi solución, asegúrese de tener todos los comandos instalados. En Linux, puede instalar optipng , jpegoptim y imagemagick usando su administrador de paquetes.

En Fedora, CentOS, Mageia y similares:

$ sudo dnf install optipng jpegoptim imagemagick

En Debian, Elementary, Mint y similares:

$ sudo apt install optipng jpegoptim imagemagick

En macOS, use MacPorts o Homebrew.

brew install optipng jpegoptim imagemagick

En Windows, usa Chocolatey.

Creación de carpetas para miniaturas y banners

Después de instalar los comandos, creé nuevas carpetas en static/images . Las miniaturas generadas se colocan en img-thumbs y los banners van en img-normal .

$ cd static/images
$ mkdir -p img-thumbs img-normal

Con las carpetas creadas, copié todos los archivos GIF, SVG, JPG y PNG en ambas carpetas. Utilizo los GIF y SVG tal como están para las miniaturas y las imágenes de banner.

$ cp content/*.gif img-thumbs/; cp content/*.gif img-normal/
$ cp content/*.svg img-thumbs/; cp content/*.svg img-normal/
$ cp content/*.jpg img-thumbs/; cp content/*.jpg img-normal/
$ cp content/*.png img-thumbs/; cp content/*.png img-normal/

Procesamiento de miniaturas

Para cambiar el tamaño y optimizar las miniaturas, uso mis tres comandos.

Uso el mogrify comando de ImageMagick para cambiar el tamaño de los JPG y PNG. Como quiero que las miniaturas tengan un tamaño de 422 por 316, el comando se ve así:

$ cd img-thumbs
$ mogrify -resize 422x316 *.png
$ mogrify -format jpg -resize 422x316 *.jpg

Ahora optimizo los PNG usando optipng y los JPG usando jpegoptim :

$ for i in *.png; do optipng -o5 -quiet "$i"; done
$ jpegoptim -sq *.jpg

En el comando anterior:

  • Para optipng , -o5 switch establece el nivel de optimización, siendo 0 el más bajo.
  • Para jpegoptim , -s elimina todos los metadatos de la imagen y -q establece el modo silencioso.

Procesamiento de carteles

Proceso las imágenes de los banners esencialmente de la misma manera que proceso las miniaturas, aparte de las dimensiones, que son 1024 por 768 para los banners.

$ cd ..
$ cd img-normal
$ mogrify -resize 1024x768 *.png
$ mogrify -format jpg -resize 1024x768 *.jpg
$ for i in *.png; do optipng -o5 -quiet "$i"; done
$ jpegoptim -sq *.jpg

Configurando las rutas en Jekyll

El img-thumbs El directorio ahora contiene mis miniaturas. y img-normal contiene los carteles. Para facilitarme la vida, configuré ambos en variables personalizadas en mi Jekyll _config.yml .

content-images-path: /static/images/img-normal/
content-thumbs-images-path: /static/images/img-thumbs/

Usar las variables es simple. Cuando quiero mostrar la miniatura, antepongo content-thumbs-images-path a la imagen Cuando quiero mostrar el banner completo, antepongo content-images-path .

{% if page.banner_img %}
 <img src="{{ page.banner_img | prepend: site.content-images-path | \
prepend: site.baseurl | prepend: site.url }}" alt="Banner image for \
{{ page.title }}" />
{% endif %}

Conclusión

Hay varias mejoras que podría hacer en mis comandos de optimización.

Usando rsync para copiar solo los archivos modificados a img-thumbs y img-normal es una mejora obvia. De esa manera, no estoy reprocesando archivos una y otra vez. Agregar esos comandos a los ganchos de confirmación previa de Git o a una canalización de CI es otro paso útil.

Cambiar el tamaño y optimizar las imágenes para reducir su tamaño es una victoria para el usuario y la web en su conjunto. Tal vez mi próximo paso para reducir el tamaño de las imágenes sea webp.

Menos bytes transmitidos a través del cable significa una menor huella de carbono, pero ese es otro artículo. La victoria de UX es lo suficientemente buena por ahora.


Este artículo se publicó originalmente en el blog del autor y se volvió a publicar con permiso.


Linux
  1. 20 comandos esenciales de Linux para cada usuario

  2. Hoja de trucos para los comandos comunes de Linux

  3. Conceptos básicos de comandos de Linux:7 comandos para la gestión de procesos

  4. Mis 8 comandos prácticos favoritos de Linux

  5. ForeverNote:un cliente web de Evernote para Linux

Comandos de FreeDOS para fanáticos de Linux

Los mejores comandos de Linux para administradores de sistemas

40 comandos de red Linux útiles para administradores de sistemas modernos

Los 25 mejores comandos de Vim para Linux

Comandos para la Gestión de Procesos en Linux

Comandos Nmap - 17 comandos básicos para la red Linux