consejos

Su herramienta puede reducir hasta en un 20% el peso de las imágenes de tu web. Vale, ya sabemos cómo optimizar imágenes WordPress de manera fácil, pero ¿Qué sucede si tenemos otro tipo de CMS como Drupal o Blogger? Entonces es cuando debemos tomar otro tipo de alternativas, las cuales pueden tomar menor o mayor tiempo.

No obstante, sí pueden ser útiles cuando ya tenemos una web con más de 100 imágenes, por ejemplo en una tienda online, y sería mucho trabajo descargar todas y optimizarlas una por una en Photoshop y volverlas a subir. Reduce el peso de forma totalmente automática y gratuita, tanto de imágenes PNG como JPG. Normalmente al reducir su tamaño, como hemos visto anteriormente, suele bajar bastante el peso, pero si se trata de una imagen muy grande, también deberemos tocar esta variable.

Guardaremos las fotografías complejas, con muchos colores y degradados, con la extensión jpg. Ya que su algoritmo da unos resultados de compresión de imágenes mejores. Cuando trabajemos con imágenes transparentes en formato gif, debemos revisar con atención después de guardar porque pueden dentarse los bordes haciendo que se vean mal.

Por Qué Es Tan Importante Optimizar Las Imágenes De Tu Web

Aparte de encontrar fotografías ordenadas por categorías, tienes la opción de aplicar un filtro para ver las imágenes o búsquedas más populares. Cada mes agrega una media de 3.000 nuevas imágenes y fotos de alta resolución. Pues en la mayoría de ocasiones, no es tarea fácil dar con esa imagen perfecta que ilustre nuestro contenido y lo haga más apetecible para los usuarios. Y ahora es momento de ver qué pasos debemos seguir para optimizar los atributos de una imagen y de este modo facilitar su indexación en Google.

Las imágenes pueden ocupar una cantidad considerable de espacio, y la mayor parte es innecesaria. Sin imágenes, la mayoría de los sitios web se verían como interminables bloques de texto. Para capturar la atención del visitante son imprescindibles las imágenes diseño web de alta calidad. Crearán espacios en tu contenido y lo harán más legible; sin mencionar el tráfico adicional de las búsquedas de imágenes. Pero para obtener todos estos beneficios, debes buscar optimizar correctamente tus imágenes para WordPress primero.

Puedes quitarle ese peso de más a tu sitio web y tener un sitio más liviano y de mayor rendimiento. Además, puedes reducir los costos del servidor si pagas con base en el almacenamiento. Un sitio de carga lenta crea una experiencia de usuario mediocre. Esto conduce a tasas de rebote más altas y un menor tiempo de cada visita a tu sitio en general. No puedes esperar que tus usuarios se queden y esperen a que se carguen tus imágenes.

Tamaño

En esta pestaña, lo que debemos enfocarnos es en el cómo se percibe la imagen a rasgos generales. Debido a que es una herramienta para comprimir, no podemos preocuparnos en que la imagen sea 100% nítida o tenga el mejor degradado entre tonos. Pero siempre y cuando se vea bien al tamaño de salida, podemos trabajar con ella. Bajo este método, la compresión será mayor siempre y cuando bajemos el valor de calidad de la imagen. Para mostrar una diferencia, la imagen a 5000 Px de largo tuvo una salida de 11 MB exportada en máximo . En medio la imagen tan solo pesaba alrededor de 1.6 MB y en una calidad baja tan solo pesó 690 kb.

Sin duda con este plugin ayudaremos a que nuestro sitio web sea más rápido, con imágenes sin pérdida de calidad y más ligeras. Así es que si tienes una web y entre tus objetivos están, aumentar el número de visitas, obtener un buen posicionamiento web, y mejorar la experiencia de usuario, debes hacer lo posible por evitar que esta sea lenta y pesada. Es un programa para reducir tamaño de las imágenes online que te permite subir hasta 20 imágenes a la vez con un máximo de 5 Mb cada una.

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.

Cuando se trata de compresión, es importante jugar con la configuración y las diferentes herramientas hasta encontrar el equilibrio perfecto entre la calidad de la imagen y el tamaño del archivo de imagen. Es un equilibrio difícil de alcanzar, pero definitivamente vale la pena lograrlo para mejorar tus velocidades de carga y tu experiencia de navegación. Al final del artículo te mostraré una lista de herramientas o editores de fotos online gratuitospara que puedas reducir el peso de tus fotografías antes de subirlas a la web. Pero antes me gustaría darte unos consejos a la hora se usar las imágenes.

Si tardan mucho en cargar tus imágenes, seguramente las necesites optimizar. Una de las técnicas más comentadas en la mayoría de blogs de profesionales SEO, es la WPO , que consiste básicamente en optimizar la velocidad de carga de la web. Si logramos mantener estas exportaciones para crear imágenes que sean ligeras y que permitan cargar la página con mayor velocidad, lograremos mejorar el puntaje que nos ayudará a destacar en la web. En el caso de la calidad, siempre podemos jugar a ajustar un 10% por arriba y por debajo del valor establecido para encontrar más o menos detalle, sin que eso equivalga un gran cambio de peso. Lo importante es saber que cuando se exporte se va a ver bien para su propósito. En el caso de las flores de arriba, al exportar para web, abajo podemos ver un ejemplo de cómo se puede previsualizar para ver si la función de lupa está funcionando bien.

En la pantalla ‘Opciones avanzadas‘, tendrás un lugar donde puedes ingresar o cambiar el título de tu imagen. WordPress tiene un editor de imágenes incorporado que te permite recortar tus imágenes desde tu escritorio. Por ejemplo, supongamos que necesitas una imagen de 300 × 300 píxeles, pero en su lugar, cargas una imagen de 3000 × 3000 píxeles y haces que tu tema de WordPress reduzca la imagen para mostrarla correctamente.

Dado que se utilizan varias imágenes para hacer el GIF, suelen tratarse de elementos muy pesados. A parte de Photoshop, hay un montón de programas en línea para optimizar imágenes para web, tanto de forma manual como de forma automática. Como norma muy general, para optimizar imágenes para web lo mejor es que las imágenes pesen unos 100KB, pero esto no es una regla exacta, depende de cada imagen, de los colores que contiene, y sobre todo de si se pixela.

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.

En la casilla de “Width” introduce los valores que quieres que tenga el ancho de tu foto. Otro de los sitios imprescindibles en cuanto a la edición de fotografías es Image Resizer. Con un funcionamiento parecido a Picresize, nos encontramos una portada simple, diseño web jaén con un botón central verde, en el que aparece la frase “Select Image”. Cuando nos situemos en la página principal, veremos un cuadrado con el símbolo de una nube y una flecha. Hacemos clic ahí y buscamos dónde está nuestro archivo en nuestro ordenador.

• Se trata de otro banco de imágenes de excelente calidad y en constante crecimiento.
• Es un proceso completamente manual cuyas tareas de optimización realizamos de forma previa a la subida de las imágenes a nuestra web.
• É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.
• Es “la mala” ya que pierde un poco de información por el camino , pero a cambio la compresión es mucho mayor.

No obstante, tampoco es bueno abusar de ella ya que puede llegar a producir “ruido” en la imagen y hacer que ocupe más espacio. A continuación hablaremos sobre algunas recomendaciones que podemos llevar a cabo para la optimización de las imágenes. Al igual que el anterior, optimiza automáticamente las imágenes, reduciendo supeso sin sacrificar su calidad. Es muy sencillo, solo hay que instalarlo y en el menú Multimedia – WP Smush te aparecerá un mensaje con el número de imágenes que tienes sin optimizar.

Para comenzar, hacemos clic dentro del cuadrado de líneas, donde pone “Drop your .png or .jpg files here! Sin embargo, en las copias de tamaño pequeño tenemos la opción de recortar las miniaturas en las dimensiones exactas a las que determinemos aquí. Copia de tamaño medianos de la imagen, como portada de un post en una referencia. Copia tamaño grande de WordPress en una imagen de portada de un post.

