Blog personal de IT, viajes y otros hobbies

Etiqueta: imagenes

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! ❤️

La galería de medios lento

La Galería de Medios de WordPress va muy lenta (Solucionado)

Hace poco tiempo tuve que lidiar con un proyecto WordPress que su «Galería de Medios«, con unos 30Gb’s de imágenes, tardaba 8 segundos en cargar, demasiado lento para los tiempos de respuesta de internet. Este problema me tuvo durante muchas horas analizando el Core, buscando alternativas de solución y hasta abrí un ticket en la página de soporte de WordPress España por si algún compañero se había topado con el mismo problema. Después de mucho tiempo de lucha pude dar con la solución que describiré en este artículo.

galeria de medios de WordPress
Galería de Medios de WordPress con la visualización de grilla.

¿Por qué tarda tanto?

La vista de grilla de la Galería de Medios carga las últimas 40 imágenes cargadas mediante una función AJAX (a veces realiza 2 llamadas si tiene más espacio que cubrir en la página).

La función AJAX coge de cada imagen todas sus miniaturas (full, large, medium_large, medium, thumbnail y todas las personalizadas) para obtener sus metadatos y luego calcular cuál de ellas es la más óptima para visualizar en la «Galería de Medios». El proceso parece estúpido, ya que con los thumbnails nos bastaría para mostrar las imágenes, pero en realidad la petición AJAX reutiliza una función del Core de WordPress llamada wp_prepare_attachment_for_js que está pensada y codificada para devolver toda esta información a otras funciones.

Por fortuna, está tan bien diseñada que se han acordado de poner algunos filtros, que utilizaremos para reducir el tiempo de carga de las imágenes, y un excelente comentario que me ha dado el indicio para llegar a la solución (línea 3186 del fichero wp-includes/media.php).

<?php
// Loop through all potential sizes that may be chosen. Try to do this with some efficiency.
// First: run the image_downsize filter. If it returns something, we can use its data.
// If the filter does not return something, then image_downsize() is just an expensive
// way to check the image metadata, which we do second.
// TRADUCCIÓN AL CASTELLANO
// La siguiente función iterará sobre todos los potenciales tamaños de imágenes a elegir. Trata de ejecutar esta función con eficiencia.
// Primero: Llama el filtro image_downsize. Si devuelve algún valor, lo utilizaremos.
// caso contrario, ejecutaremos la función image_downsize() para obtener los metadatos, aunque es un proceso muy costoso.

Con toda esta información es hora de que nos pongamos manos a la obra.

Solución al problema

Primero vamos a limitar la función para que no recoja todas las miniaturas, con el thumbnail nos bastaría. Para ello utilizamos el siguiente filtro:

<?php
/*
* Con esta función estamos indicando que la función
* devuelva solamente los datos del thumbnail de la imagen.
*/
function mg_fix_select_only_thumbnails() {
	return array(
		'thumbnail' => __('Thumbnail'),
	);
}
add_filter( 'image_size_names_choose', 'mg_fix_select_only_thumbnails' );

Pero eso no es todo, si releemos el comentario del punto anterior nos faltaría llamar al filtro image_downsize el cual debe devolver los metadatos de la imagen:

<?php
function mg_fix_scaled_image( $downsize, $attachment_id, $size ) {
	// Quitamos el filtro primero para no entrar en bucle infinito
	remove_filter( 'image_downsize', 'mg_fix_scaled_image', 10 );
	$result = wp_get_attachment_image_src( $attachment_id, $size );
	// Una vez obtenido los metadatos del attachment restituimos el filtro
	add_filter( 'image_downsize', 'mg_fix_scaled_image', 10, 3 );
	return $result;
}
add_filter('image_downsize', 'mg_fix_scaled_image', 10, 3);

¿Cómo corroborar la solución?

Por supuesto que tendremos que notar una mejora en el tiempo de respuesta de carga de la Galería de Medios, pero también podemos chequearlo en la pestaña «Network» de Chrome: La respuesta de la función AJAX solo debería estar devolviendo los valores del thumbnail y de la imagen original.

