Los visitantes del sitio web no pueden convertir si abandonan su sitio web r\u00e1pidamente. Su clasificaci\u00f3n tambi\u00e9n caer\u00e1 en las p\u00e1ginas de resultados de los motores de b\u00fasqueda (SERPS) debido a las altas tasas de rebote. <\/p>\n\n
Estas son las buenas noticias: <\/p>\n\n
Puede aprender la mejor manera de optimizar las im\u00e1genes para p\u00e1ginas de carga r\u00e1pida.<\/p>\n\n
Este tutorial discutir\u00e1 la optimizaci\u00f3n de im\u00e1genes, las pautas de tama\u00f1o de imagen del sitio web y las formas pr\u00e1cticas de optimizar im\u00e1genes para sitios web.<\/p>\n\n
Esto es lo que cubriremos:<\/strong><\/p>\n\n Cuando se trata de determinar el mejor tama\u00f1o de imagen para sitios web, los tama\u00f1os de archivo de imagen ideales para su sitio web deben ser inferiores a 500 KB, con un l\u00edmite de 20 MB para im\u00e1genes individuales.<\/p>\n\n Las dimensiones del ancho de la imagen original deben estar entre 1500 y 2500 p\u00edxeles para computadoras de escritorio y 640 por 320 p\u00edxeles para dispositivos m\u00f3viles.<\/p>\n Para optimizar las im\u00e1genes de su sitio web, debe reducir el tama\u00f1o del archivo de imagen para que el contenido se cargue y se muestre r\u00e1pidamente en la pantalla del usuario.<\/p>\n\n Puede utilizar varios m\u00e9todos para optimizar im\u00e1genes, como comprimir archivos grandes, cambiar el tama\u00f1o de la imagen o cambiar el formato.<\/p>\n\n Tambi\u00e9n puede optar por utilizar una herramienta de optimizaci\u00f3n de imagen para reducir autom\u00e1ticamente la imagen hasta en un 80% sin una p\u00e9rdida notable en la calidad de la imagen.<\/p>\n\n Fuente de la imagen<\/a><\/p>\n\n Si un sitio web tarda demasiado en cargarse, los visitantes se ir\u00e1n. A esto lo llamamos \u00abrebote\u00bb. La tasa de rebote de una p\u00e1gina web aumenta con cada segundo adicional que tarda su p\u00e1gina en cargarse. <\/p>\n\n La optimizaci\u00f3n de las im\u00e1genes de su sitio web ser\u00e1 m\u00e1s f\u00e1cil y r\u00e1pida de cargar p\u00e1ginas.<\/p>\n\n Dado que las im\u00e1genes suelen estar entre los activos m\u00e1s pesados que se transfieren en una sesi\u00f3n de navegaci\u00f3n, pueden ralentizar la velocidad de carga de la p\u00e1gina.<\/p>\n\n Utilice las im\u00e1genes con moderaci\u00f3n y aseg\u00farese de que est\u00e9n optimizadas para la web antes de subirlas. Esto mejorar\u00e1 la velocidad de su sitio web, reducir\u00e1 las tasas de rebote y aumentar\u00e1 las conversiones<\/a>. <\/p>\n\n No podemos exagerar la importancia de las im\u00e1genes<\/a> en su sitio web de comercio electr\u00f3nico. Adem\u00e1s de mejorar la velocidad del sitio, aqu\u00ed hay otras razones para aprender a optimizar el tama\u00f1o de la imagen para los sitios web: <\/p>\n\n El objetivo final de la optimizaci\u00f3n de im\u00e1genes es reducir el tama\u00f1o de una imagen manteniendo su calidad. Pero las im\u00e1genes pueden hacer o deshacer un sitio web. Demasiadas im\u00e1genes o im\u00e1genes grandes pueden ralentizar tu sitio web y afectar al rendimiento. <\/p>\n\n Esto es lo que tienes que hacer para aprender a optimizar im\u00e1genes para la web sin perder calidad:<\/p>\n\n Captura de pantalla<\/em><\/strong><\/p>\n\n La forma ideal de optimizar las im\u00e1genes para tu sitio de WordPress es hacerlo antes de subirlas. Los plugins de compresi\u00f3n de im\u00e1genes de WordPress son una gran soluci\u00f3n automatizada para optimizar las im\u00e1genes de tu sitio web. <\/p>\n\n Algunos de los mejores plugins de compresi\u00f3n de im\u00e1genes de WordPress son:<\/p>\n\n Aseg\u00farate siempre de que el plugin que elijas est\u00e9 actualizado para que funcione con la \u00faltima versi\u00f3n de WordPress.<\/p>\n\n Relacionado: \u00a1Echa un vistazo a los mejores plugins de WordPress<\/a><\/strong>!<\/p>\n\n Una cach\u00e9 es un banco de almacenamiento de datos temporales. Por ejemplo, el almacenamiento en cach\u00e9 de im\u00e1genes es cuando los archivos de imagen se descargan en el almacenamiento local para cargarse m\u00e1s r\u00e1pido cuando un usuario vuelve a visitar un sitio web. <\/p>\n\n El almacenamiento en cach\u00e9 facilita la visualizaci\u00f3n de im\u00e1genes, ya que los usuarios no tienen que volver a descargarlas cada vez que visitan un sitio web, por lo que obtienen la informaci\u00f3n que necesitan m\u00e1s r\u00e1pido.<\/p>\n\n El almacenamiento en cach\u00e9 de im\u00e1genes es una excelente manera de resolver problemas que vienen con im\u00e1genes no optimizadas, como p\u00e1ginas de carga lenta.<\/p>\n\n Puede mejorar el rendimiento de su sitio web<\/a> almacenando copias locales de los archivos de su sitio web que haya utilizado con frecuencia o recientemente.<\/p>\n\n ALT o texto alternativo reemplaza una imagen si la imagen no se muestra o si un visitante usa un lector de pantalla. Si bien los usuarios entender\u00e1n una imagen si pueden verla, los motores de b\u00fasqueda no lo har\u00e1n. <\/p>\n\n Es por eso que necesita texto ALT para permitir que los motores de b\u00fasqueda indexen de qu\u00e9 se trata la imagen. Por lo tanto, incluso si las im\u00e1genes de su sitio web no se muestran, su p\u00e1gina seguir\u00e1 clasificada, ya que los rastreadores web pueden leer el texto ALT. <\/p>\n\n Esto hace que el texto ALT sea importante para la optimizaci\u00f3n de motores de b\u00fasqueda (SEO). Por lo tanto, debe proporcionar suficientes detalles con palabras clave relevantes en el texto ALT de sus im\u00e1genes para aumentar la visibilidad. <\/p>\n\n El uso de texto ALT tambi\u00e9n es una excelente manera de que las im\u00e1genes de productos de comercio electr\u00f3nico aparezcan en los motores de b\u00fasqueda.<\/p>\n\n Captura de pantalla<\/em><\/p>\n\n La alta resoluci\u00f3n y las grandes dimensiones de la imagen (es decir, su altura y anchura) son excelentes para la producci\u00f3n de impresi\u00f3n, pero no son adecuadas para los sitios web. Debe reducir el tama\u00f1o del archivo para que las im\u00e1genes se carguen correctamente en su sitio web mientras mantiene una alta calidad. <\/p>\n\n Puede cambiar el tama\u00f1o de las dimensiones del archivo de imagen utilizando un software de edici\u00f3n como Adobe Photoshop para reducir el tama\u00f1o total del archivo de sus im\u00e1genes.<\/p>\n\n Alojar sus im\u00e1genes en una red de entrega de contenido (CDN) les permitir\u00e1 cargarse m\u00e1s r\u00e1pido en las p\u00e1ginas web.<\/p>\n\n Una CDN almacena el contenido almacenado en cach\u00e9 del sitio web en diferentes ubicaciones geogr\u00e1ficas para ayudar a minimizar los retrasos en la carga del contenido web. Lo hace reduciendo la distancia entre el visitante y el servidor. <\/p>\n\n Por ejemplo, si su servidor est\u00e1 en Nueva York y un usuario en Suecia visita su sitio web, la CDN les atiende utilizando el servidor m\u00e1s cercano a ellos, no el de Nueva York.<\/p>\n\n Debe elegir el formato de archivo correcto para sus im\u00e1genes porque afecta su optimizaci\u00f3n y el tama\u00f1o total de la imagen. Los formatos de archivo m\u00e1s populares para im\u00e1genes en la web incluyen: <\/p>\n\n La compresi\u00f3n con p\u00e9rdida significa que la calidad de la imagen disminuye con el tama\u00f1o del archivo y puede eliminar cualquier dato innecesario de la imagen. El uso de una imagen JPEG da como resultado tama\u00f1os de archivo m\u00e1s peque\u00f1os y ofrece el mejor tama\u00f1o de imagen para im\u00e1genes de productos y banners principales de la p\u00e1gina de inicio. <\/p>\n\n Por lo general, las im\u00e1genes PNG mantienen su calidad despu\u00e9s de la compresi\u00f3n. Por lo tanto, es la mejor opci\u00f3n cuando tu imagen necesita un fondo transparente, como logotipos, ilustraciones o iconos. <\/p>\n\n Captura de pantalla<\/em><\/p>\n\n La carga diferida significa retrasar la carga de im\u00e1genes en su sitio web hasta que se acerque a la imagen. La imagen en la parte inferior de la p\u00e1gina se carga justo antes de que llegue a ella en lugar de cargarse con toda la p\u00e1gina. Dado que solo se cargan unas pocas im\u00e1genes, ahorra en ancho de banda y su sitio web funciona mejor. <\/p>\n\n Te recomendamos que a\u00f1adas el plugin Lazy Load by WP Rocket<\/a> a tu sitio web si utilizas WordPress.<\/p>\n\n A la hora de comprimir tus im\u00e1genes, debes conseguir un equilibrio perfecto entre calidad y tama\u00f1o. Evita comprimir demasiado tus im\u00e1genes. Por el contrario, la compresi\u00f3n dar\u00e1 como resultado tama\u00f1os de imagen m\u00e1s peque\u00f1os y de menor calidad. <\/p>\n\n La compresi\u00f3n m\u00ednima, por otro lado, da como resultado archivos m\u00e1s grandes pero de mayor calidad.<\/p>\n\n Hay varias formas de comprimir tus im\u00e1genes:<\/p>\n\n Aqu\u00ed est\u00e1n los tres complementos de WordPress m\u00e1s importantes para optimizar las im\u00e1genes en su sitio web. <\/p>\n\n Imagify<\/a> (4.8 de 5 estrellas) reduce dr\u00e1sticamente los archivos de imagen sin perder calidad, lo que hace que su sitio se cargue m\u00e1s r\u00e1pido. Adem\u00e1s, el plugin te da 25 MB gratis cada mes (unas 250 im\u00e1genes). <\/p>\n\n Los planes pagos comienzan en $ 5 y pueden llegar hasta $ 70 por mes, seg\u00fan sus necesidades. \u00abImagify a\u00f1ade una pantalla a tu panel de control en la que puedes establecer el nivel de compresi\u00f3n para la optimizaci\u00f3n masiva\u00bb, explica Cavanagh. \u00abEl nivel ultra reducir\u00e1 el tama\u00f1o del archivo, pero mantendr\u00e1 la misma calidad de imagen\u00bb. <\/p>\n\n ImageRecycle<\/a> (4.5 de 5 estrellas) ofrece optimizaci\u00f3n de PDF y compresi\u00f3n de JPG, GIF y PNG. Este plugin te da 100 MB de datos como parte de una prueba de 15 d\u00edas. La buena noticia: 100 MB deber\u00edan ser suficientes para optimizar todas las im\u00e1genes en un sitio promedio. <\/p>\n\n Si bien ImageRecycle cuesta dinero (entre $ 10 y $ 50 dependiendo de la cantidad de fotos que cargue durante el a\u00f1o), respalda el gasto con funciones adicionales, como la funcionalidad del tablero y las actualizaciones por correo electr\u00f3nico. <\/p>\n\n \u00abOtra cosa buena de ImageRecycle es que se ejecuta en segundo plano, por lo que no afecta a nada m\u00e1s que puedas estar haciendo en el sitio\u00bb, dice Cavanagh. Estima que optimizar un sitio m\u00e1s grande llevar\u00eda de 30 a 45 minutos. <\/p>\n\n EWWW Image Optimizer<\/a> (4.5 de 5 estrellas) optimiza autom\u00e1ticamente tus im\u00e1genes a medida que las subes a tu sitio. Si bien este complemento carece de las funciones mejoradas de Imagify e ImageRecycle, esta opci\u00f3n gratuita es un buen optimizador de nivel de entrada para propietarios de peque\u00f1as empresas. <\/p>\n\n \u00abEn general, es una opci\u00f3n muy s\u00f3lida que produce buenos resultados sin costo alguno\u00bb, agrega Cavanagh.<\/p>\n\n Ahora ha aprendido a optimizar las im\u00e1genes de su sitio web para mejorar la velocidad de la p\u00e1gina. Sin embargo, si no est\u00e1 utilizando im\u00e1genes optimizadas o siguiendo las pautas de tama\u00f1o de imagen del sitio web, debe comenzar a hacerlo. <\/p>\n\n Dado que muchos clientes utilizan dispositivos m\u00f3viles para acceder a su sitio web, debe asegurarse de que los tama\u00f1os y formatos de archivo sean \u00f3ptimos.<\/p>\n\n Si has implementado estas estrategias y a\u00fan no est\u00e1s impresionado con el tiempo de carga de tu sitio web, podr\u00eda ser el momento de pasar al alojamiento de WordPress.<\/p>\n\n\n
El mejor tama\u00f1o de imagen para sitios web<\/strong><\/h2>\n\n
Optimizaci\u00f3n de im\u00e1genes 101<\/strong><\/h2>\n\n
Optimizaci\u00f3n de im\u00e1genes y velocidad del sitio web<\/strong><\/h2>\n\n
![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/J8cJjHcJsjohyUxQz5hRFKmHmScmAEpBF5Wz2G-fjq0BeoOhugOtNB9x3xyGsBWwxAEvbxIUCYUHnluz37-YunsirB7K6MOSo8JeukSyPQIUUily5nRCqo5N2QZkkIBJ1q8BSaxJtCJYbqYY7E4DJiw\")
Por qu\u00e9 necesitas optimizar las im\u00e1genes de tu sitio web<\/strong><\/h2>\n\n
\n
C\u00f3mo optimizar im\u00e1genes para sitios web<\/strong><\/h2>\n\n
Usar plugins de WordPress<\/strong><\/h2>\n\n
![\"\"\/](\"https:\/\/lh5.googleusercontent.com\/2NV_WWzHzOr77k8LoEEwbl2uxJ41IiUCNGMiBWvYXlQ6cQextKwkNRfKAVj15hVR0Gf8uQBIPoaqr3f3r2L86neojX4vfsvAzJ6ysorCMynlXxfpR0qbFYlk0A0dpbK6zukdybA2f79HJ4cZn9jXA0Q\")
\n
Usar el almacenamiento en cach\u00e9 de im\u00e1genes<\/strong><\/h2>\n\n
Optimizaci\u00f3n de etiquetas de imagen ALT<\/strong><\/h2>\n\n
Cambiar el tama\u00f1o de las im\u00e1genes antes de subirlas<\/strong><\/h2>\n\n
![\"\"\/](\"https:\/\/lh4.googleusercontent.com\/522TgBIQThAfLz_Wzc4H73l9-PAKZxtBYy2hF0gsWmnN3xlacGmBd-QKKYeeUWQpDyLMMbnU7wqlXfpuYgtoPkfp43bF8Qdso2zC0uLRBLGUtp34qZCCDgD1l0_488nS73UUvoEg8Uri3vOPp3OhWIc\")
Alojar im\u00e1genes en una CDN (red de entrega de contenido<\/strong>)<\/h2>\n\n
Elija el tipo de archivo correcto<\/strong><\/h2>\n\n
\n
\n
\n
Usar un plugin de carga diferida<\/strong><\/h2>\n\n
![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/32hW6_tYKgIANS0jVbAqqOfnA_Qqo4XfcZHficurIqPuMcUFcVR61VoYjQ_5I-ONNnzE1KfSlClIcgSbs96qrf68EbEzCNmCqyNYTB7xj1IxCPrJGA8f9ON7ZN4fiY5O4q8-mfNuMUyCVRozAirkeYU\")
Comprimir im\u00e1genes<\/strong><\/h2>\n\n
\n
Los 3 mejores plugins de WordPress para optimizar las im\u00e1genes de tu sitio web<\/strong><\/h2>\n\n
Imagificar<\/strong><\/h2>\n\n
Reciclaje de im\u00e1genes<\/strong><\/h2>\n\n
Optimizador de im\u00e1genes EWWW<\/strong><\/h2>\n\n
Menciones<\/strong><\/h2>\n\n
\n
Reflexiones finales: C\u00f3mo optimizar im\u00e1genes para sitios web C\u00f3mo optimizar im\u00e1genes para sitios web: la gu\u00eda definitiva<\/strong><\/h2>\n\n