Es la gran ventaja frente a Smush, que tiene su versión gratuita mucho más acotada. No solo tenemos la opción de reducir su tamaño, también podemos recortarla, rotarla y darle la vuelta. Haz scroll hacia abajo, hasta que aparezca en tu pantalla esta imagen, donde debemos seleccionar las características que queremos que tenga la foto. Tenemos la opción de guardar las imágenes en nuestro Dropbox o descargarnos un zip con la carpeta que contiene las imágenes, haciendo clic en botón verde, donde pone “Download all”.

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.

Hay muchos plugins, pero este es uno de los más completos y mejor valorados puesto que la calidad de la imagen no se reduce al ser comprimida. ¿Has subido un montón de imágenes y no sabías que tenías que optimizarlas? Dispones de varios plugins para optimizar las imágenes que has subido previamente y las que subirás en adelante.

Si planeas insertar un video pequeño, asegúrate de que esté en formato GIF, y no MP4. Sigue leyendo para aprender cinco métodos diferentes que puedes usar para optimizar fácilmente tus imágenes en la web. Al optimizar tus imágenes mejorará tu rendimiento al igual que tu posicionamiento. Google y otros motores de búsqueda odian los sitios web de carga lenta. No es lo mismo tener una foto con el nombre ciudad-1354.jpg que barcelona-noche.jpg.

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.

Plugin Imagify Image Optimizer

Es tan sencillo como, indicar el nuevo ancho que quieres en la imagen y la herramienta de forma proporcional la redimensionará, dejándola lista para que la descargues. Su función es que las imágenes mantengan una buena calidad pero con menos peso, por ejemplo, para que se puedan cargar rápido en un servidor. Es un formato de imagen que no tiene pérdida, permite transparencias y degradados. Por todos estos motivos, no debes caer en el error de creer que comprimiendo y cambiando el tamaño de tus imágenes ya las tienes optimizadas, habrás dado un gran paso, pero no todos, todavía debes mejorar su indexación. ¿La optimización de tus imágenes ha mejorado la velocidad y el rendimiento de carga de tu sitio web? El mejor enfoque es tomar nota de las dimensiones de la imagen requeridas por tu tema y dimensionar tus imágenes acorde con este.

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 diseño 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.

¿qué Formatos De Imagen Se Pueden Usar En Web?

TinyPNG también cuenta con una API (un código de letras y números) que podrás utilizar en aplicaciones de terceros para convertir imágenes al vuelo. Este es el email que recibirás si adquieres el pluginInstalar el plugin de TinyPNG en Mac es tan sencillo como arrastrar los archivos que te enviarán en el email en la carpeta Aplicaciones / Adobe Photoshop / Plug-ins. Yo optimizo absolutamente todas las imágenes antes de subirlas al servidor, y aun así siempre me encuentro con el maldito mensaje que me invita a comprimirlas aun más.

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.

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.

Más bien lo que hace es retardar la carga de las imágenes para que cuando alguien llega a una url no tenga que esperar a que carguen todas las imágenes para mostrarse la página. Tiene muchas opciones y sin duda es el programa más diseño web profesional que yo conozco para tratar imágenes. Como comento en el vídeo, existen infinidad de programas para tratar imágenes. Otros nos permitirán recortar, reducir, comprimir y en definitiva optimizar fotos de manera completa.

• La imagen que subamos se adaptará a las medidas que establezcamos, pero conservando sus proporciones originales en las copias de tamaño medio y grande.
• Cuando la tengas lista y todos estos ajustes elegidos, basta con darle a “Guardar” y elegir la ubicación.
• Cada mes agrega una media de 3.000 nuevas imágenes y fotos de alta resolución.

La velocidad de carga de una página web es uno de los factores que debemos trabajar si queremos que las personas que visiten nuestro sitio tengan una buena experiencia de usuario 😊. No sólo depende de un buen hosting y es un factor SEO muy importante de cara al posicionamiento de una página. Una de las cosas más básicas que influyen en la velocidad de carga de una web es el tamaño de las imágenes que tengas subidas a la misma. No te vayas porque en este post te vamos a enseñar diferentes formas de optimizar imágenes para web.

