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:
- Una versión en miniatura recortada que mide 422 por 316
- 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,-o5switch establece el nivel de optimización, siendo 0 el más bajo. - Para
jpegoptim,-selimina todos los metadatos de la imagen y-qestablece 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.