Ventajas Y Consejos Para Optimizar Las Imágenes Que Aparecen En Una Página Web

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.

El primero reduce la calidad gráfica de la imagen , pero reduce su peso hasta la mitad incluso, mientras que lossless no reduce la calidad , pero la reducción de peso es practicamente nula. La recomendación sería utilizar la primera opción, ya que aunque se pierda algo de calidad los resultados son muy bueno. No podemos subir las imágenes que hacemos (fotografías o creaciones propias en programas como Photoshop o Lightroom) a una página web porque acabaríamos saturándola con un gran peso y haciendo que cargue lento.

Seleccionar El Formato De Imagen Adecuado

Los archivos PNG se utilizan para vectores, logotipos, capturas de pantalla e imágenes más pequeñas. Querrás usarlos con menos frecuencia ya que tienen un tamaño de archivo más grande. Antes de comenzar a optimizar, asegúrate de haber elegido el formato de archivo correcto. El formato de archivo que elijas afectará su tamaño total y la capacidad de optimizar la imagen.

• Las imágenes además de poseer una excelente calidad, las encontramos clasificadas por Colecciones, cosa que nos facilita cualquier búsqueda que realicemos.
• Para conseguir aparecer en el top 10 de resultados vas a necesitar caerle bien a Google, y uno de los factores que más tiene en cuenta el buscador a la hora de decidir quién irá antes que quien, es la velocidad de carga de la web.
• Se trata de un filtro que consigue que los elementos queden más destacados y vistosos.
• Estas herramientas son excelentes si no quieres perder el tiempo aprendiendo los pormenores del software de edición de fotos.
• Sigue leyendo para aprender cinco métodos diferentes que puedes usar para optimizar fácilmente tus imágenes en la web.
• Además, debemos acordarnos de las copias que hace WordPress de nuestras imágenes.

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 imagen en la web 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.

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.

Como ya hemos visto, este tipo de archivos son los que más tamaño ocupan, y por lógica los que más tardan y consumen al cargarse. Por eso, cuanto menos pesadas, menos tamaño y menos número de imágenes tengamos, nuestra página tardará menos en cargarse. Pero tranquilo, en este artículo vamos a aprender a acceder a ellas y ver el tamaño que tienen, lo que ocupan en tu servidor y a optimizarlas. Espero que el artículo de hoy os haya servido para acelerar vuestras web, y que Google os tenga más aprecio a la hora de posicionar vuestra página.

Otro problema que nos puede ocurrir si no utilizamos los sistemas que os hemos comentado, es que podemos conseguir una imagen que pese menos, pero a costa de la calidad de la misma. Cuando ponemos una imagen en una web queremos que pese poco, pero también que la persona que la ve se sienta a gusto y no que vea una imagen distorsionada donde no entienda que sale realmente. También has de saber que para aprovechar todo el potencial de este plugin tu hosting debe tener disponible esta tecnología desde el propio servidor.

Como hemos hablado antes, cuando subimos una foto, WordPress crea diferentes copias con distinto tamaño, con el objetivo de adaptar la imagen en función de dónde se muestra. Mientras que, con los plugins, solo tendrás que elegir cual se adapta mejor a tus necesidades e instalarlo, con las herramientas serás tú quién lo haga manualmente. Solo tenemos que copiar la dirección de la página que queremos analizar y copiarla en su barra buscador. Nos devuelve un estudio bastante detallado sobre el qué puede estar haciendo que se ralentice la carga o qué podríamos mejorar. Tanto en WordPress.com como WordPress con hosting (wordpress.org) los planes suelen contar con unos determinados límites de espacio, por eso, el ahorro no solo es de espacio, es de dinero. En muchos casos, las imágenes suponen más del 50% del peso total de la página.

Para esos casos puntuales existen varias herramientas y utilidades alternativas. Teniendo esto en cuenta, una vez vayamos a guardarlas o exportarlas, podemos proceder a optimizarlas para web. Muchos editores de imagen cuentan con la opción “Guardar para web”, donde podremos elegir el formato diseño web de salida, su compresión y pérdida de calidad. La más avanzada y personalizable probablemente sea hacerlo tras tratarlas en nuestro software de edición habitual. Es común retocar las imágenes antes subirlas a la web, bien sea editando sus colores, la luz, o simplemente redimensionandolas.

Plugins Para Optimización De Imágenes En WordPress

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.

En los últimos años han aparecido muchas herramientas de optimización de imágenes para la web. Además de reducir el tamaño del fichero, puedeeliminar los datos EXIFque acompañan a la fotografía. Pero puedes probar de forma gratuita suversión Lite, que admite optimizar hasta 20 imágenes diarias. Formato JPG. Se trata del formato universal que se utiliza para las imágenes. Se suele perder un poco de calidad al comprimirlas pero no se pierden colores ni tonalidades.