Antes de comenzar a optimizar tus imágenes, puede ser útil dimensionarlas adecuadamente. No tiene sentido cargar una imagen enorme a tu sitio, especialmente cuando se cambiará el tamaño de todos modos. Con una compresión mínima, obtendrás con un tamaño de archivo grande, pero una imagen de mayor calidad. Con un alto nivel de compresión, el tamaño de la imagen será muy pequeño, pero la calidad de la imagen se verá afectada. No optimizar las imágenes puede conllevar a velocidades de carga increíblemente lentas y problemas de ancho de banda.

El objetivo de este atributo, es facilitar una descripción en caso de que se produzca algún error y la imagen no logre cargarse. Por ejemplo, tengo esta imagen que quiero mostrar en un artículo en el que hablaré sobre las distintas razas de perros, sus características y personalidad. Partiendo de la base de quelos buscadores no leen las imágenes ni tampoco el texto que pongas en su interior, para conseguir que estas sean indexadas de forma correcta, haremos uso y optimizaremos los atributos correspondientes. Motivo por el cual, a mayor tiempo de espera menos páginas rastreadas y menor contenido indexado. Seguro que en más de una ocasión has querido acceder a una página y te has desesperado viendo que no termina de cargar, has desistido, la cierras y buscas otra.

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.

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.

Esto aumenta la carga en tu servidor y el tamaño total de tu sitio. Comprimir el tamaño y reducir fotos hasta su correcto tamaño, es una práctica que debemos realizar cada vez que subamos una fotografía a la web. Para imágenes planas o con transparencias, como dibujos vectoriales, logotipos o fotografías con zonas de colores planos amplias, la extensión png.

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.

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.

Esta opción es para editar nuestras fotos es de manera manual, mediante algunas aplicaciones accesibles para todo el mundo. Asimismo, si la imagen original es más pequeña que las dimensiones de las copias, no sé generará. La imagen que subamos se adaptará a las medidas que establezcamos, pero conservando sus proporciones originales en las copias de tamaño medio y grande. En estos dos ejemplos es fácil reconocer como WordPress usa las copias de distintos tamaños de la foto que hemos subido, y con esto nos facilita mucho el trabajo. Para conseguir manualmente este resultado, tendríamos que haber redimensionado nosotros mismos la fotografía en los distintos tamaños y posteriormente subirlas. Por ejemplo, no es lo mismo una imagen de cabecera en el propio post, como el ejemplo de arriba, que en un listado, o cuando aparece referenciado.

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.

En esta guía voy a hablarte de cuál es la mejor herramienta, la que utilizo yo, tanto por sus capacidades de compresión, tanto como su facilidad de uso y sus posibilidades de automatización, y además gratis. En nuestra Newsletter siempre hablamos sobre tecnología, SEO, desarrollo web, y novedades y tendencias en el mundo del diseño gráfico. Creemos que compartir el conocimiento es nuestro gran distintivo.

Comprimir una imagen no es otra cosa que reducir su peso, y como es lógico, lo ideal será lograr el menor peso manteniendo la máxima calidad posible. No tiene sentido subir una imagen a 1920px para colocarla en una columna al lado de un texto, que mide 500px de ancho, o en un post dentro de un blog cuyo ancho son 800px. Puedes seleccionar hasta 10 imágenes a la diseño web jaén vez o soltar una imagen en el cuadro Drag & Drop. Te permite seleccionar un nivel de compresión (%), y luego habilitarla. Puedes descargar las imágenes comprimidas o todas juntas en un ZIP. Si no optimizamos las imágenes el servidor tendrá que soportar mayor peso y en consecuencia tendremos menos espacio y velocidad afectando al rendimiento de nuestro sitio.

Plugins Para Optimizar Las Imágenes

Si no te quieres complicar, es la opción más sencilla si usas WordPress. Es un plugin que se instala en el gestor de contenidos, y actúa automáticamente cada vez que subes una imagen reduciendo su tamaño. Es conveniente comprobar cómo funciona tu página web, haz un test de velocidad a tu web. Yo te recomiendo usar la herramienta PageSpeed Insights de Google. Cuanto más tarda en cargar una página web, más posibilidades tienes de que el lector cierre tu web y se vaya en busca de otra. Reducir o comprimir el tamaño de las fotos es, a veces, una de las acciones a las que no damos mucha importancia a la hora del diseño de nuestra página web… pero que puede aportarnos muchos beneficios.

