Source: https://alvaroarrarte.com/7-cosas-sobre-como-optimizar-imagenes-para-web/
Timestamp: 2020-04-10 01:57:55+00:00

Document:
7 cosas sobre optimizar imagenes para WEB | AlvaroArrarte.com
Inicio » Blog » Marketing » optimizar imagenes para WEB
¿Sabes como optimizar imagenes para WEB?, ¿Acostumbras a optimizar las imagenes en WordPress?, Las imágenes son una parte importante de tu sitio WEB ya que hace que tu sitio sea más vistoso.
Imágenes de buena calidad hace que tu sitio WEB llame la atención de los usuarios porque permiten que la lectura de tu contenido sea más agradable y ayudan a motivar a los usuarios para que realicen una acción.
Existen algunas acciones para mejorar el SEO como realizar un Sitemap, agregarle índice de contenidos a tus artículos, utilizar caché para mejorar la carga de las páginas o aplicar redirecciones que seguramente has realizado en tu sitio WEB.
Sin embargo optimizar imagenes web es una de las acciones más fáciles y efectivas que comprimir los scripts o implementar fuentes, a pesar de esto es muy común ver sitios WEB con imágenes que pesan más de 300 kb o de mala calidad.
Utilizar un programa para comprimir imagenes te ayudará a disminuir el peso de los archivos en tu servidor de hosting, mejorando el rendimiento de tu sitio WEB de una forma considerable.
Existen muchas herramientas para optimizar imagenes para web desde programas que puedes instalar en tu computador, herramientas online o scripts que puedes implementar dentro de tu sitio WEB.
1 ¿Qué es optimizar imágenes para WEB?
2 ¿Porque es importante optimizar las imagenes para WEB?
2.1 Mejora el SEO
2.2 Mejora la experiencia de usuario
2.3 Transmite confianza
2.4 Ahorras recursos
3 Los 4 factores a considerar a la hora de optimizar imagenes para WEB
3.4 Formato
3.4.1 JPG
3.4.2 PNG
3.4.3 GIF
3.4.4 SVG
4 Tipos de optimización de imágenes
4.1 Optimización con pérdida
4.2 Optimización sin pérdida
5 Herramientas para optimizar imágenes
5.1 Aplicaciones para computador
5.2 Herramientas online
5.2.1 TinyPNG
5.2.2 Pixlr
5.3 Script para optimización de imágenes
6 ¿Como optimizar imagenes para WordPress?
6.1 Redimensionamiento de imágenes en WordPress
6.1.1 Plugin Imsanity
6.2 4 plugins para optimizar imagenes en wordpress
6.2.1 WP Smush
6.2.2 Imagify
6.2.3 ShortPixel Image Optimizer
6.2.4 ShortPixel Image Optimizer
7 Mejores prácticas para optimizar imágenes para WEB
8 Recomendaciones finales sobre optimizar las imagenes para WEB
Descubre como optimizar imagenes para web
Las imágenes representan la mayor cantidad de archivos dentro de tu sitio WEB, si tienes imágenes muy pesadas la carga de tu sitio será muy lenta lo que afectará la experiencia de los visitantes y la puntuación en los buscadores.
Optimizar las imágenes consiste en utilizar un programa para comprimir imagenes sin perder calidad disminuyendo su peso, también puedes usar script para optimizar imágenes y obtener los mismos resultados.
Al optimizar imagenes para pagina web utilizas una serie de técnicas que permiten mejorar considerablemente el rendimiento de tu sitio WEB y el ahorro de recursos, sin perder la calidad o que dejen de ser vistosas.
La finalidad de optimizar imágenes web consiste en buscar un equilibrio entre el peso y la calidad de la imagen, para que las imágenes de tu sitio WEB se vean bien y pesen lo menos posibles.
¿Porque es importante optimizar las imagenes para WEB?
Optimizar imagenes sin perder calidad es una de las tareas prioritarias que debes implementar en tu sitio WEB si quieres tener mejores resultados, ya que te da muchas ventajas y entre las importantes están:
La carga de tu sitio WEB será más lenta en la medida que las imágenes que contengan sean más pesadas.
Al optimizar imagenes para WEB mejoras el tiempo de carga de tu sitio WEB, este es un factor importante para el posicionamiento de las páginas en los resultados de los buscadores.
Otra ventaja de optimizar imagenes para SEO es que los buscadores favorecen a los sitios que pueden rastrear o indexar más rápido, por eso al optimizar imagenes para la web reduces los tiempos de rastreo.
Una página lenta tiene una tasa de rebote alta, porque los visitantes terminan saliéndose al ver que después de unos pocos segundos la página no termina de cargar.
Otra desventaja que tiene un sitio WEB con imágenes muy pesadas es que limita la visualización en dispositivos móviles y a visitantes con una conexión de Internet lenta.
En cambio al optimizar carga de imagenes web las páginas de tu sitio cargará mucho más rápido por lo que podrá ser visto desde cualquier dispositivo y por muchos más visitantes.
Un sitio con imagenes para web de mala calidad transmite una imagen descuidada, lo que dificulta la conversión de prospectos y aleja a los visitantes.
Al optimizar las imágenes y reducir fotos mejoras la apariencia de tu página WEB dándole un aspecto más profesional, lo que ayuda a ganar la confianza de los nuevos visitantes.
Ahorras recursos
Las imágenes conforman más del 20% del tamaño por eso al optimizar imagenes para WEB te ayuda a utilizar menos ancho de banda, requieres menos espacio en tu servidor de hosting, también reduces el tamaño y el tiempo de los respaldos.
Los 4 factores a considerar a la hora de optimizar imagenes para WEB
Saber optimizar fotos sin perder calidad es importante, por ello en la optimización de imágenes digitales existen cuatro factores que debes considerar los cuales son:
Busca el tamaño optimo de imagenes para WEB
El tamaño de una imagen se mide en pixeles tanto a lo largo como a lo ancho, 32 pixeles es aproximadamente 1 cm, si en tu WEB tienes una imagen de 1.200 px de largo y 500 px de ancho sería de 37,5 cm x 15,62 cm.
Por eso debes tener en cuenta el sitio donde vas a utilizar las imágenes para no colocar imágenes más grande de lo necesario, ya que estarías agregando peso a tu sitio WEB.
Existen plantillas que pueden imágenes grandes de 1.000 px a 2.000 px de largo por eso es necesario la optimización de imagenes para web ya que de lo contrario tu sitio WEB cargará muy lento.
La resolución de una imagen define la calidad de la imagen, mientras mayor sea la resolución mejor será la calidad pero el peso del archivo será mayor, la resolución es medida en pixeles por pulgadas (ppp).
También puedes ver expresada la resolución de una imagen en dpi que significa dot per inch o ppi que es pixels per inch.
Las imágenes para periódicos o revistas utilizan una resolución de más de 300 dpi, sin embargo lo ideal es que para optimización de imágenes para la web utilices una resolución de 75 dpi.
El peso de una imagen tiene una relación directa entre el tamaño y la resolución en la medida que mayor sea cualquiera de estos dos aspectos mayor será el peso de la imagen.
Cuando realices la optimización de imágenes de tu sitio WEB busca que su peso no supere los 50 kb que es el tamaño optimo de imagenes para web.
Pueden existir imágenes grandes de 1.200 px o más que pueden superar este peso sin embargo busca que sean una excepción y que no supere los 100 kb.
¿Sabes como reducir el peso de una imagen?
El formato de imágenes o tipo de archivo define ciertas características y cualidades que hacen que una imagen pueda adaptarse mejor a un diseño determinado, entre los formatos más utilizados están:
Es el formato más utilizado en las imágenes digitales, ya que permite la optimización de imágenes con y sin pérdida, ajustando el nivel de calidad sin perder los colores o las tonalidades.
Este formato es utilizado para imágenes que se componen de figuras geométricas y colores planos, estas imágenes son de mayor calidad por lo que son de mayor tamaño.
Este tipo de formato conserva la transparencia por eso es ideal para hacer logos y su optimización puede ser sin pérdida o con pérdida.
Es un formato que utiliza solo 256 colores y su compresión es sin pérdida, por eso es utilizado para hacer imágenes animadas por medio de la utilización de varias imágenes, eso puede hacer que las imágenes sean pesadas y de baja calidad.
Es un tipo de imagen vectorial que posee un formato XML que son escalables automáticamente, por eso es muy utilizado en logos, iconos e imágenes simples, además por lo general los archivos son de menor peso que los JPG o los PNG.
Existen otros formatos de imágenes sin embargo no todos son soportados por los navegadores, por eso lo más recomendable es que utilices los formatos descritos anteriormente.
Tipos de optimización de imágenes
Dependiendo de la calidad que necesites existen dos formas de como optimizar imágenes, una que te permite tener menor calidad y peso, la otra te permite una mayor calidad con un mayor peso, estas son:
Hay 2 tipos de optimización de imágenes
Optimización con pérdida
Es un tipo de optimización que degrada la imagen porque elimina algunos datos del archivo, por lo que al usar este tipo de compresión reduces la calidad de las imágenes y el peso del archivo es más pequeño.
Entre las herramientas para optimizar imágenes con pérdida tienes programas en donde puedes manipular la calidad de la imagen como Adobe Photoshop, Affinity Photo, ImageOptim, PngOptimizer, Pngquant entre otros.
Optimización sin pérdida
Con este tipo de optimización comprime las imágenes sin que pierdan su calidad, sin embargo para que esta compresión se pueda realizar es necesario que las imágenes no estén comprimidas previamente.
Para realizar este tipo de optimizacion de imagenes puedes utilizar programas como Adobe Photoshop, FileOptimizer, o ImageOptim, FILEminimizer y muchos más.
Existen muchas herramientas que tienes a tu disposición para optimizar imagenes para WEB sin perder calidad, desde aplicaciones para computadores, scripts que puedes implementar en tu sitio WEB y herramientas para optimizar imagenes en línea.
Aplicaciones para computador
Puedes optimizar imagenes para web con PhotoShop, Affinity Photo y otras aplicaciones para la edición de imágenes que instalas en tu computador, esto te da la ventaja de tener mucha flexibilidad a la hora de manipular las imágenes.
Sin embargo muchas de estas aplicaciones requieren que tengas un computador con gran capacidad para que no falle, porque necesitan muchos recursos para poder funcionar adecuadamente.
Optimizar imagenes en PhotoShop
Existen en internet páginas WEB que poseen herramientas para optimizar imágenes online esto te da la ventaja de poder cambiar tamaño de imagen online sin la necesidad de tener un computador con muchos recursos.
Sitio WEB de TinyPNG
TinyPNG es una herramienta optimizar imagenes para web gratis que te permite comprimir imagenes PNG y JPEG, en su versión gratis te permite optimizar 20 archivos a la vez con un límite de 5 MB diarios.
TinyPNG te permite optimizar imágenes para WEB online utilizando técnicas de compresión con pérdida, su algoritmo disminuye selectivamente el número de colores para lograr un resultado imperceptible y con menos peso.
Los archivos procesados por TinyPNG se muestran sin problemas en todos los navegadores y dispositivos, funciona en base a una técnica denominada “cuantización” que reduce la cantidad de colores de la imagen.
Esta técnica permite reducir un PNG de 24 bits en una imagen de 8 bits quitando además todos los metadatos innecesarios, para dar como resultado una imagen de menor peso y buena calidad.
Sitio WEB de Pixlr
Pixlr es otra herramienta que te permite optimizar imagenes online gratis permitiendo la edición de archivos de una manera inteligente y rápida con calidad profesional, gracias a que cuenta con varias herramientas de punta para tal fin.
Esta aplicación para optimizar imagenes online cuenta con todas las herramientas esenciales para editar imágenes pudiendo hacer acciones como cambiar el tamaño, recortar o eliminar el fondo fácilmente, e incluso agregar tu propio texto.
También puedes hacer retoque a tus imágenes como eliminar manchas, duplicar partes de la imagen o quitar objetos o personas de una forma muy sencilla, ya que las herramientas son fáciles de utilizar.
Otra ventaja de esta aplicación para optimizar imagenes web online es que está diseñada para guardar automáticamente la edición de tus imágenes para que puedas retomar el trabajo que has realizado en todo momento.
Script para optimización de imágenes
Script para optimizar imagenes
Son rutinas desarrolladas para optimizar las imágenes directamente desde tu sitio WEB utilizando los recursos del servidor de hosting, puedes hacer esta acción cada vez que subas una imagen o en procesos en lotes.
Muchos de estos programas utilizan librerías y aplicaciones adicionales para poder optimizar las imágenes con excelentes resultados, muchos de estos scripts tienen la limitación de optimizar jpg o png para WEB.
Utilizar este tipo de software optimizar imágenes requiere que tengas un poco de experiencia técnica para poder instalarlo y ponerlo a funcionar en tu servidor sin que afecte el funcionamiento de tu sitio WEB.
¿Como optimizar imagenes para WordPress?
Como WordPress es un CMS muy difundido tiene un gran número de aplicaciones desarrolladas que te permiten optimizar las imágenes de una forma muy fácil, ya sea de forma manual o automática.
Muchas de estas aplicaciones te permiten optimizar las imágenes en la medida que las estas subiendo a tu página WEB, sin embargo también optimizan imágenes que tengas almacenadas en tu servidor.
Es importante que comprendas que lo más recomendable es que hagas los ajustes de las imágenes antes de subirla a tu sitio WEB, sin importar el plugin para la optimización de imágenes que tengas instalado.
Redimensionamiento de imágenes en WordPress
A partir de la versión 4.4 de WordPress se crean varias imágenes de forma automática cada vez que subes una imagen en la biblioteca de medios.
Esto evita la necesidad de redimensionar las imágenes por medio del uso de hojas de estilo.
Además coloca un atributo srcset que permite a los navegadores seleccionar el tamaño más adecuado y descargarlo dependiendo de la resolución, así ignora el resto de las imágenes que no son necesarias.
Optimizar imagenes para WordPress atributo Srcset
WordPress crea estas miniaturas según la configuración que establezcas, sin afectar el tamaño de la imagen original.
Por lo que cada vez que agregues una imagen se crearán varios duplicados de distintos tamaños.
Plugin Imsanity en el repositorio de WordPress
Si quieres optimizar imágenes WordPress y solo quieres solo mantener las miniaturas, eliminando la imagen original además de otros beneficios puedes utilizar el plugin Imsanity.
4 plugins para optimizar imagenes en wordpress
En WordPress existen muchos plugins para optimizar tamaño imágenes, elegir entre uno u otro dependerá mucho de las necesidades que tú tengas, estos son algunos de los plugins más utilizados:
Plugin WP Smush en el repositorio de WordPress
El plugin WP Smush es un programa para optimizar imágenes muy utilizado porque con el puedes cambiar el tamaño de las imágenes, comprimirlas y facilitar la carga de imágenes diferidas, además su versión gratuita es totalmente funcional y muy completa.
Este plugin permite que realices compresión sin pérdida por lo que no afecta la calidad de las imágenes.
Además puedes optimizar varias imagenes a la vez con tan solo un clic aunque no estén dentro de la librería de medios.
Procesa archivos de imágenes con formatos PNG, JPEG, GIF y muchos más obteniendo los resultados más óptimos, cuenta también con opciones para automatizar el proceso de optimizar imagenes de WordPress.
Otra ventaja es que te ayuda a detectar las imágenes que no tienen el tamaño correcto para que la puedas arreglar y mejorar el rendimiento de tu WEB, porque este plugin escanea meticulosamente cada imagen que agregues o que estén en tu sitio WEB.
Plugin Imagify en el repositorio de WordPress
El plugin Imagify es un optimizador de imagenes WordPress que permite acelerar tu sitio WEB sin perder la calidad de las imágenes, además puedes cambiar el tamaño de las imágenes directamente.
Ofrece una versión gratuita y otra Premium permitiendo optimizar de forma automática todas las imágenes que cargues en WordPress y es compatible con WooCommerce y NextGen Gallery.
Tiene tres niveles de compresión en el nivel Normal utiliza un algoritmo de compresión sin pérdida donde la calidad de las imágenes no se ven afectadas.
En el nivel Agresivo utiliza un algoritmo con pérdida que afecta tan poco la calidad de las imágenes que es casi imperceptible, por último el nivel Ultra que utiliza un algoritmo de compresión con mayor pérdida.
Tiene una función de copia de seguridad que te permite revertir los cambios que le hagas a las imágenes si no quedas conforme con el resultado o de optimizarlas con otro nivel de compresión.
Plugin ShortPixel Image Optimizer en el repositorio de WordPress
El plugin ShortPixel Image Optimizer permite optimizar imagenes para WEB WordPress de una forma muy sencilla, además es liviano puedes comprimir todas tus imágenes y documentos PDF con un solo clic, en su versión gratuita te permite comprimir hasta 100 imágenes por mes.
Realiza la compresión de imágenes con y sin pérdida, además funciona con los formatos de imágenes más comunes como JPG, PNG, GIF (fijos o animados) además de archivos PDF.
Es un excelente programa para reducir tamaño de fotos porque permite optimizar imagenes jpg para WEB en WordPress con un algoritmo de optimización de alta calidad diseñado especialmente para fotógrafos.
Crea una copia de tus imágenes originales y restaurarlas cuando desees, además permite eliminar o mantener los datos EXIF de tus imágenes, optimizar imagenes para web por lotes o de forma individual.
Tiene la opción de convertir automáticamente archivos PNG a JPG y la conversión de formatos CMYK a RGB para optimizar imagenes WordPress, así mejorar el rendimiento de tu sitio WEB.
Plugin WP Optimize en el directorio de WordPress
El plugin WP-Optimize en sus inicios era un plugin que te ayudaba a limpiar la base de datos de WordPress, sin embargo desde hace unas cuantas actualizaciones trae un módulo que te permite optimizar imagenes para WEB WordPress.
Te permite realizar la compresión de imágenes con y sin pérdida, además tiene diversas opciones muy intuitivas que te permiten ajustar el nivel de compresión de las imágenes y la forma en que realizará el trabajo.
Con este plugin puede analizar y optimizar imagenes para web por lotes por lo que es muy fácil de utilizar. Yo lo he venido usando hace algún tiempo y puedo asegurarte que me ha dado tan buenos resultados como el plugin WP Smush.
Lo mejor que con las opciones que vienen desde la instalación ya te dará muy buenos resultados, por lo que no será necesario realizar ningún tipo de ajustes para que hagas la optimización de imágenes.
Mejores prácticas para optimizar imágenes para WEB
Mejores prácticas para la optimización de imágenes para la WEB
Si la herramienta para optimizar imágenes tiene la opción de guardar imágenes para WEB, usa siempre esta opción que te puede ofrecer una compresión y calidad adecuada.
Es recomendable que realices pruebas con tus imágenes variando los niveles de compresión y los tamaños adecuados, para que logres encontrar la mejor calidad con el peso adecuado.
Utiliza las imágenes con el formato y tamaño correcto para lo que necesitas así no tendrás imágenes con peso innecesario o que se vean distorsionadas.
Utiliza imágenes vectoriales, PNG si necesitas un gran nivel de detalle y alta resolución o JPG para imágenes de uso general y GIF comprimidos si necesitas algún tipo de animación.
Elimina todos los metadatos innecesarios y los espacios en blanco que tenga las imágenes, además utiliza la compresión con pérdida siempre que sea posible.
Reduce la paleta de colores que uses en las imágenes y evita utilizar textos dentro de las imágenes, ya que hacen que las imágenes pesen más y pierden definición cuando se escalan.
Recomendaciones finales sobre optimizar las imagenes para WEB
Recomendaciones de optimizar imágenes para WEB
Recuerda que siempre debes buscar un equilibrio entre el peso y la calidad para que las imágenes de tu sitio WEB se vean bien, además que cargará más rápido, los buscadores te darán mejor puntuación y consumirás menos recursos.
Al optimizar imagenes para WordPress utiliza un plugin que optimice las imágenes en tu servidor y no durante la carga de las páginas, adicionalmente automatiza el proceso de optimización de imágenes tanto como puedas.
Si no estás muy claro de cómo optimizar las imagenes para WEB o tienes alguna duda, puedes hacer contacto conmigo y así me cuentes como te puedo ayudar.
Déjame un comentario contándome qué te pareció este artículo sobre optimizar las imagenes para WEB.
Categorías Marketing Etiquetas SEO, WordPress Navegación de entradas

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución