Diego Ortuño Rosales

Webdesign+Writing for Business

La mejor forma de optimizar las imágenes de tu sitio web

Guía de optimización de las imágenes de un sitio web. En 5 pasos, acelera la velocidad de tu sitio web y ten contentos a tus visitantes.

Diego Ortuño Rosales

Autor, diseñador web, bibliotecario

Suscríbete a mi boletín Guardia de Argos

Lancemos tu sitio web

Tu tienes una gran idea y yo sé cómo construirla

Anuncios aquí

Coloca tu publicidad en este espacio

Otro día en el mar

Tabla de contenidos

Ayúdame a comprar audífonos nuevos

Soy sordo, tengo 95% de oído perdido y debo comprar audífonos nuevos cada 5 años. Con tu aporte puedo alcanzar la meta con más facilidad.
urgente

Esta es una guía súper simple de 5 pasos y va al punto. Tú tienes un sitio web con WordPress y deseas optimizar las imágenes para que las páginas corran más rápido. Es muy importante que tus páginas corran a buena velocidad porque Google penaliza la aparición de páginas web lentas en los resultados del buscador.

¿Por qué Google hace esta penalización? Porque cuando un sitio web corre lento los visitantes se salen de este sitio y regresan a Google a hacer otra búsqueda. Google hace seguimiento de estas búsquedas, toma nota de los sitios web lentos que causaron un rechazo por parte del usuario y por darle un mejor resultado de búsqueda más adelante, penalizan el sitio lento.

Google lo sabe y yo también: si tu sitio web es lento, será rechazador por los usuarios y se saldrán enseguida del mismo. Si deseas prevenir antes de lamentar, contáctame para darte un diagnóstico.

