¿Está buscando cargar imágenes en su sitio de WordPress, pero no está seguro de qué tamaño o tipo de archivo deben tener las imágenes? ¿No está familiarizado con el proceso de cambiar el tamaño y comprimir imágenes para la web? En este artículo, explicaré por qué es importante usar el tamaño de imagen adecuado para su sitio web, además le mostraré cómo cambiar el tamaño y comprimir sus imágenes usando el editor de fotos gratuito GIMP.
Por qué es importante cambiar el tamaño de las imágenes de su sitio web
Comencemos con por qué es tan importante cambiar el tamaño de las imágenes de su sitio web.
Según WordPress.org, el "tamaño físico" general de una imagen juega un papel muy importante en el rendimiento de la página de un sitio web. “El tamaño del archivo [de una imagen] dicta el tiempo que lleva cargar tu página; cuanto mayor sea el tamaño del archivo... más tiempo tardará [una página] en cargarse”. En otras palabras, cargar un archivo de gran tamaño en su sitio web ralentizará el rendimiento de cualquier página a la que agregue el contenido, lo que generalmente se muestra como velocidades de carga de página más lentas en los datos analíticos de su sitio.
“El tamaño del archivo [de una imagen] dicta el tiempo que lleva cargar tu página; cuanto mayor sea el tamaño del archivo... más tiempo tardará [una página] en cargarse”.
-WordPress.org
Velocidad de carga de la página, también conocida simplemente como “velocidad de página”, es “qué tan rápido se carga el contenido de su página”, según el SEO sitio Moz. Tener páginas más lentas puede resultar en un mayor “las tasas de rebote”, que es una métrica elegante que representa las sesiones en las que un visitante del sitio abandona su sitio después de ver una sola página. Las páginas más lentas también pueden reducir la cantidad de tiempo que los visitantes pasan en las páginas de su sitio, ya que las personas pueden impacientarse esperando que se cargue el contenido de una página y abandonar su sitio más rápidamente.
Estas métricas son importantes porque normalmente desea que los usuarios pasen más tiempo en su sitio y vean más páginas en su sitio.
También son importantes porque desempeñan un papel en la clasificación de su sitio en las páginas de resultados de los motores de búsqueda o "SERP". SERPs son simplemente las páginas de resultados que se muestran cuando escribe una palabra o frase en Google y presiona la tecla Intro. Debido a que las imágenes más grandes son indicativas de malas prácticas de diseño web y afectan negativamente la experiencia del usuario en su sitio, los motores de búsqueda como Google pueden penalizar su sitio por tener estas imágenes más grandes y clasifique su sitio web por debajo de otros sitios web que funcionan mejor.
Cuanto menor sea la clasificación de su sitio web en Google, por ejemplo, menos tráfico recibirá su sitio y más tráfico irá a sus competidores que se ubiquen por encima de usted en los resultados de búsqueda.
Al reducir el tamaño de archivo de sus imágenes en su sitio web, puede mejorar su velocidad de página y así mejorar otras métricas como bounce rate e tiempo en la paginae para, en última instancia, mejorar su clasificación en los motores de búsqueda.
Tenga en cuenta que hay muchas otras variables importantes que intervienen en las clasificaciones de búsqueda, por lo que arreglar sus imágenes es solo una parte de un sólido SEO (Search Engine Optimization) estrategia. Sin embargo, ciertamente es muy importante para ayudar a que su sitio tenga una clasificación más alta en lugares como Google para ayudar a aumentar el tráfico de su sitio.
Cómo cambiar el tamaño de las imágenes para WordPress en GIMP
Entonces, ¿cómo cambiar correctamente el tamaño de las imágenes para WordPress?
Puede disminuir el tamaño de archivo de una imagen simplemente disminuyendo el tamaño total de la imagen usando la ampliación e de cultivo antes de subirlo a su sitio web. Además, puedes aplicar lo que se llama “compresión” a su imagen para reducir aún más su tamaño.
GIMP, el editor de fotos gratuito y de código abierto, puede realizar todas estas tareas al mismo tiempo que exporta a formatos de archivo de "próxima generación" recomendados para reducir aún más el tamaño de archivo de sus imágenes y mejorar el rendimiento de su sitio.
Escala tu imagen
Para comenzar con este proceso, abra la imagen que desea cargar en su sitio en GIMP. Puede hacer esto arrastrando y soltando su imagen desde su computadora a la ventana de imagen de GIMP, o simplemente puede ir a Archivo>Abrir cuando esté dentro de GIMP.
Si usa el método Archivo>Abrir, navegue hasta la ubicación de la imagen en su computadora desde el cuadro de diálogo "Abrir imagen" que aparece y haga doble clic en el archivo de imagen una vez que lo localice para abrirlo en GIMP (o haga clic en el botón botón "Abrir" en la esquina inferior derecha de la ventana de diálogo).
En la parte superior de la ventana de GIMP hay una característica llamada "Barra de título" (flecha roja en la imagen de arriba). Aquí verá las dimensiones actuales de su imagen (cuadro verde ampliado en la foto). Mi imagen es de 1920 × 1280: el primer número, 1920, representa el ancho de mi imagen (en píxeles) y el segundo número, 1280, representa la altura de mi imagen. Las dimensiones finales de la imagen que querrá usar para su imagen dependerán de en qué lugar de WordPress pretenda usar la imagen, así como del tema que esté usando.
Para este tutorial, cambiaré el tamaño de mi imagen al tamaño estándar de 1200 × 630 píxeles que se recomienda para imágenes de publicaciones de blog.
Con esto en mente, lo primero que quiero hacer es recortar mi imagen para que la relación de aspecto de mi imagen original coincida con la relación de aspecto del tamaño recomendado. Para hacer esto, tomaré mi herramienta de recorte presionando shift+c en mi teclado o haciendo clic en el icono de la herramienta de recorte en la caja de herramientas de GIMP (flecha roja en la imagen de arriba).
A continuación, en las Opciones de herramienta para esta herramienta, marcaré la casilla junto a "Fijo" (flecha verde) y haré clic en el menú desplegable para seleccionar "Relación de aspecto" (flecha azul).
Escribiré "1200:630" para establecer mi relación de aspecto en el campo de texto debajo del menú desplegable (flecha amarilla). Esto coincide con la relación de aspecto del tamaño de imagen recomendado que quiero que sea mi imagen final.
Con la herramienta de recorte, ahora haré clic y arrastraré el mouse por la imagen para dibujar el área de recorte. Cuando suelte el mouse, todo lo que esté fuera del área de recorte se atenuará (flecha roja en la imagen de arriba, suponiendo que "Resaltar" esté marcado en las Opciones de herramienta, que generalmente es la opción predeterminada).
De forma predeterminada, mi área de recorte tiene las guías configuradas como "Líneas centrales" (flecha amarilla en la imagen de arriba). Puedo cambiar esta configuración usando el menú desplegable de guías hacia la parte inferior de las Opciones de herramienta. Por ejemplo, cambiaré mis guías a "Regla de los tercios" (flecha verde). Las diversas opciones de guía aquí se basan en principios de fotografía, lo que facilita enmarcar su composición utilizando estos principios.
Puede pasar el mouse sobre cualquiera de los lados o esquinas del área de recorte (es decir, el área resaltada indicada por la flecha roja en la imagen de arriba), luego hacer clic y arrastrar para cambiar el tamaño del límite del área de recorte. Tenga en cuenta que siempre puede ver el tamaño de su área de recorte en los campos "Tamaño" ubicados en las Opciones de herramienta (resaltados en verde en la imagen de arriba). Deberá mantener el tamaño total del área de recorte mayor que el tamaño final de la imagen de 1200 × 630.
También puede hacer clic y arrastrar el mouse en el medio del área de recorte (flecha roja) para cambiar la posición del recorte en la imagen.
Una vez que esté listo para recortar la imagen, haga clic una vez dentro del área de recorte y su imagen se recortará.
Tenga en cuenta que si la opción "Eliminar píxeles recortados" en las Opciones de herramienta no está marcada (flecha verde en la imagen de arriba), el límite de la imagen original aún se mostrará alrededor de su imagen a través de una línea de puntos amarilla (flecha roja). Puede restaurar la imagen original, deshaciendo así el recorte, yendo a Imagen> Ajustar lienzo a capas. Solo se exportará el área de su imagen dentro del límite del lienzo.
Nuestra imagen ahora está recortada a la relación de aspecto que queremos, pero si miras una vez más las dimensiones de nuestra imagen en la "Barra de título", verás que la imagen es 1532 × 804 (delineada en verde y ampliada en la foto de arriba: sus dimensiones probablemente serán ligeramente diferentes según el tamaño que dibujó el área de recorte en su imagen). Ahora necesitaremos escalar nuestra imagen para que coincida con las dimensiones deseadas.
Para hacer esto, vaya a Imagen>Escalar imagen (flecha roja).
En el cuadro "Escalar imagen" que aparece, debajo de "Tamaño de imagen", asegúrese de que el icono de enlace de cadena junto a los cuadros "ancho" y "alto" esté vinculado (flecha roja en la foto de arriba). Luego, cambie el "Ancho" de su imagen a 1200 (flecha verde). Presiona la tecla de tabulación. La altura de la imagen se actualizará automáticamente a "630". En "Calidad", asegúrese de que el menú desplegable "Interpolación" (flecha azul) esté configurado en "NoHalo" o "LoHalo" para obtener la mejor calidad de imagen después de la escala. (Para obtener más información sobre la interpolación, echa un vistazo a mi tutorial sobre el tema).
Presione el botón "Escala" para escalar su imagen (flecha amarilla).
Una vez completada la escala, compruebe las dimensiones de la imagen en la barra de título. Ahora debería ver un tamaño de imagen de 1200 × 630, ¡el tamaño exacto que queremos! ¿Entonces, qué hacemos ahora?
Comprime tu imagen exportándola a WebP
Recortar y escalar la imagen redujo el tamaño del archivo al reducir la altura de la imagen de 1920 a 1200 píxeles y el ancho de 1280 a 630 píxeles, pero podemos reducir el tamaño de la imagen aún más aplicando compresión cuando exportamos la imagen.
Entonces, ahora necesitamos exportar la imagen a un formato de archivo que aplique compresión a la imagen sin reducir notablemente la calidad de la imagen. Si bien los archivos JPEG siempre son una buena opción, ahora hay una opción aún mejor disponible: WebP.
El formato WebP aplica más compresión que JPEG y afecta menos la calidad de la imagen que JPEG. En otras palabras, obtendrá una imagen más atractiva con un tamaño de archivo más pequeño. Además, los formatos WebP son compatibles con los 5 principales navegadores web.
Para exportar a WebP, vaya a Archivo>Exportar como (flecha roja).
Haga clic en cualquiera de las carpetas en la sección "Lugares" (resaltadas en verde) para elegir la imagen en su computadora donde desea guardar su imagen. Simplemente puede hacer doble clic en una carpeta para ingresar y ver en qué carpeta se encuentra junto al título "Guardar en carpeta" (flecha roja). Luego, cambie el nombre de su imagen a lo que desee, solo asegúrese de terminar el nombre de su imagen con la extensión ".webp" (flecha azul) para exportar la imagen en formato WebP. Cuando esté listo, haga clic en "Exportar" en la esquina inferior derecha de la ventana (flecha amarilla).
A continuación, aparecerá el diálogo "Exportar imagen como WebP". Asegúrese de que "Sin pérdidas" no esté marcado (flecha roja). Por lo general, configuro la "Calidad de imagen" en 80 (flecha azul: esto es un porcentaje, por lo que cuanto menor sea el porcentaje, menor será la calidad de la imagen, pero menor será el tamaño del archivo de imagen). Si su imagen no contiene transparencia (es decir, un logotipo sin fondo), no tiene que preocuparse por el control deslizante "Calidad alfa" (de hecho, en un experimento que realicé, reducí la calidad alfa de 100 a 90 en realidad ligeramente aumentado el tamaño de archivo de una imagen con fondo transparente de 8.50 kb a 8.52 kb). El menú desplegable "Tipo de fuente" puede mantenerlo en "Predeterminado".
Depende de usted si desea marcar o desmarcar cualquiera de las opciones de metadatos, incluidos los datos Exif, los datos ITPC y los datos XMP. Los datos Exif y XMP son metadatos normalmente asignados por su cámara que describen información sobre su foto, como qué modelo de cámara se usó o qué tipo de lente se usó. ITPC, por otro lado, es utilizado por miembros de la prensa y asigna información a su imagen, como propiedad, derechos y licencias. Si no está seguro de qué hacer, simplemente deje estas opciones marcadas.
Del mismo modo, puede dejar la opción "Guardar perfil de color" sin marcar, ya que la mayoría de los navegadores usarán automáticamente el espacio de color sRGB para mostrar su imagen, que es lo que usa GIMP. Si está utilizando un perfil de color diferente, querrá dejar esto marcado. Además, si le preocupa que la imagen no se muestre correctamente para ciertos navegadores, dejarla marcada solo agrega unos pocos kb al tamaño total de la imagen.
Finalmente, la opción "Guardar miniatura" puede permanecer sin marcar, lo que nos ahorrará aún más algunos kilobytes.
Haga clic en "Exportar" (flecha amarilla en la imagen de arriba) para exportar la imagen al formato WebP. Al comparar el archivo WebP exportado con un archivo JPEG que tiene el mismo tamaño y también tiene su calidad establecida en "80", la imagen WebP tiene un tamaño de aproximadamente 30 kb, o aproximadamente un 25 % más pequeño que el JPEG.
Ahora puede iniciar sesión en su sitio de WordPress y navegar a la página o publicación donde desea cargar su imagen, o simplemente navegar a la sección "Medios" usando la navegación principal y arrastrar y soltar su imagen en la Biblioteca de medios. En mi caso, navegaré a "Publicar" usando la navegación principal (flecha roja en la imagen de arriba) y haré clic en "Publicación de blog 1" (flecha azul) para editar esa publicación de blog.
Luego abriré la barra lateral de configuración de publicación (flecha roja) y me desplazaré hacia abajo hasta la sección "Imagen destacada" y expandiré esta sección (flecha azul). Luego, haré clic en la imagen para reemplazarla con mi nueva imagen.
Navegaré a la pestaña "Cargar archivos" (flecha roja), y puedo arrastrar y soltar mi imagen desde mi computadora a WordPress (flechas azules).
Finalmente, haré clic en "Establecer imagen destacada" para aplicar este cambio (flecha roja).
Haga clic en "Actualizar" (flecha roja) para actualizar su página con la nueva imagen destacada.
Si hago clic en "Ver publicación" (flecha azul)...
…ahora verás la nueva imagen destacada que se muestra en la parte superior de mi blog.
¡Eso es todo por este tutorial! Si desea obtener más información sobre el diseño de un sitio web de WordPress, le recomiendo que consulte mi Curso de WordPress 6.0 para no programadores! O, si desea obtener más información sobre GIMP, consulte mi Clase magistral de GIMP 2.10 en Udemy!
