Devtips: cómo limitar el tamaño de la imagen en la biblioteca de medios de WordPress

Si hay algo que todos los sitios web tienen en común es que las imágenes ocupan la mayor parte del ancho de banda. Bueno, ¿no exactamente en sitios web, como videos en YouTube? Y hay muchos otros sitios web (sí, lo miro, periódicos en línea) donde los anuncios le llevan todo el ancho y la potencia de procesamiento de nuestros automóviles. Pero si hablamos de un sitio web “ordinario”, probablemente estaría de acuerdo en que las imágenes son los elementos más difíciles en un sitio web y, por lo tanto, las imágenes son lo único que primero debemos optimizar.
Mientras investigaba este tema, me encontré con este interesante artículo de Ilyya Grigoric en Google sobre cómo optimizar las imágenes. Describa en detalle algunas técnicas para reducir la cantidad de bytes que enviamos a nuestros visitantes, explicando cómo funcionan todos y cuándo debemos usar cada una. El artículo se puede resumir en solo dos recomendaciones:
Deshacerse de las fotos. Si no usa una imagen primero, ahorrará toneladas de bytes, ¿verdad? ? Bueno, la recomendación no se trata de eliminar las imágenes, sino reemplazarlas con la tecnología apropiada. Pero la primera declaración suena más audaz y atrae mejor su atención, ¿no? Por ejemplo, no hace mucho, usé imágenes en todas partes. Las usé en títulos, para que puedan tener hermosos esquemas de color y fuentes extrañas. También los usé para crear botones, esquinas redondeadas, sombras, etc. Pero todos estos efectos visuales de lujo ya no requieren elementos de imagen, ahora tenemos CSS3. Entonces, sí, podemos deshacernos de las imágenes si podemos reemplazarlas con efectos CSS3. ¡Y la mejor parte es que los resultados nos veremos mucho mejor! Seleccione el formato correcto. A veces no puedes eliminar una imagen. Simplemente no puedes deshacerte de eso. Por ejemplo, las imágenes presentadas son, por definición, imágenes. ¿Y qué hay de un gif con algunos gatos cantando al piano? No podemos reemplazarlos con reglas de CSS … ¡se sentiría mal! Entonces, ¿qué podemos hacer en estos escenarios? Use solo el formato correcto. La imagen está animada? Usa gif. ¿Es una foto? JPG es probablemente tu solución. ¿Dijiste una captura de pantalla? Entonces apostaría que PNG es el formato correcto. Y logotipos, ilustraciones, etc., funcionan mucho mejor con SVG (además, este formato se adapta a todas las resoluciones).
¡Oh, vamos, no me digas que no querías ver a algunos gatos cantando en el piano justo después de leerlo! Te conozco y por eso busqué este hermoso gif perfectamente rizado. Hasta aquí todo bien. Espero no haberte enseñado nada nuevo. La idea básica es usar imágenes con el formato correcto cuando las necesite. Pero esto no es una devisión, no hay nada nuevo o interesante aquí … Entonces, ¿qué tiene la publicación de hoy? El problema que generalmente enfrentamos (al menos, lo hacemos) siempre es el mismo: sabemos cuánto es importante Para mantener sus fotos pequeñas, pero a veces simplemente cometemos errores y subimos una gran imagen en la biblioteca de medios. ¡

Estoy seguro de que no quieres, pero al final cometerás un error. ¡No está pasando! Eche un vistazo a nuestra imagen presentada. Al igual que muchos otros en nuestro blog, lo tomamos de Unsplash, un sitio web con más de 200,000 imágenes de alta resolución, con una licencia súper permisiva (de hecho, no necesitamos otorgar al autor, aunque lo hacemos). Si descarga la imagen, verá que tiene más de 2 MB y 4.672 x 3.104 PX. ¡Guau!
Obviamente, no debemos usar una imagen tan grande en nuestro sitio, simplemente no tiene sentido. ¿Y las cosas no pueden empeorar a menos que alguien decida conectarlo? Para cuidar esto, el proceso que generalmente seguimos en Nelio cada vez que estamos a punto de cargar una nueva imagen presentada es:

Estamos buscando una imagen que tenga una conexión de alguna manera con el tema que trataremos (o, si es demasiado difícil, simplemente agregamos una que nos gusta).

Lo descargamos a nuestra computadora.
Lo escala y lo cortamos según sea necesario. En nuestro caso, esto significa que llegaremos con una imagen de 1.200 x 800 px. Somos una copia de la imagen que acabamos de editar, ajustando los parámetros de compresión JPG para asegurarnos de que sea lo suficientemente pequeña. O utilizamos un servicio en línea como compressjpeg.com para lograr el mismo efecto.
Cargamos la imagen en la biblioteca de medios y la agregamos a una publicación.
¿Qué podría salir mal, ¿verdad? Es un proceso simple y directo. Pero solo somos personas y nos distraemos fácilmente, un nuevo boleto de asistencia entra, alguien lo llama … y de repente carga la imagen completa de un descuento de 2.5 MB. ?? ‍️
La solución de la solución es bastante simple: una vez que reconoce que cometerá errores, simplemente necesita un instrumento que les impida suceder primero. Quiero decir, debemos decirle a WordPress que debería rechazar las grandes imágenes. Si limitamos el tamaño máximo de la imagen que podemos cargar en la biblioteca de medios, no cargaremos imágenes grandes en la biblioteca de medios (es decir, por supuesto, lo haremos, pero WordPress no nos dejará). Así es como lo haces:
El fragmento anterior define una función que se conecta a wp_handle_upload_prefilter. Como se describe en Codex, este filtro se ejecuta justo antes de guardar la imagen en la biblioteca de medios. De esta manera, podemos personalizar cosas como el nombre final o la ubicación en la que se almacenará. En nuestro caso lo usamos:
Obtenga el tamaño del archivo en los kilobs (líneas 4 y 5)
Compruebe si en realidad es una imagen (líneas 6 y 7)
Verifique que no superemos una dimensión preestablecida máxima (líneas 8 a 13). En nuestro caso, se establece en 250 kb.
Si lo superamos, establezca la propiedad del error y deje que WordPress rechace la imagen. Si ahora estamos tratando de cargar la imagen de 2.5 mb descargada directamente de Unsplash, recibiremos el siguiente error:
Si intenta cargar una imagen “demasiado grande”, recibirá este mensaje de error y la carga no sucederá.¡Simple y eficiente!¡Y eso es!Fácil, ¿no?Por cierto, si no sabe dónde ingresar al fragmento anterior, lea solo Devtip que compartí hace algún tiempo sobre cómo personalizar WordPress usando su propio complemento.
Imagen presentada por Ksenia Makagonova por Unsplash.