galería de medios lento solución

Conclusión

Espero que esta solución pueda ayudar a muchas personas ya que por mi parte he buscado intensamente en internet sin haber dado con algún artículo similar que me diera algo de luz en el problema. Ahora sí, a navegar tranquilamente por la Galería de Medios de WordPress.

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
bruce lee out of aspect ratio

No me rompas el aspect-ratio, usa el object-fit

En más de una ocasión los diseñadores nos entregan una maqueta con imágenes con alto y ancho fijo. En Photoshop o Sketch se ven muy bonitas pero hay que tener en cuenta que luego en WordPress el usuario tiene la libertad de subir cualquier imagen y si no lo tenemos controlados por CSS podemos acabar con imágenes horrorosas. En esta entrada te mostraré una propiedad que descubrí hace muy poco: object-fit. Técnicamente esta propiedad nos permite especificar cómo se va a distribuir la altura y el ancho de un elemento con respecto a la medida del contenedor.

bruce lee out of aspect ratio
Imagen con aspect-ratio incorrecto.

Sintaxis

/* Posibles valores */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
/* Valores globales */
object-fit: inherit;
object-fit: initial;
object-fit: unset;
  • fill: Valor por defecto. Estira el contenido hasta su contenedor sin tener en cuenta el aspect-ratio.
  • contain: Incrementa o reduce el tamaño del contenido hasta adoptar el tamaño del contenedor respetando el aspect-ratio.
  • cover: El contenido completará el alto y ancho del contenedor pero cortando información si es necesario.
  • none: El contenido se expande a su tamaño original sin respetar los límites del padre.
  • scale-down: Selecciona el menor de la comparación entre none y contain.

Ejemplo

A excepción de la imagen original, todas las copias tienen un alto y ancho fijo de 200px. Observa como se comporta cada copia con los distintos valores de object-fit.

See the Pen ¡Ponte en forma con object-fit! by Mauricio Gelves (@maugelves) on CodePen.


¿Cómo lo utilizo yo?

Suelo utilizar este tipo de imágenes en plantillas controladas, es decir, donde sé de antemano dónde irá ubicada dentro del HTML (no tiene mucho sentido utilizar esta propiedad para imágenes que se carguen en el contenido del post). Para ello genero un campo personalizado con ACF llamado «background_position» para que el usuario me indique dónde está la zona más importante de la imagen y luego complementar la propiedad object-fit con la propiedad object-position. De esta manera siempre tendré la imagen al tamaño deseado y mostrando la parte importante.

selector zona importante de image
Campo ACF del tipo Select con todas las posibilidades de posición.

<img src="<?php the_post_thumbnail_url(); ?>" style="object-position: <?php the_field('background_position'); ?>">

Pueden ver un ejemplo en vivo de este código en la web de Seiyu que acabo de relanzar. Ahí verán que las imágenes de cada post se ubican a la derecha y la izquierda (según par o impar) y con un alto y ancho fijo, aunque la imagen original tenga otro tamaño.


Navegadores

La propiedad object-fit está muy difundida entre los navegadores a excepción de nuestros viejos y casposos amigos de Microsoft. Por suerte hay gente muy maja que se curra Polyfills (pequeños javascripts que recrean el funcionamiento de las etiquetas en navegadores que no lo soportan) para subsanar estos dolores de cabeza.

Update: Me comunican por Twitter que Microsoft ha incluido el atributo CSS en su próximo build. Habrá que esperar a ver si es cierto o no, de momento Can I Use lo sigue marcando en rojo 😑


Conclusión

Defiendo a muerte que el escritor de entradas no tiene que tener limitaciones técnicas a la hora de escribir su post y el uso de esta propiedad en las plantillas HTML le permite subir cualquier imagen sin preocuparse sin romperá o no el aspect-ratio de la misma.
También más de uno habrá encontrado similitud con la propiedad background-size, y está en lo cierto. Solo que esta propiedad podemos utilizar con etiquetas <img> o <video> mejorando así la semántica de nuestra web.

Funciona con WordPress & Tema de Anders Norén