05 May Cómo comprimir imágenes en tu Pagina web
Cómo comprimir imágenes en tu Pagina web
Cómo comprimir imágenes en tu Pagina web. Cómo optimizar imágenes para web y rendimiento.
¿Qué significa optimizar las imágenes?
Las imágenes grandes ralentizan sus páginas web, lo que crea una profesionalidad de usuario menos que óptima. La optimización de imágenes es el proceso de disminuir el tamaño de su 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 comúnmente utilizados.
- Los beneficios de formatear tus imágenes.
- Cómo optimizar imágenes para la web y el rendimiento
- Complementos de optimización de imágenes de WordPress que logra usar
- Estudio de caso de optimización de imágenes
- Uso de SVG junto con otras imágenes
- Mejores prácticas al usar imágenes
Beneficios de formatear sus imágenes
Primero, ¿por qué requiere formatear sus imágenes? ¿Cuáles son los beneficios? Hay numerosos beneficios de optimizar sus imágenes para el rendimiento. Según HTTP Archive , a dividir de 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 su sitio de WordPress , posteriormente del contenido de video, ¡las imágenes son, con bastante, el primer lugar donde debe comenzar! Es más primordial que los guiones y las fuentes. E irónicamente, un buen flujo de labor de optimización de imágenes es una de las cosas más fáciles de implementar, no obstante, muchos propietarios de sitios web lo pasan por alto.
Aquí hay un vistazo a los principales beneficios.
- Mejorará la velocidad de carga de su página (consulte nuestro estudio de caso a continuación para ver cuánto afecta su velocidad). Si su página tarda demasiado en cargarse, es factible que sus visitantes se cansen de esperar y pasen a otra cosa. Para conseguir más información sobre cómo optimizar el tiempo de carga de su página, consulte nuestra guía detallada de optimización de la velocidad de la página .
- Combinado con un excelente complemento de SEO para WordPress , mejora su SEO . Su sitio ocupará un lugar más alto en los resultados de los motores de búsqueda. Los archivos grandes ralentizan su sitio y los motores de búsqueda odian los sitios lentos. De igual modo es probable que Google rastree e indexe sus imágenes más rápido para la búsqueda de imágenes de Google.
- ¿Tiene curiosidad por saber qué porcentaje de su tráfico proviene de la búsqueda de imágenes de Google? Logra usar un complemento o segmento de WordPress de Google Analytics para verificar el tráfico de búsqueda de imágenes de Google . Crear copias de seguridad será más rápido.
- Los tamaños de archivo de imagen más pequeños utilizan menos ancho de banda. Las redes y los navegadores lo apreciarán. Requiere menos espacio de almacenamiento en su servidor (esto depende de cuántas miniaturas optimice).
Cómo optimizar imágenes para web y rendimiento
El objetivo principal de formatear sus imágenes es encontrar el equilibrio en medio de el tamaño de archivo más bajo y una calidad aceptable . Hay más de una manera de llevar a cabo casi todas estas optimizaciones. Una de las formas más populares es simplemente comprimirlos antes de subirlos a WordPress . Por con siguiente, esto se logra hacer en una herramienta como Adobe Photoshop o Affinity Photo.
Algunas de estas tareas además se obtienen llevar a cabo por medio de complementos, que veremos más adelante. Las dos cosas principales a considerar son el formato de archivo y el tipo de compresión que usa. Al escoger la combinación correcta de formato de archivo y tipo de compresión, logra reducir el tamaño de su imagen hasta 5 veces. Tendrá que experimentar con cada imagen o formato de archivo para ver qué resulta destacado.
Elije el formato de archivo correcto
Antes de comenzar a modificar sus imágenes, asegúrese de haber elegido el destacado tipo de archivo .
Hay varios tipos de archivos que logra utilizar:
- PNG : produce imágenes de mayor calidad, pero además dispone un tamaño de archivo más grande. Fue creado como un formato de imagen sin pérdida, pese a que además logra disponer pérdida.
- JPEG : usa optimización con pérdida y sin pérdida . Logra adaptar el nivel de calidad para lograr un buen equilibrio en medio de calidad y tamaño de archivo.
- GIF : solo usa 256 colores. Es la destacado elección para imágenes animadas. Solo usa compresión sin pérdidas.
Hay varios otros, como JPEG XR y WebP , pero no son universalmente compatibles con todos los navegadores . Lo ideal es utilizar JPEG o JPG para imágenes con bastante color y PNG para imágenes sencillas. (Lectura sugerida: JPG vs JPEG: comprensión del formato de archivo de imagen más general ).
Calidad de compresión frente a tamaño
El principal es usar una tasa de compresión muy baja, lo que da como resultado la más alta calidad (pero un tamaño de archivo más grande). El segundo es usar 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). Nota: La imagen original intacta dispone 2,06 MB.
Programas y herramientas de optimización de imágenes
Existen muchas herramientas y programas, tanto premium como gratuitos, que logra utilizar para optimizar sus imágenes. Algunos le brindan las herramientas para llevar a cabo sus propias optimizaciones y otros hacen el labor por usted. Personalmente, somos grandes admiradores de Affinity Photo , ya que es económico y da funciones casi idénticas a las de Adobe Photoshop.
- Adobe Photoshop
- Cañutillo
- Paint.NET
- GIFsicle
- JPEGtran
- JPEG Mini
- OptiPNG
- pngquant
- Optimizador de archivos
- ImageOptim
- Recorte
- ImageResize.org
Limpie su biblioteca de medios
Si está buscando una herramienta para guardar espacio y al parecido tiempo limpiar su biblioteca de medios, logra usar Media Cleaner para encontrar archivos de medios no utilizados. El complemento escaneará todos sus archivos multimedia y enumerará los no utilizados en el Panel de inspección de Media Cleaner para que logre examinarlos y eliminarlos.
Media Cleaner implementa un sistema de basura inteligente: cuando se eliminan archivos, se mueven a un directorio de basura. De esa manera, logra probar su sitio web por un tiempo y asegurarse de que todo esté bien. Si falta un archivo o una entrada multimedia, logra restaurarlo cómodamente con un clic o simplemente vaciar la papelera si todo le parece bien.
Complementos de optimización de imágenes que puede usar
Afortunadamente, con WordPress, no tienes que hacer todo el formateo o la compresión a mano. Logra usar complementos para hacer al menos parte del labor automáticamente. Hay varios complementos que optimizarán automáticamente sus archivos de imagen a medida que los cargue. Incluso optimizarán las imágenes que ya hayas subido.
Esta es una atribución útil, particularmente si ya dispone un sitio web lleno de imágenes. Aquí hay un vistazo a algunos de los mejores complementos para formatear sus imágenes para un destacado rendimiento. Sin embargo, es primordial que no confíe únicamente en los complementos en sí.
Por ejemplo, no debería cargar imágenes de 2 MB en su biblioteca de medios de WordPress. Esto logra provocar que el espacio en disco de su servidor web se consuma muy rápido. El destacado método es modificar rápidamente el tamaño de la imagen en una herramienta de edición de retratos de antemano, y luego cargarla y usar uno de los siguientes complementos para reducirla aún más.
- Optimizador de imágenes Imagify
- Optimizador de imágenes de píxeles cortos
- Optimol
- Optimizador de imágenes Optimus
- WP Smush
- TinyPNG
- ImagenReciclar
Optimizador de imágenes Imagify
Imagify es creado por el parecido equipo que desarrolló WP Rocket, con el que la mayoridad de ustedes probablemente esté familiarizado. Es compatible con WooCommerce, NextGen Gallery y WP Retina. De igual modo dispone una atribución de optimización masiva y logra escoger en medio de tres niveles distintas de compresión, normal, agresivo y ultra.
De igual modo dispone una atribución de restauración, asi que si no está satisfecho con la calidad, logra restaurar con un solo clic y regresar a comprimir a un nivel que se adapte destacado a sus necesidades. Hay una versión gratuita y una premium.
Está limitado a una cuota de 25 MB de imágenes por mes con una cuenta gratuita. Deshacerse de la imagen original y modificar el tamaño de sus imágenes más grandes además se logra hacer con este complemento.
Imagify también comprime imágenes en sus servidores de terceros , no en el tuyo, lo cual es muy importante cuando se trata de rendimiento. Imagify no debería ralentizar su sitio de WordPress.
Optimizador de imágenes de píxeles cortos
ShortPixel Image Optimizer es un complemento gratuito que comprimirá 100 imágenes por mes y comprimirá múltiples tipos de archivos, incluidos PNG, JPG, GIF, WebP e aun archivos PDF. Hará compresión de imágenes con pérdida y sin pérdida. Convertirá CMYK a RGB.
Lleva sus imágenes y miniaturas a la nube para su procesamiento y luego las devuelve a su sitio para sustituir las originales. Crea una copia de seguridad de los archivos originales para que logre restaurarlos manualmente si lo desea. Convertirá los archivos de la galería a granel. No hay límite para el tamaño del archivo.
Optimol
Optimole es un complemento de WordPress de optimización de imágenes que reduce automáticamente el tamaño de sus imágenes sin que se requiera ningún labor de su parte. Tiene una gran mejoria cuando se trata de la velocidad de carga de su sitio, ya que está completamente basado en la nube y jamás enseña imágenes que son más grandes de lo que deberían, es pronunciar, enseña el tamaño de imagen perfecto para la abertura gráfica y el navegador del visitante.
También, el complemento proporciona una carga diferida y un cambio de imagen eficiente: degrada la calidad de la imagen si el visitante dispone una conexión a Internet más lenta, lo que lo hace destacar en medio de la multitud. De igual modo detecta automáticamente el navegador del usuario y sirve WebP si es compatible.
Todas las imágenes que comprime Optimole se sirven por medio de un CDN rápido. Logra probar Optimole gratis o actualizar al plan premium si requiere ancho de banda suplementario y espacio de procesamiento.
Optimizador de imágenes Optimus
Optimus WordPress Image Optimizer usa compresión sin pérdidas para optimizar sus imágenes. Sin pérdida significa que no verá ninguna pérdida de calidad. Es compatible con WooCoomerce y varios sitios y dispone una buena atribución de optimización masiva para aquellos que ya disponen grandes bibliotecas de medios existentes.
De igual modo es compatible con el complemento WP Retina WordPress. Hay una versión gratuita y premium.
En la versión premium pagas una vez al año y puedes comprimir una cantidad ilimitada de imágenes. Si lo combina con su complemento Cache Enabler, además logra sumergirse en imágenes WebP , que es un nuevo formato de imagen liviano de Google.
WP Smush
WP Smush dispone una versión gratuita y premium. Reducirá la información oculta de las imágenes para reducir el tamaño sin reducir la calidad. Escaneará imágenes y las disminuirá a medida que las cargue en su sitio. De igual modo escaneará las imágenes que ya hayas subido y las disminuirá además.
Aplastará a granel hasta 50 archivos a la vez. De igual modo logra aplastar manualmente si lo desea. Aplastará los tipos de imágenes JPEG, GIF y PNG. El tamaño de los archivos está limitado a 1 MB.
- Es compatible con algunos de los complementos de biblioteca multimedia más populares, como WP All Import y WPML.
- Toda la optimización de la imagen se realiza con técnicas de compresión sin pérdidas, lo que mantiene alta la calidad de la imagen.
- No importa en qué directorio guardes tus imágenes. Smush las encuentra y las comprime.
- Smush tiene una opción para establecer automáticamente el ancho y la altura de todas las imágenes, por lo que todas sus imágenes se redimensionan en proporciones idénticas.
TinyPNG (también JPG comprimidos)
TinyPNG usa los servicios TinyJPG y TinyPNG (la cuenta gratuita te deja comprimir unas 100 imágenes al mes) para optimizar tus imágenes JPG y PNG. Comprimirá automáticamente nuevas imágenes y comprimirá de manera masiva sus imágenes existentes.
Convertirá CMYK a RBG para guardar espacio. Comprimirá imágenes JPEG hasta un 60 % e imágenes PNG hasta un 80 % sin una pérdida visible en la calidad de la imagen. No dispone un límite de tamaño de archivo.
ImagenReciclar
El complemento ImageRecyle es un optimizador automático de imágenes y PDF. Este complemento se enfoca no solo en la compresión de imágenes sino además en archivos PDF. Una característica verdaderamente útil es la facultad de establecer el tamaño mínimo de archivo para la compresión. Por ejemplo, si dispone imágenes de 80 KB de tamaño, logra hacer que las excluya automáticamente de la compresión. Esto asegura que las imágenes y los archivos jamás se compriman demasiado.
De igual modo comprende optimización masiva y renovación de tamaño de imagen automático. Nota: Tienen una prueba gratuita de 15 días, pero este es un servicio premium y las imágenes se cargan y comprimen usando sus servidores. No cobran por mes, sino por la cantidad total de imágenes comprimidas, desde $10 por 10,000.
Estudio de caso de optimización de imágenes para web
Decidimos hacer nuestro propio pequeño estudio de caso y pruebas para mostrarle cuánto puede afectar la optimización de sus imágenes para la web a la velocidad general de su sitio de WordPress.
Cómo comprimir imágenes en tu Pagina web