{"id":226964,"date":"2022-09-14T11:16:00","date_gmt":"2022-09-14T08:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226964"},"modified":"2022-11-08T12:53:04","modified_gmt":"2022-11-08T09:53:04","slug":"como-servir-imagenes-escaladas-en-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/como-servir-imagenes-escaladas-en-wordpress\/","title":{"rendered":"C\u00f3mo servir im\u00e1genes escaladas en WordPress"},"content":{"rendered":"\n

Es obvio que las fotos son una parte integral de nuestras vidas. En consecuencia, dif\u00edcilmente podemos imaginar un sitio web sin im\u00e1genes. Las im\u00e1genes atraen<\/strong> la vista de los visitantes y ayudan a organizar el contenido del sitio. Las im\u00e1genes hacen que una p\u00e1gina sea interesante, rica en informaci\u00f3n y mejoran la experiencia del usuario.<\/p>\n

Las im\u00e1genes de gran tama\u00f1o tienen un efecto negativo en el rendimiento de un sitio web<\/strong> y las im\u00e1genes deben escalarse de acuerdo con el tema activo. Son elementos importantes en un sitio web y merecen ser mostrados de la mejor manera posible. Es muy importante servir im\u00e1genes a escala en un sitio de WordPress.<\/p>\n

Los tama\u00f1os de las im\u00e1genes escaladas se ajustan al tama\u00f1o adecuado seg\u00fan los definidos en HTML y CSS. Sin embargo, no muchos webmasters prestan atenci\u00f3n a este importante detalle de dise\u00f1o. Tome el ejemplo de una imagen con 500 x 500 p\u00edxeles para una miniatura de 50 x 50. El navegador web tiene que descargar la imagen y reducirla para que pueda mostrarse al visitante. Claramente, esto es ineficiente y ralentizar\u00e1<\/strong> el sitio web.<\/p>\n

La diferencia de resoluci\u00f3n no es visible y, por lo tanto, el peso que traen consigo las im\u00e1genes grandes suele pasar desapercibido. La mayor\u00eda de las personas ni siquiera son conscientes de que esta resoluci\u00f3n excesiva est\u00e1 causando problemas y el problema no se soluciona. Dejan el problema para que lo maneje el navegador.<\/p>\n

Por qu\u00e9 servir im\u00e1genes escaladas en un sitio de WordPress<\/h2>\n

\"C\u00f3mo<\/a><\/p>\n

La principal raz\u00f3n para publicar im\u00e1genes a escala es que las im\u00e1genes de alta resoluci\u00f3n ralentizan<\/strong> un sitio web y aumentan los tiempos de carga<\/strong>. Una p\u00e1gina lenta conduce a una mala experiencia de usuario<\/strong> y en lugar de quedarse y regresar, se ir\u00e1n y se mantendr\u00e1n alejados. Las estad\u00edsticas de Kissmetrics muestran que las p\u00e1ginas que tardan m\u00e1s de tres segundos en cargarse tendr\u00e1n una tasa de rebote m\u00e1s alta<\/strong>.<\/p>\n

Con los tama\u00f1os de imagen optimizados en un sitio web, los tiempos de carga ser\u00e1n m\u00e1s cortos<\/strong>. Es m\u00e1s probable que las personas permanezcan m\u00e1s tiempo<\/strong> en el sitio web y regresen<\/strong> m\u00e1s tarde. Esto mejora el SEO<\/strong> y el ranking del sitio web subir\u00e1<\/strong>.<\/p>\n

Las im\u00e1genes grandes causan diferentes problemas<\/h3>\n
    \n
  1. Aumenta el estr\u00e9s en el rendimiento del navegador<\/strong>. El navegador tendr\u00e1 que realizar solicitudes de servidor adicionales. No puede mostrar la imagen r\u00e1pidamente, sino que tomar\u00e1 tiempo y recursos para cambiar el tama\u00f1o de la imagen. Los sitios web con im\u00e1genes pesadas tardan m\u00e1s en cargarse.<\/li>\n
  2. Si las im\u00e1genes grandes de alta resoluci\u00f3n se muestran peque\u00f1as en un sitio web, se pierde tiempo y se descargan datos<\/strong>. Este es el caso, por ejemplo, cuando una selfie de un tel\u00e9fono m\u00f3vil se usa sin procesar para un peque\u00f1o Gravatar.<\/li>\n<\/ol>\n

    C\u00f3mo escalar im\u00e1genes en sitios web de WordPress<\/h2>\n

    A mano<\/h3>\n

    \"C\u00f3mo<\/a><\/p>\n

    Para comenzar desde el principio, analice las im\u00e1genes<\/strong> en el sitio web utilizando una herramienta como GTMetrix. GTMetrix es una herramienta de an\u00e1lisis de rendimiento, dise\u00f1ada por GT.net. Esta empresa es famosa por el control y la optimizaci\u00f3n de la velocidad y por Pingdom. Despu\u00e9s de que GTMetrics analiza el sitio web, genera un informe. Esto muestra qu\u00e9 problemas<\/strong> se encontraron y qu\u00e9 mejoras<\/strong> recomienda.<\/p>\n

    Al revisar el informe, preste especial atenci\u00f3n a la pesta\u00f1a Estructura<\/strong>. En esta pesta\u00f1a, haga clic en Im\u00e1genes del tama\u00f1o adecuado. Mostrar\u00e1 una lista de im\u00e1genes que no tienen el tama\u00f1o correcto.<\/p>\n

    WordPress no reduce autom\u00e1ticamente las im\u00e1genes cuando es posible, sino que las agrega al sitio sin procesarlas. Para solucionar este problema hay dos opciones.<\/p>\n

    Incluso si el uso de complementos no es la forma deseada, existen otras opciones. La primera forma de escalar im\u00e1genes es ajustar manualmente el tama\u00f1o de cada una mediante un editor de fotos, como Photoshop<\/strong>. Puede parecer que este m\u00e9todo es ineficaz pero en realidad no lo es.<\/p>\n

    \"C\u00f3mo<\/a><\/p>\n

    En Photoshop hay m\u00e1s opciones adem\u00e1s de ajustar la altura y el ancho<\/strong> de la imagen. Otra cosa a comprobar aqu\u00ed es la resoluci\u00f3n<\/strong> de la imagen. La mayor\u00eda de las veces, para aplicaciones web, 72 PPI es suficiente para una buena experiencia de visualizaci\u00f3n.<\/p>\n

    La segunda es usar un complemento<\/strong> para escalar im\u00e1genes. Esta opci\u00f3n es f\u00e1cil y r\u00e1pida. WordPress tiene su propia caracter\u00edstica para hacer esto, srcset<\/strong>. Esta herramienta puede convertir gr\u00e1ficos, como im\u00e1genes, en archivos receptivos<\/strong>. Las im\u00e1genes receptivas se ajustan autom\u00e1ticamente a diferentes dispositivos y tama\u00f1os de pantalla. A continuaci\u00f3n se muestran algunos otros complementos que hacen un gran trabajo al reducir el tama\u00f1o de las im\u00e1genes.<\/p>\n

    Optimol<\/h3>\n

    \"C\u00f3mo<\/a><\/p>\n

    Una excelente herramienta para servir im\u00e1genes a escala es Optimole<\/strong>. Es un complemento de WordPress que puede cambiar el tama\u00f1o de las im\u00e1genes para diferentes dispositivos. Cambia autom\u00e1ticamente el tama\u00f1o al tama\u00f1o \u00f3ptimo para una imagen, seg\u00fan los diferentes tipos de dispositivos. Los resultados son im\u00e1genes escaladas de alta calidad<\/strong>.<\/p>\n

    Estas son algunas de las caracter\u00edsticas que hacen de Optimole una opci\u00f3n interesante:<\/p>\n