Optimizar Imágenes Para Web

Un píxel es un punto diminuto de color y es la superficie más pequeña que compone una imagen. Pero tampoco podemos pasarnos al comprimirlas, porque entonces se verían mal, “píxeladas”, y perdería el sentido usar imágenes porque se trata de que apoyen el contenido, y hagan más compresible y amena la información. Obviamente si el usuario tiene que esperar, recargar mil veces la página y al final se va, la experiencia del usuario es negativa. Construyo estrategias de Marketing para pequeñas y medianas empresas.

Para evitar esto, es necesario hacer los cambios sobre la imagen original. Este sitio web utiliza cookies para mejorar la experiencia de navegación. Si sigues navegando estarás consintiendo las cookies de este sitio. Para mi la mejor opción es controlar el proceso de compresión lo máximo posible. diseño web Si no es con Photoshop, Befunky o Squoosh también son buenas opciones, y de esta forma sólo tocamos la imagen una vez y elegimos el tamaño según las peculiaridades de cada una. Para mi éste el mejor método de optimizar imágenes para web, porque nos da un control total del proceso.

En cuanto a los resultados, suelen ser bastante aceptables pero no siempre acierta. Puede ocurrir que haya algunas imágenes que o no bajen suficiente de peso o se vean fatal. Esperas a que se comprima y le das al botón “Download” para descargarla en tu ordenador.

¿cuál Es El Mejor Formato De Imagen Para Una Web?

Para lograr esto es importante aprender a tomar en cuenta cuál es el formato de imagen ideal para tu web. Ya para finalizar, si quieres un mejor resultado a la hora de optimizar imágenes WordPress, entonces deberías combinar la optimización de imágenes usando páginas web o con programas y la utilización de algun plugin de reducción de peso. Aunque yo la forma que utilizo es la de escalar las imagenes con Photoshop a la medida correcta, y después reducir su peso con kraken.io. Photoshop tiene muchas funciones que nos hacen fácil retocar imágenes, hacer montajes o diseños. Y es una de las herramientas más útiles si tienes una página web o un blog porque podrás optimizar las imágenes para poder reducir el peso sin perder calidad.

Esta es la forma en la que seguramente más veces utilices la herramienta, ya que es muy fácil de utilizar y además es gratuita. Antes de nada has de saber que TinyPNG utiliza un algoritmo de compresión lossy, pero está tan bien programado que yo no noto la diferencia, y gracias a eso se consiguen unos ahorros de peso increíbles. Es “la buena”, la imagen final será idéntica a la original, solo que mágicamente ocupará menos espacio. Si incluyes una foto en un artículo, ésta solo se mostrará con el ancho que tu diseño permita, y este ancho suele andar entre los 700 y 900px, así que todo lo que suba de ahí simplemente sobra.

Esta herramienta, al contrario de las anteriores, no permite la modificación de las imágenes. Sin embargo, Web Resizer, tiene una característica que la hace especial, es la posibilidad de cambiar las dimensiones de hasta 20 imágenes a la vez. Para esto, también puedes usar Light Image Resizer que es una herramienta que puedes instalar en tu ordenador. Cómo podéis comprobar, son archivos que tardan bastante en cargar, en concreto entre 1,2 y 1,4 segundos, y eso que están optimizadas. Para realizar esta comprobación, entra en GTmetrix y una vez realizado el test, dale a la pestaña waterfall.

Cómo Optimizar Las Imágenes Para Tu Web

Existen algunos programas, como ImageOptim, que se encargan de reducir el tamaño de las imágenes de forma automática. Tan solo tendrás que arrástralas hasta la ventana correspondiente y el resto se hará solo. Dentro de las opciones que nos brinda este programa por supuesto se encuentra la de optimizar imágenes web. Ahora que ya sabes en que consiste la optimización de imágenes es seguro que querrás optimizar todas las imágenes de tu web.

• Tan solo tendrás que arrástralas hasta la ventana correspondiente y el resto se hará solo.
• Te contamos como hacerlo con Photoshop, Pixlr Express (aplicación online de la que ya te hablamos en un artículo anterior) y Riot.
• Del mismo modo, permitefijar un máximo de tamañoy mantener los datos EXIF.

El peso de las imágenes es uno de los aspectos que más ralentizan el rendimiento de una web desarrollada en WordPress. Es uno de los primeros errores que se cometen cuando se crea una web. Se suben imágenes sin tener en cuenta lo que ocupan y con el tiempo acabamos ocupando demasiado espacio en nuestro hosting, haciendo que la web tenga una carga más lenta. Te contamos qué debes hacer si ya has subido imágenes sin optimizar a tu hosting y cómo puedes optimizarlas a partir de ahora. Tinypng es la aplicación online para comprimir fotos o reducir el tamaño de las imágenes que yo utilizo más a menudo. Es un clásico entre los clásicos y me gusta por su sencillez y facilidad de uso, pero sobre todo porque puedo comprimir las fotos tantas veces como quiera y al final elegir la que yo considere.

