• Ir al contenido principal
  • Ir a la barra lateral primaria
  • Inicio
  • Quienes somos
  • Marketing

Marketing Digital

Mucho más que estrategia

15 Herramientas Para Optimizar Las Fotos De Tu Web

20 noviembre 2021 by nredmobile Dejar un comentario

Soporte JPG; PNG, WebP y otros formatos y puedes reducir el peso fácilmente en un par de toques. Funciona de forma offline una vez que ya la has usado previamente online por lo que siempre puedes tenerla a mano. Tiny PNG es una de esas webs que permite subir hasta 20 imágenes diferentes con un máximo de 5 MB cada una para reducir el tamaño de todas. Podemos descargarlas una a una, todas a la vez o transferirlas a Dropbox.

como optimizar imágenes para la web

Se estima que nueve de cada diez usuarios leen páginas y artículos con imágenes antes que aquellos que carecen de ellas. De la versión de pago te hablaré más en profundidad en el próximo artículo, donde me centraré en mostrartetodos los plugins para WordPress de optimización y compresión de imágenes. Si no quieres perdértelo, apúntate a la newsletter y yo mismo te avisaré cuando lo publique. Una recopilación de las mejores herramientas que te permiten comprimir y optimizar el tamaño de tus fotografías para la web. Otra opción a la hora de optimizar una imagen, es quedarnos únicamente con la sección que nos interesa. De esta forma estaremos ahorrando espacio, además de destacar lo más importante de ella.

Reducir El Tamaño Con Imageoptim

A continuación vamos a enumerar algunas buenas prácticas y recomendaciones para aplicarlas a todas y cada una de las imágenes que vayamos a subir a nuestra página web. Todas ellas tienen una resolución de 1000 x 750 píxeles y un tamaño de 100kb. Si te preguntas cómo una buena imagen puede influir de forma negativa en la experiencia de usuario, es por una sencilla razón. Como ya hemos visto, los archivos multimedia ocupan gran parte del espacio dónde se aloja tu web, además de ser el tipo de elementos que más pesan a la hora de cargar la página. Puedes comprimir imágenes en formato PNG, JPEG y GIF de hasta 32 MB, pero con un límite de 50 imágenes en su versión gratuita.

No te olvides de que antes, nuestras imágenes tienen que estar optimizadas. Este método consiste en solo cargar las imágenes que son visibles en ese momento. Imsanity, valorado con 5 estrellas, redimensiona automáticamente las imágenes que subimos a nuestro sitio WordPress, pudiéndose configurar con los parámetros que queramos. Sin embargo, la versión de prueba gratuita está acotada, por lo que si quieres mayor cobertura deberás pagar por ello.

En el caso de utilizar alguna imagen animada, nos decantaríamos por un GIF. Son varias las razones que tenemos para querer optimizar las imágenes. Con el botón azul “Bulk Smush Now” se inicia el proceso de optimización automáticamente. Y a partir de ahí, las imágenes que subas a tu web se comprimirán automáticamente. En Compress, en este caso dejamos el formato que viene de JPEG, y bajamos la calidad hasta que el peso que sale abajo sea un poco más de 100KB, por ejemplo a 125KB se ve bastante bien. El problema de este programa, a diferencia de Photoshop, es que no podemos previsualizar el resultado, y tenemos que elegir la calidad a ojo.

Pues se ha pasado de tener que cargar 2,4 MB a 840 kB en la primera imagen y 758 kB a 156 kB en la segunda imagen. Existen numerosas herramientas que permiten reducir el peso de las imágenes. Para poder contactar conmigo, es necesario que des expresamente tu consentimiento, marcando la casilla en dónde se dice que has leído y aceptas la política de privacidad y protección de datos de esta web.

“Save as”, y escogemos el formato en el que vamos a descargar nuestra foto. Cuando la barrita verde llegue al final, significa que ha finalizado el proceso y ya tendremos lista nuestra imagen. Una vez que hemos establecido correctamente los ajustes con los que se subirán nuestras fotos, vamos a optimizarlas.

Guardar para web es una opción o herramienta que nos permite Photoshop que optimice la imagen para subirla a Internet sin que tenga demasiado peso. Sí, es lógico y evidente que se pierde algo de calidad si vamos a reducir desde una imagen de 5 MB a una imagen de 20 kB, pero conseguimos un equilibrio entre la calidad y el peso. A continuación, examinamos herramientas para escritorio, herramientas online e incluso algunos plugins para optimizar imágenes de WordPress que puedes utilizar para comprimir tus imágenes sin sacrificar la calidad. Esto quiere decir que tus imágenes se verán perfectas si las guardas con este formato, pero tendrán un peso mayor si, por ejemplo, hablamos de una fotografía. Es el tipo de archivo ideal para imágenes con colores planos llegando incluso a dar mejor resultado en la compresión de ciertas fotos con grandes zonas lisas que un jpg, aunque no es lo habitual.

