Blog personal de IT, viajes y otros hobbies

Etiqueta: wpo

Optimización de ficheros GIF's

WPO para ficheros GIF’s

Últimamente estoy agregando muchas animaciones para ayudar a la comprensión de mis artículos. Y a simple vista parecen GIF’s de toda la vida, pero déjenme decirles que no todo es lo que parece.

A raíz de un mensaje en Twitter decidí escribir este artículo, ya que por todos los medios posibles debemos evitar el uso de GIF’s en nuestras entradas. Ya explicaré por qué.

¿Y qué usamos entonces?

En su lugar vamos a utilizar vídeos que se reproduzcan automáticamente en bucle. Sí, has leído bien, vídeos. Vamos a ver cómo con la etiqueta video de HTML5 y un par de atributos podemos simular el comportamiento de un GIF:

<video autoplay muted loop playsinline>
  	<source src="video.mp4" type="video/mp4">
  	<source src="video.ogg" type="video/ogg">
	Your browser does not support the video tag.
</video>
  • autoplay: permitirá que el vídeo se reproduzca automáticamente ni bien cargue la página (los navegadores Chrome lo cargarán en diferido).
  • muted: Chrome no reproduce automáticamente los vídeos a menos que indiquemos que lo haga sin sonido.
  • loop: este es el simple atributo que permite reproducir el vídeo en bucle dando la sensación que es un GIF clásico de toda la vida.
  • playsinline: atributo necesario para que el video pueda reproducirse automáticamente en dispositivos iOS.

Insertar un vídeo en WordPress

El nuevo editor Gutenberg nos permite agregar y configurar el vídeo con para que se comporte como un GIF, solo debes seguir los siguientes pasos:

  1. Añade un nuevo bloque Gutenberg a tu entrada del tipo Vídeo.
  2. Selecciona el vídeo de la Librería de Medios o bien carga el fichero.
  3. Activa los atributos de Reproducción automática, Repetir y Silenciado.
  4. Mantén desactivada la opción Controles de reproducción.

¿Por qué no debemos usar GIF’s?

Básicamente porque el algoritmo de compresión de la tecnología GIF es muy pobre, resultando en ficheros demasiados pesados.

En su lugar los ficheros de vídeos, en sus múltiples formatos, pueden devolvernos la misma información con igual o mejor calidad pero con un tamaño muchísimo menor. Sí, este es otro punto a agregar en vuestra lista de técnicas de WPO.

Veamos un simple ejemplo de dos ficheros con la misma animación y las siguientes características:

  • Dimensión: 270px x 266px
  • Duración: 4.1s
  • FPS (Frames Por Segundo): 15
Fichero GIFFichero de vídeo MP4
Tamaño de fichero: 183Kb 👎🏻Tamaño de fichero: 21Kb 👍🏻

Vemos como con este simple ejemplo el fichero de vídeo llega a pesar un 88,5% menos que su respectivo en el formato GIF.

Herramientas para crear GIF’s y Vídeos

Para crear todas las animaciones que uso en mi blog utilizo la herramienta GIPHY Capture. Es muy fácil de utilizar ya que nos superpone una ventana en nuestro escritorio «para capturar» los movimientos que realicemos y nos permite editar y exportar la animación tanto en GIF (por favor no lo hagáis), en vídeo (👍🏻) o bien subirlos a sus propios servidores.

Una vez capturada la animación la aplicación presenta un panel donde podemos configurar los parámetros para renderizar un fichero final de calidad y de bajo peso.

Editor nativo de la aplicación GIPHY Capture

Hala señores, ya tenéis todo lo necesario para crear vuestros propios memes de gatitos optimizados. Voy a revisar vuestro código fuente para asegurarme que son vídeos y no GIF’s 😝.

Happy coding! ❤️

Generación desmedida de Post Thumbnails y de cómo resolverlo

Generación desmedida de Post Thumbnails y de cómo resolverlo

Es sabido que WordPress nos permite subir imágenes y que a su vez se generan thumbnails para aligerar su peso, resolución, etcétera. Esto es una funcionalidad excelente ya que los desarrolladores podemos, inicialmente, despreocuparnos de si el usuario sube una imagen de 15 o 25 megabytes con su cámara de último modelo de 145 Megapíxeles, HDR, WiFi y radio AM/FM incluida, porque se crearán tres cuatro nuevas copias con peso y resolución aceptable para la web.