Existen páginas dedicadas de fotografía en las cuales los usuarios pueden crear galerías con imágenes en muy alta resolución (Flickr por ejemplo permite imágenes hasta tamaños de 6000 pixeles por su lado ancho). Sin embargo, hay que pensar que la mayoría de usuarios de internet simplemente quiere una imagen que se vea bien en las pantallas del ordenador y el móvil. Éste es el caso de Webempresa, el servidor para WordPress en el que confío para mi página web y los proyectos de mis clientes.

Las imágenes, algo tan simple como las imágenes, pueden hacer que una web sea visualmente muy atractiva o que sea muy lenta, por lo que tenemos que tener presente su tamaño y como usarlas. Pues esto que parece tan sencillo de realizar e inapreciable para la vista humana, como ya comenté anteriormente, reporta unos beneficios muy valiosos para el usuario y para el posicionamiento de la página en los buscadores. Es necesario escoger el formato adecuado (la extensión del archivo) en función de la imagen que se quiera utilizar. Por un lado, dentro de las herramientas online se pueden encontrar algunas como TinyPng, Compressjpeg, compressor.ioy Compressnow. No olvides la importancia de optimizar los atributos para facilitar a los buscadores la labor de indexación de tus imágenes, sin duda, será un paso más en el objetivo por conseguir un buen posicionamiento SEO. El uso de las imágenes y fotografías no está restringido, ni tampoco debes atribuir derechos de autor.

Comentarios En «herramientas Online Para Optimizar Imágenes Y Acelerar Tu Web»

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares. Todos los archivos que manejas en un ordenador tienen un «peso», que es la referencia de cuánto ocupan en kilobytes, megabytes, etc. Cuando en el paso anterior modificamos la medida, lo hicimos con el objetivo de subir a la web el tamaño óptimo, ya que una imagen más grande pesa más. Por si no sabes imagen en la web cuál es el ancho de tus posts (se suelen poner imágenes que ocupen el ancho entero), prueba a subir una imagen de 850 píxeles. Las imágenes destacadas de tus posts, o las que introduzcas a lo largo del texto, se van a ver a un tamaño predefinido por la plantilla que haya usado el diseñador a la hora de crearte la web. Por eso, si la imagen se va a ver a un tamaño, pongamos, de 800 píxeles; no tiene sentido que subas una de 6.000 píxeles.

En nuestro caso, vemos que nuestra imagen tiene mucho cielo, así que hemos decidido que los 26px que nos sobran se corten de arriba. Para ello, marcamos la zona inferior central como la más relevante de la imagen, de manera que le estaremos indicando a Photoshop que, si tiene que cortar imagen, lo haga de arriba. En caso de estar redefiniendo el lienzo también de ancho, el programa interpretaría que el corte debería hacerse cortando de ambos lados por igual , pero no es el caso porque el ancho lo tenemos ya definido. Para optimizar las imágenes de tu web directamente en WordPress, necesitarás el plugin de WordPress de TinyPNG. Con este Workflow podrás optimizar imágenes «en ruta» desde tu smartphoneWorkflow es una aplicación gratuita solo disponible en iOS, puedes aprender más sobre ella en este libro. Tenemos una foto de 3000 x 2000 px de cualquier banco de imágenes gratuitas y la subimos a nuestra web o blog sin más miramientos, sin ser conscientes de que eso es malgastar recursos.

Una vez subida la imagen y configurados estos parámetros, habrá que darle al botón “Optimize Now”. Finalizado el proceso, aparecerá información sobre el ahorro logrado y un botón para lanzar la descarga de la imagen resultante desde su servidor a nuestro equipo. A la hora de optimizar una imagen lo suyo es utilizar el archivo original. Como hemos explicado anteriormente, se trata de un archivo con pérdida lo que significa que cada vez que guardamos, estaremos perdiendo calidad respecto al original. Si queremos editar una imagen que ya ha sido optimizada con anterioridad, estaremos corriendo el riesgo de que su calidad se vea muy afectada.

Aunque la modalidad lossless sólo puede aplicarse sobre archivos PNG y JPG. Ofrecen unplugin para Photoshop, que te permite exportar de forma sencilla, sin tener que preocuparte de los parámetros. Se trata de un filtro que consigue que los elementos queden más destacados y vistosos.

Pero esto significa que comprimimos las imágenes dos veces, lo cual va a influir mucho en la calidad final, porque habrá imágenes que lo necesiten y otras no. Selecciona o arrastra tu imagen y aparecerá dividida en dos zonas. La izquierda es la versión original y la derecha, la nueva resolución. Una vez abierta, en la izquierda vemos un menú con multitud de opciones. Por defecto está abierta la «pestaña EDIT«, y el «desplegable ESSENTIALS«.