Una opción interesante de este programa es que tus imágenes y fotos puedes enviarlas directamente por correo electrónico o subirlas a Facebook. Con imagesmaller.com solo podemos ir optimizando nuestras imágenes de una en una y que no sean de más de 50Mb. El responsable del tratamiento es DespachoTres Internet Services S.L., y utilizamos tus datos personales para gestionar los servicios que tienes contratados con nosotros y aquellos que nos solicites. El tratamiento de tus datos es necesario para el correcto desenvolvimiento de la relación negocial o prenegocial que pudiera existir, y en su caso, para la remisión de nuestro boletín electrónico. Tus datos son cedidos a distintas entidades, bien por exigencia legal o por necesidad de la propia prestación del servicio que contratas o del que nos solicitas información. Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional, que puedes consultar en nuestra Política de Privacidad.

Porque la intención de mis post es precisamente esa; aportar información de utilidad al fotógrafo. La principal peculiaridad de EWWW Image Optimizer es que lleva a cabo la optimización en tu propio servidor, no en uno ajeno. Del mismo modo, permitefijar un máximo de tamañoy mantener los datos EXIF.

En este caso, el resultado es bastante correcto y tiene un peso de tan solo 4KB. A continuación, después de pinchar en Ok, nos dirigimos otra vez al menú Imagen, pero en este caso queremos modificar el Tamaño de lienzo. Esta acción nos permite aumentar o reducir cualquiera de las dimensiones de una imagen sin afectar a la proporción, de forma que la fotografía no se distorsionará. Una vez hecho esto, cambiaremos los píxeles de alto y ancho de la imagen de manera que una de ellas tenga el valor que buscamos y la otra tenga el otro valor o lo supere. Por eso, vamos a aprender cómo debemos tratarlas para que, sin perder calidad, sean lo más ligeras posible.

Así, subas la foto que subas, si ésta supera tus dimensiones, serán redimensionadas para que se ajusten a la perfección. Lazy Load es un plugin gratuito que puedes encontrar en el repositorio de WordPress clicando en el encabezado de este texto. 4.- Eligo diseño web la imagen lo más comprimida posible que mantenga visiblemente la calidad de la original. 3.- Repito el paso 2 hasta que la calidad de la imagen empiece a verse afectada. Así que una vez comprimida la imagen compruebo que la calidad siga siendo buena.

Usa cookies propias y de terceros para almacenar, acceder y procesar datos personales como su visita en este sitio web. Ya has visto lo importante que es tener una buena velocidad de carga, pero que al mismo tiempo, todas las imágenes se vean bien (no hay cosa que dé más sensación de dejadez que tener en tu web imágenes pixeladas). Es decir, una vez ajustado el tamaño a la medida correspondiente, puede ser que la imagen todavía pese mucho.

Para las páginas estáticas, será el diseñador web el que las optimice, en cambio, en las de tus artículos es el redactor o responsable de los contenidos de tu empresa quien debe optimizarlas. [newline]Por cierto, aquí te dejamos un texto sobre los mejores hosting para que tu web cargue rápido, y con un 20% de descuento. Reducimos la calidad a 30 y veremos en la parte inferior izquierda como va reduciendo de tamaño. Las cookies técnicas necesarias tienen que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles. Si una imagen pesa 3Megas (3.000 Kb) tardará 30 veces más en descargarse que una imagen de 100Kb. Utilizamos cookies para poder ofrecerte la mejor experiencia en nuestra web.

Plugins Para Optimizar Las Imágenes

Abajo contamos con una barra deslizante que modifica esos valores de 1-12. Es un compresor de imágenes, remueve basura metadatos y ahorra espacio. Utilizamos cookies para ofrecerte la mejor experiencia en nuestra web.

Cada vez más cerca de aclarar nuestras dudas de cómo optimizar nuestras imágenes para la #web ¿No te has apuntado? 👉 https://t.co/oMEgE578NS @soyunignorante nos revelará todos los detalles #WPPontevedra 😉 pic.twitter.com/GB2VMVYaKN

— WordPress Pontevedra (@wppontevedra) January 16, 2019

Bueno, y en el tema del Responsive Design es todo un mundo, pero es muy importante tener presente que un móvil no tiene la velocidad de un PC, por lo que hay que adecuar las imágenes de alguna forma, solo hay que encontrar la adecuadas. También si, normalmente se suelen adaptar las imágenes haciéndolas progresivamente más pequeñas, por lo que no es necesario que tengan gran tamaño (aquí podéis saber más sobre adaptar imágenes en un Responsive Design). Si la imagen tuviese muchos colores distintos, texturas y degradados al usar el formato PNG de 8bits se perderían muchísimos colores, esta es la gran diferencia. Otro factor a tener en cuenta es el del dispositivo para el que está destinada, no podemos usar grandes imágenes con gran peso si va a ser un Smartphone el que finalmente verá nuestra web.