Puede parecer lógico pensar que a mayor calidad de imagen de las fotos de una web, mejor se verá ésta, pero no es tan sencillo. Antes de decantarnos por JPG o por PNG, debéis saber que es el primero de ellos es un formato de imagen con pérdida, es decir, para hacer que ocupe menos, reducimos la calidad de la imagen. Por el contrario, el formato PNG es un formato de imagen sin pérdida.

Pexels, es un excelente banco de imágenes, y que está en continuo crecimiento gracias a la aportación de múltiples y profesionales fotógrafos. Esto es posible, gracias a múltiples empresas colaboradoras y al aporte de grandes profesionales en el ámbito de la fotografía y que ceden sus creaciones para que sean difundidas. Una forma sencilla de comprobar los atributos de una imagen, es inspeccionado el código fuente de la misma. Es el título de la imagen que se muestra al usuario cuando pasa el ratón sobre ella.

A continuación, te dejamos varios programas perfectos para optimizar imágenes para web usando herramientas offline. Es una herramienta para comprimir el tamaño de las imágenes muy sencilla. Sólo tienes que subir las fotos que quieres comprimir, hasta un máximo de 20 a la vez. Y en unas miniaturas te muestra el porcentaje de reducción del tamaño del archivo que ha conseguido. Sólo tienes que subir la foto, indicarle el tamaño final de la imagen y el hace el resto.

Entre las muchas funcionalidades estupendas que trae ofrece también la compresión de imágenes sin perder calidad. Una vez tenemos esas medidas ya podemos utilizar la herramienta que más nos interese utilizar, como Photoshop, Gimp, Paint, Canva o alguna herramienta online gratuita como esta que te mostramos a continuación. Es un proceso completamente manual cuyas tareas de optimización realizamos de forma previa a la subida de las imágenes a nuestra web.

El que fuera por durante mucho tiempo rey de gráficos animados, con la aparición de formatos como el WEBM, el PNG animado y otros, ha quedado relegado en un segundo lugar en sitios web. Debido a su mala relación calidad/peso ha quedado casi en desuso como imagen fija, no así como sustituto para breves clips de vídeo sin audio. De hecho tengo un post donde hablo de las imágenes y como mejorarlas en mi web. No quiero hacer SPAM pero si crees que puede ayudar a tu audiencia puedo pasarte el enlace por si le quieres echar un vistazo. Tienes la posibilidad de utilizarloonline o descargarte el programa.

Ese proceso de escalado, hace que aumente el tiempo de carga de la web. Una vez que has instalado y activado el pluginEWWW Image Optimizerlas nuevas imágenes que vayas añadiendo a tu WordPress se optimizarán de forma automática. Otro plugin para optimizar imágenes muy utilizado y gratuito esEWWW Image Optimizerque te ayudará a comprimir las imágenes que tengas en tu galeríaasí como las nuevas que vayas subiendo a tu web. Si no dispones de un editor de imágenes, puedes utilizar cualquiera de los que hay online de forma gratuita. Te contamos como hacerlo con Photoshop, Pixlr Express (aplicación online de la que ya te hablamos en un artículo anterior) y Riot. Además de reducir el tamaño de las imágenes en el ordenador, también es conveniente instalar algún plugin que las comprima al subirlas a la web.

El Famoso «peso» O Calidad

En las páginas web (y sobre todo en los blogs, porque en e-commerces puede tener cierto sentido) no es necesario que las imágenes sean tan grandes. No merece la pena llegar a ese nivel, lo importante es que seas consciente de la importancia que tiene optimizar tus imágenes para ganar velocidad, y comiences a hacerlo para cumplir unos mínimos. Si te vas a páginas como GTmetrix, Google Pagespeed, o Pingdom, verás que gran parte del tiempo de carga y de las sugerencias de mejora que se proponen, están relacionadas con el peso de tus imágenes. 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. Otra de las opciones a la hora de incorporar imágenes son los formatos vectoriales como el SVG. Al no basarse en un mapa de bits, su peso es ínfimo y re-escalable sin perdida alguna.