Esta API te permitirá automatizar la compresión y optimización de tus imágenes. Esto no sera un impedimento para ti, ya que seguramente no crees muchos artículos con más de 20 imágenes. Y si lo haces no tienes más que refrescar la web y volver a lanzar otras 20. Utilizamos cookies propias y de terceros para mantener las preferencias de usuario y monitorear el tráfico de nuestra web, entre otros.

Con esta herramienta solo tendrás que añadir el tamaño que quieres para tu imagen, ya que la resolución de la imagen se guardará directamente para formato web. Permite editar, componer, retocar, transformar y tiene la opción de guardar para web bajando al máximo el peso de la imagen. Está demostrado que la velocidad de carga de una web influye en su posicionamiento orgánico. O en otras palabras, el SEO mejora si usas imágenes bien optimizadas. Cada theme proporciona un ancho distinto para el contenido principal donde van los posts. Además, quizá tu quieras una imágen con más calidad porque quieres que el usuario la pueda abrir en un pop up o en una url distinta a su tamaño real.

Formato De Imagen Gif

Dentro de todos los elementos que forman parte de ella, las imágenes suelen ser los elementos que más influyen en esta velocidad. Si no están optimizadas, pueden incrementar considerablemente el tiempo de carga de una página web, afectando negativamente tanto al posicionamiento como a las visitas. En nuestro libro blanco de este mes, queremos centrarnos en este punto y mostraros algunos consejos para reducir el tamaño de las imágenes utilizadas en nuestros sitios. El plugin WP Smush elimina la información oculta de las imágenes para reducir el tamaño sin perder calidad.

Te aseguro que no es necesario tener fotos con una resolución tan alta a no ser que vayas a hacer un cartel para una exposición. Si estás usando el CMS líder del mundo, entonces estás de suerte, ya que WordPress cuenta con plugins que hacen mucho más sencilla la optimización de imágenes para la web. Estos plugins optimizan las imágenes automáticamente, haciendo que tu labor solo sea subir las imágenes a tu web.

Básicamente se refiere a cómo percibe el usuario la navegación y el uso de nuestro sitio web. Es por eso que aunque una imagen se vea algo mejor que otra, si ello conlleva un incremento en el tiempo de carga del sitio web o un gasto inapropiado de transferencia de datos, puede ser contraproducente. Si te recomendaría pasar las imágenes por un programa antes de subirlo al servidor. Si no tienes Lightroom o Photoshop, puedes utilizar la versión gratuita de JPGmini o ImageOptim. Al igual que el caso anterior, su funcionamiento es muy sencillo aunque en esta ocasión, el usuario puede configurar determinados parámetros como la calidad de la imagen resultante, así como el ancho y el alto.

Cuando estemos seguros de haber finalizado el proceso, hacemos clic en “Download Image”, y se nos descargará la fotografía ya editada. Tenemos la opción de descargar el archivo como .PDF, .PNG y en archivo comprimido . La ventaja de utilizar estas herramientas es que tienes todo el control sobre el proceso. El inconveniente es que te va a llevar un poco más de tiempo, pero si tienes un blog con pocas fotos no tendrás ningún problema. El responsable de este sitio es Wenova Online S.L., cuya finalidad es el envío de información y formación sobre blogging y marketing online, con la legitimación de tu consentimiento otorgado en el formulario.

Es necesario comprimir las imágenes reduciendo todo lo que se pueda el peso de las mismas. Sin lugar a dudas, uno de los elementos que más incrementan los tiempos de carga de una página son las imágenes. Por ello, es imprescindible aplicarle un proceso previo de optimización.

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.

Su optimización se puede hacer en WordPress de forma automática mediante plugins que se encargan de modificar el tamaño, comprimir el peso o incluso cambiar los formatos de las propias imágenes, creando copias incluso. Una vez tengamos una imagen de las dimensiones adecuadas debemos de adaptar el tamaño de archivo, mediante el uso de distintos formatos de imagen y la compresión adecuada. Considerando que, por ejemplo, se tiene un total de 5 imágenes y que cada una de ellas pesa unos 500 kB, como poco, la web tendría que hacer la carga de 2,5 MB solo en imágenes. Sin embargo, si se les aplica un proceso de compresión a cada una de ellas y se acaba obteniendo una optimización total de un 75 %, la web tendría que cargar 625 kB . Pues no imaginas lo que un usuario puede agradecer esta optimización cuando está esperando a que su página cargue.

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.