Si te tomas la molestia de probar o instalar alguna de estas herramientas en tu WordPress te vas a dar cuenta que la optimización de imágenes es algo muy fácil y rápido y que vale más ir gestionando en el momento de la subida. No te quiero contar lo que significa tener que meterte con 800 imágenes de una web subidas a 5000 px y tener que optimizarlas de una tacada. Hacer imagen web las cosas bien día a día supone tener tu web ordenada y limpia. Optimizador y compresor de imagen bastante rápido que permite optimizar imágenes en bloque. Sin embargo, no puedes tomar esto como una referencia fija, ya que depende de los colores y el grado de detalle que tenga la imagen. En este caso, al tener mucho gris, sí que hemos podido reducir el peso más.

Lo Que Debes Saber A La Hora De Optimizar Las Imágenes De Tu Web

Así mismo, a la hora de exportar otras imágenes, no solo tendremos que basarnos en los valores predeterminados. La ventaja de la herramienta de Guardar para web es que cuenta con su propio sistema de ajustes que podemos explorar para optimizar el tamaño de imagen. Según el blog de expertos de WordPress, uno de los principales servicios web del mercado, el tamaño ideal de una imagen no debe superar los 1920 a lo ancho.

  • Es decir, una imagen está formada por un conjunto de varios píxeles.
  • La más avanzada y personalizable probablemente sea hacerlo tras tratarlas en nuestro software de edición habitual.
  • Pero ahí no queda todo, aún así después de pasar nuestras imágenes por la herramienta Guardar para web de Photoshop podemos usar otras herramientas para comprimir más el peso sin perder calidad.
  • En este caso, se debe trabajar fuertemente en optimizar la web para dispositivos móviles.
  • Puedes reducir el tamaño de la foto sin pérdida de calidad de imagen (menor compresión) o con perdida (mayor compresión).

Así todo, he de reconocer, que quizás sea mejor que tinyPNG para esta función. Como he comentado al principio del post, una de las principales razones de que el tiempo de carga de una web sea alto, es por las dimensiones de las mismas. Si subimos a la web una imagen de 1024 x 768 píxeles cuando esa misma imagen en la web está en un espacio de 800 x 600 píxeles, es necesario que sea escalada.

Una vez guardada en nuestro equipo, comprobaremos cómo ha quedado. Al contrario que TinyPNG, esta herramienta suele bajar poco el peso total de la imagen. Necesitaremos comprimirla más mediante otro metodo adicional, como usando los siguientes programas que te comento o un plugin en WordPress. Normalmente es más que suficiente para imágenes pequeñas, pero en los slider o en portadas, que ocupan todo el ancho de la pantalla, es probable que la calidad se quede muy justa y necesitaremos subir de 100KB. Por ejemplo, imaginemos que quiero colocar una imagen justo debajo del primer párrafo de este post, hacemos clic con el botón derecho encima del párrafo, como puedes ver en esta imagen.

Cómo optimizar imágenes para la web para mejorar la velocidad de carga e indexación por @manuelcervilla

– Optimizar no es solo comprimir
– Cómo optimizarlas
– Cómo mejora la indexación
– Dónde descargar imágenes

-> https://t.co/WcPk1VPlEB#WPO pic.twitter.com/IaEYgjuQ9o

— Raúl González – Ragose (@YoRaulGonzalez) December 7, 2018

Algunas de las herramientas online más comunes incluyen JPEGmimi y TinyPNG. Si prefieres un enfoque más sencillo, puedes usar una herramienta en línea que optimice automáticamente tus fotos. Las herramientas anteriores tienen una de curva de aprendizaje, pero te permiten encontrar la configuración de optimización de imagen que mejor se adapta a tus necesidades. Las herramientas para escritorio te ofrecen más control sobre tu configuración de optimización. Si estás acostumbrado a trabajar en un editor de fotos como Photoshop, entonces tal vez prefieras este enfoque.

Archivado en:Marketing Etiquetado con:designs, imágenes, optimiza, responsive

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Barra lateral primaria

Entradas recientes

  • Diseñador De Páginas Web, ¿qué Está, Qué Hace Y Cómo Elegir Al Mejor?
  • Conforme Ser Diseñador Fuerte Paginas Web
  • Las 31 Herramientas De Diseño Web Que Convienes Conocer En 2022
  • Diseñador De Páginas Web, ¿qué Está, Qué Hace También Cómo Elegir Por Lo Menos Mejor?
  • Desarrollador Web Vs Diseñador Web 2021 ¿cuáles Son Las Diferencias? No-code Developer

Copyright © 2025 · Lifestyle Pro on Genesis Framework · WordPress · Iniciar sesión