¿Alguna vez has entrado a una página web y sientes como tu dispositivo se friza o dura más de lo que estas acostumbrado en cargar?
Hay pocas cosas más frustrantes que una página que dura la eternidad en cargar (aunque sean solo unos segundos 😆).
Esto puede ser debido a que la página en cuestión tiene un peso muy grande y por ende dura más en descargarse en tu dispositivo. O también por falta de mantenimiento en sus servidores— aunque usualmente suele ser lo primero.
¿Y qué es más pesado en una página web que las imágenes? Estas componen la mayoría del espacio de la misma.
Para no ahuyentar a tus visitantes sin que siquiera vean quién eres o qué haces, es vital que tu página cargue rápido. Pero es tentador usar imágenes para realmente crear una experiencia...¿cómo logras las dos cosas? Te contamos debajo.
3 razones por las cuales optimizar tus imágenes
Vale la pena tomarse esos par de minutitos extras por tres simples razones:
- Mejorar la Velocidad de la página - Tus usuarios esperan que tu sitio se cargue rápidamente. La optimización de las imágenes ayuda a garantizar una mejor experiencia de usuario y a satisfacer sus expectativas.
- Tener buena experiencia del usuario - La atención de los usuarios es corta, y si se presenta algún percance que le impida al mismo navegar con rapidez y tranquilidad, es posible que se canse y decida abandonar la sesión haciéndote perder un cliente potencial. Woops.
- Tener un SEO Saludable - La optimización de las imágenes ayudará a asegurar que tus imágenes se clasifiquen mejor en los diferentes buscadores como Google, y también será beneficioso para el SEO general (optimización de motores de búsqueda) de tu sitio web. Sin buena optimización, le puedes decir arrivederci a rankear en Google.
A continuación te compartimos alguna buenas prácticas para asegurar que estos archivos suban como debe de ser 😉
Elige el tipo de imagen que corresponde en cada situación
Cuando estás editando una imagen, ya sea en Photoshop, Illustrator, o incluso Canva, se te muestra la opción de guardarla en uno de varios formatos, siendo cada uno útil para algo en específico:
Cuando usar el formato JPEG
Los JPEGs funcionarán para la mayoría de las imágenes de tu sitio, exceptuando cualquier imagen que requiera tener un fondo transparente. Estos se caracterizan porque permiten obtener imágenes de mayor calidad y tamaños de archivo más pequeños, pero se quedan cortos cuando se trata de cosas como logotipos o dibujos con patrones abstractos. También, con estos, es posible que se pierdan algunos datos del archivo en la compresión, aunque la pérdida no suele ser perceptible.
Usa JPGs para: fotos de personas o lugares, fondos con texturas, cuando no necesitas transparencia...
Cuando usar el formato PNG
Esta se pueden utilizar para cuando las imágenes no tengan mucho detalle, y principalmente para imágenes que requieran un fondo transparente. Por otro lado, los PNG terminan siendo de mayor tamaño.
Usa PNGs para: íconos, imágenes con letras, ilustraciones, patrones o necesitas transparencia...
Cuando usar el formato TIFF
En términos de calidad, los TIFF son los mejores. Sin embargo, son archivos mucho, mucho más grandes que los demás ya que contienen la imagen sin compresión alguna. Piensa un dinosaurio versus un lagarto. Así de grandes.
¿Cuándo usar el TIFF? Nunca, never, jamais.
Cuando usar el formato GIF
Los GIF pueden comprimir las imágenes en archivos de menor tamaño que los demás, pero la gama de colores de los GIF es micho más limitada, lo que los convierte en una mala opción para la mayoría de las fotografías. Sin embargo, los GIF pueden ser excelentes para las animaciones cortas.
Y claro que los has visto, son excelentes para comunicar un sentimiento sin un video.
El tema está en que estas animaciones pueden pesar más de 1mb, que en lenguaje web, es básicamente lo que debería pesar tu página web completa. Así que si vas a usar un GIF, es mejor enlazar el GIF de un servicio como Giphy.
Cuando usar el formato SVG
El formato SVG es básicamente código, y el código es la forma más ligera de representar algo. Usa el SVG para iconos y gráficos. Nos encanta usar The Noun Project para encontrar buenos iconos y optimizar la carga de nuestras páginas web.
Usa nombres con palabras clave para tus imágenes
Un elemento que también es de gran importancia al momento de tener un buen posicionamiento de SEO en tu página, es el nombre de los archivos de las imágenes.
¿Sabías que Google rastrea los nombres de los archivos de tus imágenes y por extensión de cualquier otro archivo que tengas? Sí, por esto es importante que se tenga un buen sistema de nombramiento de archivos que tenga palabras relevantes para la sección y tema que se está tratando en la página.
Si dejas el nombre de la imagen que viene por defecto, por ejemplo: "thumbnail132-.jpg", es una oportunidad de SEO perdida.
Por otro lado, si la imagen trata un servicio de consultoría, puedes ponerle "servicio-de-consultoria-especializada.jpg". Google verá estás palabras al escanear tu sitio web y entenderá de qué estás hablando, colocándote como un prospecto cuando personas busquen esas palabras en el buscador.
Te interesaría también: ¿Qué es el SEO y qué implica para tu página web?
La pregunta del millón: ¿cómo optimizo las imágenes?
Optimizar el tamaño y resolución de las imágenes
Por último, tenemos posiblemente el elemento que resulta ser de más importancia al momento de asegurar un proceso de subida eficiente de fotos, la optimización de las mismas.
Siguiendo con lo del tamaño, es importante mantener el tamaño de las fotos por debajo de cierto número (se recomienda menos de 150kb) para que así la velocidad de carga se mantenga ideal y todo fluya sin problema.
Y no te preocupes, que se reduzca el tamaño de manera considerable, no implica que la imagen pierda claridez, ya que existen muchos métodos eficientes para reducir una imagen sin perder calidad.
Hay tres elementos que nos permiten reducir el tamaño de una imagen: las dimensiones (ej. 1800px x 1200px), la resolución (72, 96, 120, etc...) y finalmente, el formato (que vimos arriba).
Para el mundo digital, es recomendable que las imágenes no excedan los 1800px de ancho, 96 dpi de resolución y que se utilicen en PNG o JPG la mayoría.
Todo dependerá de tus necesidades puntuales, pero estos son buenos puntos de partida.
Otra cosa importante:
Guarda la imagen en el tamaño que será utilizado
Un error común es guardar una imagen que será digamos para una foto de perfil (100-200px) del tamaño de una foto destinada a ser un fondo (1280-1800px).
Eso sería como colocar una cortina de diez o doce veces el tamaño de la ventana.
Siempre fíjate si donde estarás subiendo tu imagen hay alguna recomendación. Nosotros te dejamos un pequeño cheatsheet que puedes usar:
- Para imágenes de perfil: 200-400px
- Para fondos de secciones: 1200-1800px
- Para iconos grandes: 100-200px
- Para iconos pequeños: 40-80px
- Para fotos a un lado: 800px
- Para tu logo: 400-800px
Herramientas para optimizar tus fotos
Utiliza una servicio online como iloveimg.com
Nuestra herramienta favorita para optimizar y comprimir las imágenes es iloveimg.com. Solo debes subir tu imagen y comprimirla. Normalmente hacemos un combo de redimensionar (normalmente al 50%) y comprimir hasta lograr un tamaño de entre 40 y 120 kb.
Utiliza Preview en Mac para optimizar el tamaño
En la aplicación de Mac Preview, puedes redimensionar la imagen y volverla a salvar muy fácilmente. Solo tienes que ir a el menú Herramientas -> Ajustar Tamaño.
Utiliza Photoshop para comprimir tus imágenes
Photoshop trae una herramienta específicamente para imágenes web. Aunque en la nueva versión la escondieron, sigue siendo la más fácil y cómoda en mi opinión.
Dependiendo de tu versión de Photoshop puedes ir a Archivo -> Exportar -> Salvar para la Web. Utilizo esta opción porque salva en formato RGB, me permite ver hasta donde puedo bajar dimensión, calidad y demás sin perder claridad y que se vea bien.
¿Prefieres verlo en video?
Aquí lo tienes, tres razones por las cuales es buena idea optimizar tus fotos, algunas formas de cómo hacerlo y los lineamientos a seguir.
Las imágenes son elemento de gran importancia para nuestros sitios web ya que además de darle el look and feel que queremos, también influyen en que tan rápido responderá la misma al momento de cargar y cómo impactará la experiencia del usuario.
Te aseguro que si sigues estos tips, tendrás una página que se verá bien y ¡también correrá como debe ser! ¿Qué esperas para optimizar tu website?
¿Te fue útil este post? ¡Compártelo!
Recibe mis cartas — hermosas reflexiones, ejercicios e historias para alegrar y apoyarte.
"GRACIAS. Este mensaje me llegó como del cielo jajaja."
"Disfruto mucho leerte. Tu proceso de crecimiento que compartes me sirve de mucho"
"Una breve nota para agradecer tu carta de los lunes, siempre envías contenido de valor y que se ve que tiene un propósito más allá del comercial."
We hate SPAM. We will never sell your information, for any reason.