Como hemos visto en el apartado anterior podemos redimensionar la imagen al tamaño que nedesitemos y guardarla para web lo que optimizará al máximo la resolución para que se vea bien pero no se pierda calidad. Para ajustar las imágenes a un ancho determinado debemos conocer el tamaño del espacio donde queremos insertarla. Lo normal es que si usas WordPress según el módulo que quieras incluir se te recomienden dimensiones adecuadas. Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

¿qué Métodos Podemos Utilizar Para Optimizar Las Imágenes?

Para comprimir sólo jpg podemos utilizar compressjpeg.com, sólo para png compresspng.com y para ambas optimizilla.com. Podemos comprimir en lote hasta un máximo de 20 imágenes en .jpg o jpeg y no podemos elegir el porcentaje de compresión. La herramienta estudia cada imagen por separado y las comprime todo lo que se puede. Redimensionar cada imagen al tamaño real que se vaya a usar en la página web.

• Para casi todo el procedimiento es muy sencillo y prácticamente consiste en subir una imagen y luego bajarla, algo que no te tomará ni 3 minutos.
• Ahora, digamos que tenemos una imagen, y la vamos a guardar de la manera tradicional .
• De hecho, en el caso de que las imágenes a utilizar para la web no sean optimizadas, es posible que nos encontremos con problemas en el WPO.
• Herramienta online para reducir drásticamente el tamaño de las imágenes y fotos mientras mantiene una alta calidad.

Me he formado en el tratamiento de datos, desde su extracción, al análisis y visualización, y disfruto mucho con el desarrollo web. Uno puntos fuertes de este plugin es su buscador de fotos de tamaño incorrecto, con el que te avisará de cualquier sospecha de error. La gran diferencia entre Image Resizer con otras herramientas de edición online, es que nos muestra en una tabla las medidas, en píxeles, de antes y después de la edición.

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. Esto nos ayudará a mejorar la velocidad de carga de nuestro sitio web. Todo el contenido que se muestra en una página web, o que forma parte de su estructura, tiene que almacenarse en un sitio, que tiene un espacio determinado. Cuando hacemos clic para navegar en un sitio web, la página tiene que cargar todo su contenido.

Aparte de PNG y JPEG, encontrarás docenas de otros tipos de imágenes. Por lo general, no alcanzarás los límites de almacenamiento de tu hosting web actual. Y por si no lo sabías, el tiempo de carga es uno de los diseño web jaén tantos factores que tiene en cuenta Google al posicionar tu web. La utilización de esta web está sujeta a las condiciones de uso indicadas. Al utilizar esta web, aceptas cumplir con nuestra Política corporativa.

Todos estos “trucos” para las imágenes que vamos a ir viendo, al final, forma parte de la realización de un buen trabajo SEO, que todo sitio web debería considerar. Muy buen artículo amigo, importante optimizar siempre las imágenes para mejorar nuestro SEO y así mejorar la visibilidad en Google. Soporta cuatro tipos de formato, JPEG, PNG, GIF y SVG y una vez comprimida la imagen te permite descargarla al ordenador o guardarla en Dropbox o Drive. Sin embargo, echo de menos poder subir varias imágenes a la vez como en TinyPNG. La otra causa de los altos tiempos de carga en una web, es el peso de las imágenes. Este punto es tan importante, que cuando realizas un análisis de una web con el Pagespeed de Google, es una de los elementos que tiene en cuenta.

Formato PNG. Se utiliza sobre todo para las imágenes que están hechas con formas geométricas y tienen colores planos. La gran ventaja de este formato es que conserva las transparencias y que no pierde mucha calidad en la compresión de la imagen, por eso se utiliza para logotipos. El Plugin Optimizador.io es gratuito y ha sido desarrollado por Webempresa para optimizar tus imágenes sin ralentizar tu web, reduciéndolas al máximo sin perder calidad. Si lo piensas estamos optimizando nuestras imágenes para reducir el tiempo de carga de las páginas, y el peso de nuestra web. Así que no tiene sentido aumentarlo por otro lado sobrecargando la web de plugins.