Si deseas saber si tu página web está lenta, debes escribir su dirección (ejemplo: https://mipágina.com) en la página de Google Page Speed Insights. Una vez optimizadas las imágenes puedes probar la velocidad de tu página otra vez. Si luego de optimizar las imágenes los resultados son los mismos, debes actualizar el caché de tu sitio web. Pronto guía de cómo hacerlo.

En pocas palabras, transformaremos los archivos de imágenes PNG y JPG a WEBP. ¿Por qué? Porque los archivos WEBP son de menor tamaño que los otros dos. Ojo: dimensiones de imagen y tamaño de archivo son dos cosas diferentes.

5 pasos a seguir

1. Vamos a la página web Bulk Resize Photos.

2. Seleccionamos todas las imágenes que deseamos convertir.

3. Las arrastramos todas al mismo tiempo al recuadro de la página web.


También podemos seleccionarlas al presionar sobre el botón con el texto Elija imágenes / Choose images.

4. La página entonces nos redirige a otra página de configuración con varias opciones de ajustes.

Donde dice Formato de imagen cambiamos del tipo de archivo original a WEBP.

Opcional, yo siempre cambio el Porcentaje de 50 a 100 para mantener las mismas dimensiones de imagen. También a veces cambio el porcentaje de la calidad de imagen de 75 a 80.

5. Presionamos sobre el botón Comienzo / Start. La página nos redirige a otra página y descarga de forma automática el archivo convertido a nuestra carpeta de Descargas. Además, nos indica en cuánto se redujo el tamaño del archivo.

¡Y eso es todo! Esto es lo que hago siempre con todas las imágenes en mis sitios web y de mis clientes.

Si tienes alguna duda o pregunta, escríbeme un comentario.

¿Hay formas automáticas de hacer este proceso?

Sí. Ten en cuenta que este proceso manual es el mejor y es muy rápido. Practícalo un par de veces y te darás cuenta.

A continuación te indico 2 formas de convertir tus imágenes desde JPG y PNG a WEPB de forma automática. La primera es con un code snippet (fragmento de código). La segunda es con un plugin para convertir las imágenes.

El plugin para convertir imágenes que te recomiendo es Imagify. Es fácil de usar y muy útil para convertir las imágenes en masa. Esto es muy conveniente cuando ya tienes muchas imágenes en tu página web.

Nota: este plugin y otros del mismo tipo son gratuitos sólo hasta cierto punto.

El fragmento de código, en cambio, es mucho más fácil de instalar, no requiere de abrir una cuenta (como Imagify en su página web) y convierte las imágenes al paso. Incluso, si observas en la biblioteca de medios de tu sitio web, verás que subió la imagen WEPB, no la JPG/PNG. Esto te ahorra espacio en la memoria de tu servidor.

Sin embargo, la ventaja de aún tener las imágenes JPG/PNG es que ciertos exploradores aún no leen los archivos WEPB. Imagify entonces coloca la imagen que el explorador sí puede leer.

Aun así, los archivos WEPB se convertirán dentro de poco en requisito obligatorio y los exploradores deberán adaptarse. Sin contar con que ya surgió otro tipo de archivo de imagen aún mejor que el WEPB: el archivo AVIF.

Mi preferencia y recomendación es instalar el fragmento de código.

Para instalar el fragmento de código o Imagify es necesario instalar un plugin para cada cual.

Si estás interesado, veamos cómo se hace. Si ya sabes cómo instalarlos, presiona sobre Mustang para avanzar a la configuración de cada plugin.

Cómo instalar un plugin en WordPress

Estos son los pasos generales para instalar un plugin:

1. Ve al escritorio de WordPress y busca el menú Plugins en la barra lateral a la izquierda. Pasa el puntero del mouse por encima y se desplegarán 2 submenús: presiona sobre Añadir nuevo plugin.

2. Escribe el nombre del plugin en el buscador, como Imagify o Code Snippets y espera a que aparezca el plugin. El sistema sólo se toma unos segundos en buscarlo en el repositorio de plugins de WordPress.

Este es el logo de Code Snippets, por si tienes alguna duda cuando aparezca en los resultados de búsqueda.

3. Presiona en Instalar ahora.

4. El botón cambiará de color y texto en pocos segundos. Ahora deberás presionar sobre el mismo para activarlo.

Después de activarlo, el botón dirá Activado y quedará descolorido.

Felicitaciones, ya sabes instalar un plugin. Haz desbloqueado la segunda mitad del universo de WordPress.

Cómo usar los plugins de Code Snippets e Imagify

Veamos cómo crear un fragmento de código mediante Code Snippets. Si deseas configurar Imagify, presiona sobre el logo.

Los fragmentos de código liberan un montón de recursos del sitio web y hasta sustituyen las funciones de muchos plugins. En mi propia web tal vez tenga más de 10 fragmentos de código activos para múltiples funciones: rendimiento y velocidad del sitio web, funciones personalizadas de mi tienda en línea, conversión de imágenes de JPG a WEPB…

Creación de un fragmento de código

1. Busca Fragmentos de código en la barra lateral izquierda de WordPress, pasa el cursor por encima hasta que se despliegue el submenú y presiona sobre Añadir nuevo.

2. Escribe un título como “Convert to Wepb”, copia y pega el código (después de esta imagen), presiona sobre Save Changes y presiona sobre Activate.

/**
 * Convert Uploaded Images to WebP Format
 *
 * This snippet converts uploaded images (JPEG, PNG, GIF) to WebP format
 * automatically in WordPress. Ideal for use in a theme's functions.php file,
 * or with plugins like Code Snippets or WPCodeBox.
 * 
 * @package    WordPress_Custom_Functions
 * @author     Mark Harris
 * @link       www.christchurchwebsolutions.co.uk
 *
 * Usage Instructions:
 * - Add this snippet to your theme's functions.php file, or add it as a new
 *   snippet in Code Snippets or WPCodeBox.
 * - The snippet hooks into WordPress's image upload process and converts
 *   uploaded images to the WebP format.
 *
 * Optional Configuration:
 * - By default, the original image file is deleted after conversion to WebP.
 *   If you prefer to keep the original image file, simply comment out or remove
 *   the line '@unlink( $file_path );' in the wpturbo_handle_upload_convert_to_webp function.
 *   This will preserve the original uploaded image file alongside the WebP version.
 */

add_filter( 'wp_handle_upload', 'wpturbo_handle_upload_convert_to_webp' );

function wpturbo_handle_upload_convert_to_webp( $upload ) {
    if ( $upload['type'] == 'image/jpeg' || $upload['type'] == 'image/png' || $upload['type'] == 'image/gif' ) {
        $file_path = $upload['file'];

        // Check if ImageMagick or GD is available
        if ( extension_loaded( 'imagick' ) || extension_loaded( 'gd' ) ) {
            $image_editor = wp_get_image_editor( $file_path );
            if ( ! is_wp_error( $image_editor ) ) {
                $file_info = pathinfo( $file_path );
                $dirname   = $file_info['dirname'];
                $filename  = $file_info['filename'];

                // Create a new file path for the WebP image
                $new_file_path = $dirname . '/' . $filename . '.webp';

                // Attempt to save the image in WebP format
                $saved_image = $image_editor->save( $new_file_path, 'image/webp' );
                if ( ! is_wp_error( $saved_image ) && file_exists( $saved_image['path'] ) ) {
                    // Success: replace the uploaded image with the WebP image
                    $upload['file'] = $saved_image['path'];
                    $upload['url']  = str_replace( basename( $upload['url'] ), basename( $saved_image['path'] ), $upload['url'] );
                    $upload['type'] = 'image/webp';

                    // Optionally remove the original image
                    @unlink( $file_path );
                }
            }
        }
    }

    return $upload;
}

Luego debe quedar así y ya está instalado.

De ahora en adelante podrás subir imágenes JPG, PNG y GIF, y serán convertidas al formato WEPB.

Configuración de Imagify

Después de activar el plugin de Imagify, en la parte de arriba del escritorio de WordPress aparecerá un instructivo de 3 pasos para habilitar tu cuenta de Imagify y configurarlo. Es un proceso muy rápido, por cierto.

Nota: Verás este instructivo en todas las secciones del escritorio de WordPress hasta que sigas los pasos o desactives el plugin.

Presiona sobre el botón para registrarte.

Aparecerá un mensaje para que introduzcas tu correo electrónico. Introdúcelo y luego ve al correo y léelo. Confirma tu cuenta de Imagify de una vez.

Copia la clave API que llegó a tu correo.

En el escritorio de WordPress, presiona sobre el botón “tengo mi API key”, pégalo y presiona sobre el botón para confirmar. Si la clave es correcta recibirás este aviso:

Ahora presiona en el botón “Ir a ajustes”.

Te llevará a la siguiente pantalla de opciones:

Estos ajustes generales vienen seleccionados por defecto.

Mi recomendación es dejar seleccionado el primero tal como está. La optimización automática de imágenes al subirlas es la razón por la que instalamos este plugin, ¿cierto?

Quitar la selección al backup de las imágenes originales. ¿Por qué? Porque lo recomendable es guardar las imágenes originales aparte. El espacio de un servidor puede ser bastante limitado y manejar imágenes en línea es más complicado de lo normal.

Sobre la compresión sin pérdida, la veo como un ajuste para experimentar. ¿A qué me refiero con experimentar? A que conviene probar y ver qué tan bien funciona o si no era necesario en primer lugar.

Luego vienen los ajustes de optimización. Mi última sugerencia es marcar en mostrar en el sitio las imágenes en formato WebP. ¿Por qué? Porque así el sitio web está obligado a mostrar las imágenes WebP a los visitantes. Caso contrario, el plugin mostrará imágenes optimizadas de cualquier tipo.

De nuevo, esto sujeto a experimentación. Si hay problemas, conviene entonces desactivar este ajuste.

Dije mi última sugerencia, porque por todos los demás ajustes recomiendo dejarlos como están.

Al final presionamos en Guardar los cambios.

Como alternativa, si tenemos muchas imágenes en el sitio web y queremos optimizarlas al paso, podemos ir a optimización masiva. Es muy fácil. Para más referencias de cómo hacerlo, te dejo el enlace a la documentación de Imagify para que consultes cualquier duda.

Conclusión

La optimización de imágenes es muy necesaria para que los sitios web sean rápidos, tener contentos a los visitantes y cumplir con los requisitos de motores de búsqueda como Google para evitar penalizaciones en los resultados de búsqueda.

El mejor proceso de optimización de imágenes es manual. Las dos siguientes alternativas son un fragmento de código y un plugin de optimización. Si deseas que diagnostique si tu sitio web necesita optimización y en caso de necesitarlo, me encargue de optimizar las imágenes, escríbeme.

¿Qué te pareció esta entrada? Gracias por leerme. Coméntame cualquier duda que tengas.

Anuncios aquí

Coloca tu publicidad en este espacio

Anuncios aquí

Coloca tu publicidad en este espacio

Gracias por leer

Comparte esta publicación

Deja una respuesta

Lancemos tu sitio web

Tu tienes una gran idea y yo sé cómo construirla

Lee mis últimas entradas

Diseño web

¿No tienes sitio web en abril de 2023?

Es el último día de abril del año 2023. El Internet crece y cada vez más gente busca sobre un tema, servicio o producto muy cercano a los tuyos. ¿Y dónde estás tú? Tu red social no sale en los resultados de búsqueda. De hecho, hay más gente en *Internet* que en las redes.

Leer más »

Diego Ortuño Rosales

Webdesign+Writing for Business

“People: if you need a site made, hire Diego. So good at what he does and so easy to work with.”

-Alexander Hellene

Ya casi estamos

Confirma tu suscripción

Al buzón de tu correo llegarán 2 emails. 

Con el primero confirmarás tu suscripción.

Con el segundo te daré la bienvenida al boletín y te agradeceré por suscribirte. 

Para evitar que mi boletín se vaya a tu carpeta de spam, sólo te pediré que con el email de bienvenida me agregues a tus contactos del correo.

Página de destino / Landing page

Una página de destino invita a su lector a a una lectura y visualización que es al mismo tiempo una experiencia y una promesa.

Una experiencia de aprecio, donde conoce cómo será tratado (es decir, se sentirá muy bien) y por quién (una persona comprometida con sus clientes y cuyo trabajo habla por sí solo).

Una promesa de beneficios muy detallados y, más importante aún, en quién se convertirá gracias a la suma de todas las cosas.

Es decir, gracias a trabajar contigo, contratar tu servicio o comprar tu producto, esta persona será alguien:

  • Feliz.
  • Realizado.
  • Aliviado.
  • Mejor persona.
  • Con un estatus superior.
  • Que ayuda a los demás.
  • Entretenida.
  • Parte de algo nuevo o diferente.
  • Otra persona.

Consigue tu página de destino

$500

Sitio web especial

El paquete estándar reconfigurado sobre un tema especial + 1 sección especial, como:

 

  • Tienda en línea.
  • Página de destino. (Landing page)
  • Web interna con membresía.
  • Páginas rediseñadas con maquetador de temas (ej: archivo o entradas del blog).
  • Buscador de contenido con filtros definidos.
  • Configuración adicional de widgets de todo tipo.
  • Diseño de formularios interactivos (ej: calculadora para cotizaciones aproximadas)
  • Biblioteca de contenido descargable. 
  • Videoteca.
  • Página de podcasts.
  • Página de foros. 
  • Escuela en línea.
  • Y más…

Consigue tu sitio web especial

$1500

Sitio web estándar para tu marca personal o negocio

Incluye:

 

  1. Configuración de WordPress
  2. Instalación de plantilla de WordPress
  3. Personalización de marca visual para el sitio web
  4. Hasta 7 fotos de archivo (stock)
  5. Seguridad adicional
  6. Optimización básica del motor de búsqueda (SEO)
  7. Diseño y secciones del sitio web:
  • Inicio
  • Sobre nosotros.
  • Servicios.
  • Blog y/o noticias.
  • Contacto.

Detalles adicionales

  1. El sitio web estará optimizado al 100% para los dispositivos móviles (tablet y smartphone/celular).
  2. El sitio web estará optimizado de acuerdo con los parámetros Core Web Vitals de Google, con una calificación de A en GTmetrix en su servidor de Canadá.

Además:

  • Redacción persuasiva y personalizada del contenido  para llegar a tu público.
  • Incluye seguro básico de asistencia técnica por un año.

Consigue tu sitio web estándar

$1000