Los thumbnails que se crean por defecto con cualquier WordPress son:

  • Thumbnail o Thumb: Una copia de la imagen original con un tamaño de 150px x 150px
  • Medium: Ídem con una resolución de 300px x 300px
  • Medium_large: Copia con un ancho de 768px y altura automática.
  • Large: Copia con un ancho de 1024px y altura automática
  • Full: La imagen original sin modificar

En materia de compresión de imágenes, WordPress utilizaba una de compresión del 90% en JPG que luego han reducido a 82% a partir de la versión 4.5.

Vamos a realizar un ejemplo para ver cómo se crean las copias, cómo se reduce el peso y la nomenclatura que utilizan para los nuevos ficheros. Para ello usaremos la siguiente imagen (de mi viaje por Nepal) la cual subiremos sin ningún tipo de tratamiento a un WordPress con el tema Twenty-Seventeen. La misma pesa 12,6Mb (una locura para utilizar en Web) y con una resolución de 6000px x 4000px, otra locura a menos que queramos ver la imagen en una pantalla de cine.

fotografía de ejemplo con peso elevado

Una vez subida la imagen vemos que se generan los siguientes nuevos ficheros con sus correspondientes detalles:

  • nino-de-katmandu-100×100.jpg ➡ 4Kb ➡ reducción del 99,96% ➡ Thumbnail personalizado
  • nino-de-katmandu-150×150.jpg ➡ 6Kb ➡ reducción del 99,96% ➡ Thumbnail por defecto
  • nino-de-katmandu-300×200.jpg ➡ 14Kb ➡ reducción del 99,95%  ➡ Thumbnail personalizado
  • nino-de-katmandu-768×512.jpg ➡ 60Kb ➡ reducción del 99,53%  ➡ Thumbnail por defecto
  • nino-de-katmandu-1024×683.jpg ➡ 97Kb ➡ reducción del 99,24%  ➡ Thumbnail por defecto
  • nino-de-katmandu-2000×1200.jpg ➡ 267Kb ➡ reducción del 97,93%  ➡ Thumbnail personalizado
  • nino-de-katmandu.jpg ➡ 12.902Kb ➡ imagen original  ➡ Thumbnail por defecto

¿Cuál es problema?

El problema está cuando algunos temas de WordPress muy específicos crean excesivas e innecesarias nuevas resoluciones para crear un diseño ad-hoc y el programador no desactiva (o desconoce el problema) aquellas que podrían evitarse. Por ende, cada nuevo fichero que se sube genera un gran uso de procesador para crear una nueva imagen comprimida y de espacio en disco duro, que a la larga termina repercutiendo en los gastos finales de hosting (€€€).

uso excesivo de creación de post thumbnails personalizados
Ejemplo de un tema de WordPress que genera un número excesivo de thumbnails.

¿Realmente se necesita toda esa cantidad de Thumbnails para que el diseño de una web sea óptimo? Déjame que te responda yo: ¡NO, PARA NADA!

La captura de pantalla anterior pertenece a uno de mis clientes que necesita WPO urgente para mejorar tiempo de respuesta y económicos. El simple fichero «portada.jpg» pesa 111Kb, pero si sumamos todos los thumbnails hacen un total de de 860Kb. Imaginemos ahora si esta web genera 2 o 3 artículos diarios con múltiples imágenes, esto puede llegar a convertirse en un problema grande, innecesario y muy costoso (varios gigas de datos en el servidor).

¿Cómo resolverlo?

Desactivar thumbnails innecesarios

Primero tenemos que hacer una investigación sobre el tema activo de WordPress para saber realmente qué thumbnails se utilizan y cuáles no. Una vez identificados los thumbnails que no necesitamos, procederemos a desactivarlos en el functions.php de nuestro tema hijo:

<?php
/*
*	Esta función quita todos aquellos thumbnails personalizados
*	que el tema padre indica necesitar.
*/
function quitar_thumbnails_innecesarios() {
	// Reemplazar 'nombre-del-thumbnail-personalizado' con 
	// el nombre correspondiente.
	remove_image_size('nombre-del-thumbnail-personalizado');
}
add_action('init', 'quitar_thumbnails_innecesarios');

Una vez que hayamos desactivado los thumbnails tenemos dos opciones:

  1. Dejar todo tal cual está sabiendo que las imágenes que se generan de ahora en más tendrán los thumbnails justos y necesarios.
  2. Si el peso actual de todas las imágenes compromete la economía de nuestro cliente (factura de hosting), tendremos que regenerar todos los thumbnails y eliminar los ficheros innecesarios para ahorrar espacio en el disco duro.

Regeneración de thumbnails

