¿De verdad conoces los beneficios de optimizar imágenes para tu sitio web? Es una práctica que se pasa por alto fácilmente, pero en realidad, es una de las cosas más beneficiosas que puede hacer por su sitio web de WordPress.

¿Qué implica el proceso?

Al optimizar sus imágenes, su objetivo es ofrecer imágenes de la más alta calidad de la manera adecuada:

  • Formato
  • Dimensión
  • Tamaño
  • Resolución

Como consumidores, nos encanta interactuar con imágenes y contenido interactivo más que con una publicación de blog con muchas palabras. Según la investigación, las estadísticas lo confirman; alrededor del 64% del peso de un sitio web está compuesto por imágenes. Al optimizar estas instantáneas, aumentará la velocidad de carga de su sitio web. Todos valoramos la velocidad y la eficiencia, y si su sitio web no puede ofrecer esto, es más probable que los usuarios abandonen su sitio.

Imágenes más comunes que utilizan sitios web

A continuación, se muestran dos de los formatos de imagen más habituales que se utilizan en línea:

Imágenes en formato ráster: incluyen archivos JPEG, GIF y PNG. Cada píxel tiene uno o más números asociados, lo que genera un color que debería mostrar el píxel.

Gráficos vectoriales escalables (SVG): este tipo de imagen puede escalar a cualquier tamaño manteniendo su calidad original. También conservan su tamaño de archivo original, lo que los convierte en una opción popular para los creadores de sitios web y diseñadores gráficos.

Optimización de un JPEG

Incluso si una imagen JPEG es hermosamente nítida y clara en su sitio web, se cargará a un ritmo mucho más lento si no se ha optimizado. Para obtener orientación sobre cómo optimizar un JPEG, siga leyendo.

Empiece con Photoshop

Aquí, puede cambiar el tamaño de las imágenes y mantener su calidad. Primero, abra su imagen en el software, navegue hasta ‘archivo’, ‘exportar’ y ‘exportar como’ hasta que vea la pantalla ‘exportar como’. Luego, seleccione la opción ‘2-Up’ para mostrar una imagen lado a lado de su imagen original y optimizada.

Ahora, puede experimentar ajustando la calidad de su imagen para reducir su tamaño de archivo si es necesario. El tamaño del archivo de imagen se mostrará en la parte inferior de la pantalla. Reducir la calidad de la imagen puede reducir esto significativamente. Gracias a las capacidades incomparables de Photoshop, reducir la calidad de la imagen tiene poco impacto en la apariencia física de su imagen, pero le ahorrará espacio en los archivos.

Antes de exportar la imagen:

  • Modifique su tamaño ingresando el número deseado de píxeles en Photoshop.
  • Haga clic en exportar, guarde la imagen y cárguela en su sitio web usando el editor de Elementor.
  • Haga clic en la pestaña ‘estilo’, donde puede cargar su imagen recién optimizada e incluir texto alternativo.
  • Alternativamente, puede usar PhotoPea. Esta es una excelente alternativa gratuita a Photoshop y cuenta con muchas características similares. Abra su imagen, diríjase a ‘archivo’, luego ‘exportar como’ y seleccione ‘JPEG’.
  • Al igual que Photoshop, Elementor recomienda experimentar con la configuración de calidad para reducir el tamaño de la imagen. Una vez que haya encontrado la calidad deseada, siga los mismos pasos anteriores para cargar su imagen en su sitio web.

Optimización de un PNG

Comience cambiando el tamaño de su PNG con Photoshop: Importe su PNG y cambie su tamaño usando la opción ‘exportar como’. Luego, asegúrese de que la opción PNG esté seleccionada y la casilla de transparencia esté marcada. Ahora, ajuste el ancho de su PNG a 300 píxeles y verá una disminución significativa en el tamaño de su PNG.

Ahora, use Tiny PNG: una vez que haya exportado esta imagen optimizada, diríjase a Tiny PNG. Esta herramienta gratuita comprime su PNG mientras mantiene su calidad para tiempos de carga más rápidos. En el sitio web, coloque su PNG en el cuadro de carga. Tiny PNG funcionará automáticamente en esta imagen por usted y, después de la compresión, se le mostrará cuántos KB de tamaño de archivo le ha ahorrado la herramienta. Para comparar esto con su imagen previamente optimizada, cargue los dos en Photoshop y véalos uno al lado del otro para analizar el tamaño del archivo y la calidad de la imagen.

Optimización de un gráfico vectorial escalable (SVG)

Para cargar SVG en Elementor, primero debe habilitar esto en la configuración de Elementor. Por ejemplo, en WordPress, haga clic en ‘Elementor’ y luego en ‘configuración’, diríjase a ‘avanzado’ y seleccione ‘habilitar’ en la opción ‘habilitar cargas de archivos sin filtrar’.

Utilice Inkscape : Inkscape es una excelente manera de volver a dibujar imágenes de iconos en gráficos vectoriales. Una vez que haya hecho esto, puede exportar estos SVG y cargarlos en el widget del cuadro de iconos. En Inkscape, haga clic en ‘archivo’, luego en ‘guardar como’, elija una ubicación y seleccione ‘SVG optimizado’ en el menú desplegable en la parte inferior de la página.

Recuerde : no todas las imágenes se pueden convertir a SVG. Las fotos SVG deben dibujarse en un software como Inkscape o Adobe Illustrator.

Optimización de imágenes que ya están cargadas en su sitio web

Aunque siempre es mejor optimizar las imágenes antes de publicarlas en su sitio web, puede haber ocasiones en las que necesite optimizar las fotos que ya ha subido. En estos casos, puede utilizar un complemento de terceros como ‘Smush’, un complemento gratuito de optimización de imágenes altamente calificado. Smush comprimirá automáticamente sus imágenes para lograr tamaños de archivo más pequeños mientras mantiene una excelente calidad de imagen.

Una vez que haya instalado este complemento a través de WordPress, Smush escaneará las imágenes de su sitio web para recopilar algunos datos y determinar cuáles necesitan comprimirse. Una vez que se haya completado, puede desplazarse por la configuración de Smush y elegir qué imágenes desea optimizar en función de la información que Smush le ha proporcionado. Puede optar por cambiar el tamaño de sus imágenes de tamaño completo (por tamaño de píxel) para ajustarse a sus parámetros deseados sin tener que exportar imágenes de su sitio web.

Deja un comentario