A continuación te explico paso a paso como hago yo para optimizar el peso de las imágenes de mi página y mejorar así la velocidad de carga. Ahora que ya sabes cómo optimizar las imágenes WordPress es hora de empezar a sacarle todo el jugo a esto para obtener el máximo potencial de tu web. Además, como un punto fuerte, también nos permite optimizar varias imágenes a la vez, haciendo el proceso mucho más sencillo y rápido.

Antes, y como complemento, de la optimización de las imágenes, es imprescindible que revisemos los ajustes de WordPress. Está ubicada en España y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad). Además, debemos acordarnos de las copias que hace WordPress de nuestras imágenes.

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.

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.

Compresión De Imágenes Con Herramientas De Tu Servidor Para WordPress

En esa optimización de los tiempos de carga de una web los elementos que más peso suelen tener e influencia en los tiempos de carga suelen ser las imágenes. Esta imagen y la siguiente tienen aproximadamente 8kb de tamaño, y como vemos cumple con el requisito perfecto para que ocupe poco en formato PNG , y por el contrario se necesita comprimir muchísimo para reducir su tamaño en JPG. Este formato es el ideal para mostrar fotografías o texturas, ya que es el que permite comprimir mejor este tipo de imágenes. Las imágenes de nuestra web o blog, como primera premisa, deben de estar siempre en el tamaño que se van a usar y no tener imágenes enormes que después se verán pequeñas, sino queremos aumentar el peso de la web. Una vez visto el ejemplo y cómo se pueden optimizar las imágenes que se quieren mostrar en la web, es el momento de ver cuáles son los principales beneficios que se obtienen después de haber realizado todo este proceso.

• Cuando queremos implementar una imagen en web hemos de plantearnos la función de esta misma.
• Resumiendo, optimizar las imágenes en WordPress o en cualquier otro CMS, es importante si queremos empezar a mejorar su Web Performance Optimization .
• Optimizar el peso de las imágenes para tu web es clave para mejorar el posicionamiento de tu página.
• Mi cámara de fotos, por ejemplo, saca imágenes con una resolución enorme, 5000 px de ancho, haciendo que algunas pesen hasta 50 Mb.

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 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 Qué Consiste La Optimización De Imágenes Web?

Esto lo podemos conseguir con cualquier programa de edición de fotografía o herramientas online creadas para ello. Optimiza las imágenes, carga, redimensiona, comprime y mejora la velocidad de tu página. Smush es un plugin de WordPress que comprime todas las imágenes sin una caída visible de la calidad. Te permite optimizar 50 imágenes en un sólo clic y además redimensionarlas. Del diseño web mismo modo te permite localizar rápidamente las imágenes que están ralentizando tu sitio web. [newline]Una de sus características más especiales es su integración con los bloques de Gutenberg . Nos permite optimizar imágenes en .jpg, .png y .gif permitiéndonos elegir la configuración de la compresión y realizar algunos ajustes en nuestra imagen antes de proceder a optimizarla.

En este caso hemos elegido 800px de ancho, pero puedes personalizar según lo que necesites. A lo largo de este post veremos la forma que consideramos más eficaz para conseguir la carga diferida en tu sitio web. La carga diferida es una técnica que sirve para que, según estemos navegando por un sitio web, las imágenes que contiene se vayan cargando según vayan siendo visibles, y no de golpe cuando nos metemos en la página. Estoy usando Compress JPG complementándolo con Resize, las dos online, puesto que no estoy en WordPress. Pero tengo un trabajito por delante para hacerlo en todas las fotos del blog . De todos modos, tengo la intención de contratar un hosting y un dominio propio y migrar a WordPress, aunque está pendiente para un par de meses por cuestiones entremedias.

Es “la mala” ya que pierde un poco de información por el camino , pero a cambio la compresión es mucho mayor. Eso si, no pienses que vas a pasar de una foto que se ve perfectamente nítida a una imagen totalmente pixelada. Las compresiones lossy son muy respetuosas, y en muchas ocasiones no vas a notar la pérdida de calidad respecto a la foto original. En mi experiencia te diré que normalmente las imágenes tipo fotografía (hechas con una cámara, con tu smartphone…) pesan menos como jpeg, mientras que las capturas de pantalla, diagramas, etc. , pesan mucho menos si son archivos png.