ADVERTENCIA: Regenerar thumbnails lleva mucha carga de procesamiento con lo que recomiendo no realizarlo en un entorno de producción. También sugiero encarecidamente hacer una copia de seguridad antes de ejecutar esta operación.

Podemos utilizar el plugin Force Regenerate Thumbnails que, a pesar que no esté actualizado desde hace más de 2 años, funciona correctamente hasta la versión 4.9.6 de WordPress.

force regenerate thumbnails interfaz de usuario

Este plugin regenera automáticamente todas las imágenes que indique el tema activo y borra aquellas que no concuerden en el disco duro. Tiene una simple pantalla que podemos encontrar en el menú «Herramientas » Force Regenerate Thumbnails». Previa copia de seguridad, basta solo con hacer click en el botón para que comience la magia.

Otra opción es utilizar la opción de WP-CLI para ejecutar el proceso desde línea de comandos:

wp media regenerate

Más información en la documentación oficial de WP-CLI.

force regenerate thumbnails resultado

En la imagen anterior se puede ver cómo se han borrado todas las imágenes innecesarias y hemos regenerado solo las que vienen por defecto con WordPress (luego se han hecho ajustes de CSS y PHP para reutilizar estos ficheros).

Conclusión

Un buen diseño web no necesita de tantas copias de thumbnails. Con las que vienen por defecto con WordPress alcanzan y sobran. También podemos reutilizar las imágenes y trabajarlas mediante CSS con background-position, background-size, object-fit (del cual tengo un artículo muy extenso) o bien con otros tantos atributos para la manipulación de imágenes.

Venga, pon esto en práctica y ahórrale espacio y algo de dinero a tus clientes.

Imagen destacada de Soragrit Wongsa en Unsplash

jpg formato progresivo

¿Cómo optimizar las imágenes JPG con el formato progresivo?

A veces aprendo pequeños tips informáticos que te sorprenden por su simplicidad pero que tienen un gran impacto en la usabilidad u optimización de la web. En este caso os hablaré de la importancia de utilizar ficheros de imágenes JPG con formato progresivo.

¿Qué formatos de JPG’s existen?

Existe el fichero JPG con formato progresivo que graba varias capas con distintas calidades. De esta manera, cuando un visitante accede a una web se cargarán las imágenes progresivamente, de menor a mayor calidad mejorando así la experiencia de usuario de nuestra página. Es preferible que el usuario vea algo, aunque sea con poca calidad, a tener espacios vacíos en la estructura de la web. Y para nuestra sorpresa este tipo de formato es más ligero, mejorando así el tiempo de carga (y nuestro SEO finalmente). Con lo cual, a la hora de utilizar imágenes JPG en nuestra web debemos seleccionar este formato.

El otro formato se llama baseline y guarda la imagen con una sola capa con la calidad final. A diferencia del formato anterior su carga en los navegadores es línea a línea.

La siguiente imagen grafica cómo se comporta cada tipo de formato durante la carga de una web en los navegadores.

jpeg progresivo y baseline

Demostración

En estas URL encontraréis dos ficheros con la misma imagen. Uno con formato baseline y otro con el formato progresivo:

El siguiente video muestra cómo se renderizan los archivos en un navegador con una velocidad de carga de 50Kbs/seg (utilizando la funcionalidad de Throttling de Chrome)

Herramientas y plugins

Para guardar una imagen en format progresivo podemos utilizar las siguientes herramientas y plugins:

Photoshop

  1. Ir a Archivo » Exportar » Guardar para web
  2. Activar la casilla «Progresivo»
jpg progresivo opción de photoshop

GIMP

  1. Ir a Archivo » Exportar
  2. Exportar el fichero con la extensión jpg
  3. Activar la casilla «Progresivo» dentro de las opciones avanzadas
jpg progresivo opción con gimp

TinyPNG

Esta página web comprime imágenes de varios formatos. En caso que el fichero sea un JPG lo convierte automáticamente a progresivo.

tiny png home

Optimizilla

(Actualización 05/07/2017, gracias Luis)
Esta web brinda los mismos servicios que TinyPNG pero también permite modificar el porcentaje de compresión con un previsualizador bastante chulo.

Logo de Optimizilla
Previsualizador de imágenes de Optimizilla
Previsualizador de imágenes de Optimizilla

EWWW Image Optimizer

EWWW es uno de los mejores plugins de WordPress para optimizar imágenes. Comprime varias extensiones e incluye el formato progresivo para los ficheros del tipo jpg.

EWWW plugin de WordPress para optimizar imágenes

Funciona con WordPress & Tema de Anders Norén