Quieres mejorar el rendimiento y posicionamiento de tu sitio web?. Puedes reducir el tamaño de los archivos de tu imagen para ayudar a mejorar el rendimiento de tu sitio web. Un problema con el formato es que las modificaciones a menudo reducen su calidad (lo que a su vez puede hacer que el visitante odie tu sitio web). Eso no es malo siempre y cuando no los pongas feos. Existen algunos trucos y técnicas que te permiten reducir el tamaño del archivo de la imagen y aún así mantenerlos lo suficientemente bonitos como para mostrarlos con orgullo en su sitio web. Así que echemos un vistazo a cómo dar formato a sus imágenes sin hacerlas feas, y también a cómo optimizar las imágenes para la Web y el rendimiento.
¿Qué significa optimizar imágenes?
Las imágenes grandes ralentizan tu página web, lo que crea una experiencia de usuario menos que óptima. La optimización de imágenes es el proceso de disminuir el tamaño del archivo, utilizando un complemento o un script, lo que a su vez acelera el tiempo de carga de la página. La compresión con pérdida y sin pérdida son dos métodos que se utilizan habitualmente.
Los beneficios de formatear tus imágenes
Primero, ¿por qué necesitas formatear tus imágenes? ¿Cuáles son los beneficios? Existen numerosos beneficios de optimizar el rendimiento de tus imágenes. Según HTTP Archive, a noviembre de 2018, las imágenes representan en promedio el 21% del peso total de una página web. Entonces, cuando se trata de optimizar tu sitio de WordPress, después del contenido de video, ¡las imágenes son, con mucho, el primer lugar por el que debes comenzar!
Es más importante que los scripts y las fuentes. E irónicamente, un buen flujo de trabajo de optimización de imágenes es una de las cosas más fáciles de implementar, pero muchos propietarios de sitios web lo pasan por alto.
A continuación, se muestran los principales beneficios.
- Mejorará la velocidad de carga de tu página (consulte nuestro estudio de caso a continuación para ver cuánto afecta tu velocidad). Si tu página tarda demasiado en cargar, tus visitantes pueden cansarse de esperar y pasar a otra cosa.
- Combinado con un excelente complemento de WordPress para SEO, mejora tu SEO. Tu sitio tendrá una clasificación más alta en los resultados de los motores de búsqueda. Los archivos grandes ralentizan tu sitio y los motores de búsqueda odian los sitios lentos. También es probable que Google rastree e indexe tus imágenes más rápido para la búsqueda de imágenes de Google. ¿Tienes curiosidad sobre qué porcentaje de tu tráfico proviene de la búsqueda de imágenes de Google? Puedes utilizar un complemento o segmento de WordPress de Google Analytics para comprobar el tráfico de búsqueda de imágenes de Google.
- La creación de copias de seguridad será más rápida.
- Los tamaños de archivo de imagen más pequeños utilizan menos ancho de banda. Las redes y los navegadores lo agradecerán.
- Requieren menos espacio de almacenamiento en tu servidor (esto depende de cuántas miniaturas optimice)
Las imágenes representan en promedio el 21% del peso total de una página web. ¡Optimízalo!
Cómo optimizar las imágenes para la Web y el rendimiento
El objetivo principal de formatear sus imágenes es encontrar el equilibrio entre el tamaño de archivo más bajo y una calidad aceptable. Hay más de una forma de realizar casi todas estas optimizaciones. Una de las formas más populares es simplemente comprimirlos antes de subirlos a WordPress. Por lo general, esto se puede hacer en una herramienta como Adobe Photoshop o Affinity Photo. Algunas de estas tareas también se pueden realizar mediante complementos, que veremos más adelante.
Las dos cosas principales a considerar son el formato de archivo y el tipo de compresión que utiliza. Si eliges la combinación correcta de formato de archivo y tipo de compresión, puedes reducir el tamaño de la imagen hasta 5 veces. Tendrás que experimentar con cada imagen o formato de archivo para ver cuál funciona mejor.
Elige el formato de archivo correcto
Antes de comenzar a modificar sus imágenes, asegúrate de haber elegido el mejor tipo de archivo. Hay varios tipos de archivos que puede utilizar:
- PNG: produce imágenes de mayor calidad, pero también tiene un tamaño de archivo mayor. Se creó como un formato de imagen sin pérdidas, aunque también puede tener pérdidas.
- JPEG: utiliza optimización con pérdida y sin pérdida. Puede ajustar el nivel de calidad para lograr un buen equilibrio entre la calidad y el tamaño del archivo.
- GIF: solo usa 256 colores. Es la mejor opción para imágenes animadas. Solo usa compresión sin pérdidas.
Hay varios otros, como JPEG XR y WebP, pero no todos los navegadores los admiten de forma universal. Idealmente, debería usar JPEG o JPG para imágenes con mucho color y PNG para imágenes simples.
(Lectura sugerida: JPG vs JPEG: comprensión del formato de archivo de imagen más común)
Calidad de compresión frente a tamaño
A continuación se muestra un ejemplo de lo que puede suceder si comprimes demasiado una imagen. La primera es usar una tasa de compresión muy baja, lo que da como resultado la mayor calidad (pero un tamaño de archivo más grande). El segundo es utilizar una tasa de compresión muy alta, lo que da como resultado una imagen de muy baja calidad (pero un tamaño de archivo más pequeño).
Recomendamos encontrar un medio feliz entre tu tasa de compresión (calidad) y el tamaño del archivo.
Optimización con pérdida vs sin pérdida
También es importante comprender que hay dos tipos de compresión que puede usar, con pérdida y sin pérdida.
Con pérdida: este es un filtro que elimina algunos de los datos. Esto degradará la imagen, por lo que deberás tener cuidado de cuánto reducir la imagen. El tamaño del archivo se puede reducir en gran medida. Puedes utilizar herramientas como Adobe Photoshop, Affinity Photo u otros editores de imágenes para ajustar la configuración de calidad de una imagen. El ejemplo que usamos anteriormente usa compresión con pérdida.
Sin pérdidas: este es un filtro que comprime los datos. Esto no reduce la calidad, pero requerirá que las imágenes se descompriman antes de que se puedan procesar. Puedes realizar una compresión sin pérdidas en tu escritorio utilizando herramientas como Photoshop, FileOptimizer o ImageOptim.
Es mejor experimentar con sus técnicas de compresión para ver qué funciona mejor para cada imagen o formato. Si tus herramientas tienen la opción, asegúrate de guardar la imagen para la web. Esta es una opción en muchos editores de imágenes y te brindará los ajustes de calidad para que puedas realizar una compresión óptima. Perderás parte de la calidad, así que experimenta para encontrar el mejor equilibrio posible sin hacer que las imágenes se vean feas.
Herramientas y programas de optimización de imágenes
Existen muchas herramientas y programas, tanto premium como gratuitos, que puedes utilizar para optimizar tus imágenes. Algunos te brindan las herramientas para realizar tus propias optimizaciones y otros hacen el trabajo por ti. Personalmente, somos grandes admiradores de Affinity Photo, ya que es barato y te ofrece funciones casi idénticas a las de Adobe Photoshop.
A continuación, se incluyen algunas herramientas y programas adicionales para consultar:
- Adobe Photoshop
- Cañutillo
- Paint.NET
- GIFsicle
- JPEGtran
- JPEG Mini
- OptiPNG
- pngquant
- FileOptimizer
- ImageOptim
- Trimage
- ImageResize.org
Cambiar el tamaño de las imágenes a escala
En el pasado, era muy importante que subiera imágenes a escala y no permitiera que CSS las cambiará de tamaño. Sin embargo, esto ya no es tan importante ya que WordPress 4.4 ahora admite imágenes receptivas (no reducidas por CSS). Básicamente, WordPress crea automáticamente varios tamaños de cada imagen cargada en la biblioteca de medios. Al incluir los tamaños disponibles de una imagen en un atributo srcset, los navegadores ahora pueden elegir descargar el tamaño más apropiado e ignorar los demás..
Entonces, con más y más pantallas HiDPI hoy en día, puede ser bueno encontrar un medio feliz. Digamos 2 veces o 3 veces el tamaño de la columna o div de su sitio web, pero aún menos que el tamaño original. El navegador mostrará el correcto según la resolución del dispositivo.
La biblioteca de medios de WordPress crea miniaturas basadas en su configuración. Sin embargo, el original aún se conserva y no se modifica. Si deseas cambiar el tamaño de tus imágenes y ahorrar espacio en el disco al no guardar el original, puedes usar un complemento gratuito como Imsanity.
Imsanity te permite establecer un límite de cordura para que todas las imágenes cargadas estén limitadas a un tamaño razonable que aún es lo suficientemente grande para las necesidades de un sitio web típico.
Imsanity se conecta a WordPress inmediatamente después de la carga de la imagen, pero antes de que ocurra el procesamiento de WordPress. Entonces WordPress se comporta exactamente igual en todos los sentidos, excepto que será como si el colaborador hubiera escalado su imagen a un tamaño razonable antes de cargarla.
Limpia tu biblioteca multimedia
Si estás buscando una herramienta para ahorrar espacio y al mismo tiempo limpiar tu biblioteca de medios, puedes usar Media Cleaner para encontrar archivos de medios no utilizados. El complemento escaneará todos tus archivos multimedia y enumerará los no utilizados en el Panel de control de Media Cleaner para que pueda examinarlos y eliminarlos.
Media Cleaner implementa un sistema de basura inteligente: cuando los archivos se eliminan, se mueven a un directorio de basura. De esa manera, puede probar tu sitio web por un tiempo y asegurarse de que todo esté bien. Si falta un archivo o una entrada multimedia, puedes restaurarlo fácilmente con un clic o simplemente vaciar la papelera si todo te parece bien.
Neothek ofrece servicios de web hosting, registro de dominios, correo electrónico, certificados SSL, diseño de páginas web y diseño gráfico.