El objetivo de este plugin no es el optimizar la imagen en sí, sino aumentar la velocidad de carga de tu página web mediante la carga diferida. Para elegir el tamaño adecuado, debes pensar en el diseño de tu blog o página web, y adaptar las medidas de las imágenes a ello. Como has podido comprobar el tiempo de carga de una web es uno de los elementos que Google tiene en cuenta a la hora de posicionar una web.

Puede obtener más información, o bien conocer cómo cambiar la configuración, pulsando en Más información. La mayoría de las herramientas que están en la lista ofrecen optimización de varias imágenes a la vez. La idea de este post era dar a conocer un buen número de herramientas. Y si necesitas más información, una comparativa entre varias de estas herramientas, o que comente alguna de ellas en mayor profundidad, sólo tienes que dejarme un comentario aquí abajo.

Te permite no solo escalar una imagen, sino que con él, las podrás modificar a tu antojo. Cuando trabajo desde casa, no tengo ningún impedimento en usar Photoshop porque el ordenador de torre puede con todo. La mejor solución es usar Photoshop o Gimp, pero si no estás familiarizado con estos programas, te voy a recomendar 4 herramientas online muy fáciles de usar. En esta imagen podemos ver cómo se deteriora tanto en modo de baja calidad, que comienzan a aparecer artefactos en las altas luces. Eso puede ser molesto para la audiencia que busca un fotógrafo de calidad. Sin embargo, en compresión media la textura no se ve mal, ni se ven artefactos aparentes, a pesar de que sí se nota una caída de nitidez muy grande.

Utiliza una compresión inteligente que disminuye el número de colores utilizados y promete una reducción de hasta el 70% de la imagen, pero sin perder calidad. No es necesario utilizar este formato o “truco” si vamos a usar la imagen para uso personal o si vamos a almacenarla en el ordenador. Puede que así ahorres espacio, pero no es aconsejable que lo hagas cuando vas a retocar tus fotos porque perderás la calidad original. Está exclusivamente pensado para transferir archivos por correo electrónico si no te importa perder algo de calidad. O para subirlo a una web, un blog o un programa de diseño que requiera un peso manejable. Tu objetivo con la optimización de imágenes para WordPress es reducir el tamaño del archivo sin sacrificar la calidad de la imagen.

Para optimizar el tamaño de las imágenes lo primero es conocer las dimensiones que deben tener para adaptarlas exactamente a ese formato. Como norma general, cuanto más grande es una imagen, más tamaño tendrá el archivo. Debemos reducir los tiempos de carga de la web al mínimo para mejorar la experiencia de usuario y por ende, el SEO.

Optimizar las imágenes de tu web es una tarea que ya deberías estar haciendo si quieres que tu blog sea rápido, ligero y que ofrezca una buena experiencia de usuario para tus lectores. La mejor opción, siempre que sea posible, es la de tratar nosotros mismos las imágenes y especificar el tamaño, la resolución y el nivel de compresión. Para ello los editores principales como Adobe Phosothop o Gimp entre imagen en la web otros, poseen opciones para exportarlas a nuestro gusto. A la hora de preparar imágenes para web debemos prestar especial atención a la resolución. Para web considera más que suficiente una resolución de 72ppp, pero la aparición de pantallas de mayor calidad, capaces de soportar densidades de puntos mayores. Dicho esto, no te asustes, usar imágenes en tu sitio web es algo clave dadas las estadísticas.

Google tiene en cuenta todos estos datos y en consecuencia, si son negativos, nos restará posiciones en las SERP,s en beneficio de nuestra competencia y haciéndonos perder mucho dinero por algo que es bastante fácil de solucionar. En cuanto a lo que es la optimización de la imagen antes de subirla a WordPress, sí. Ahora ya sabes lo que hay que hacer, pero nos falta el cómo o con qué. Ahora que seguro que estás concienciado de la importancia de comprimir y ajustar las imágenes, toca ver cómo hacerlo.