Optimización de las imágenes en un sitio web: 3 consejos

Optimización de las imágenes en un sitio web:

Un gran porcentaje del contenido de un sitio web son imágenes. Es necesario elegir las imágenes adecuadas y asegurarse de que todas tienen el mismo estilo y se muestran correctamente en el sitio web.

Pero eso no es todo. También es necesario que las imágenes no sólo sean de calidad sino que estén correctamente optimizadas para el sitio web. De esta manera, se puede mejorar la velocidad de carga del sitio web.

Y como debes saber, la velocidad de carga es un factor esencial para determinar si la experiencia del usuario ha sido buena.

Optimización de las imágenes para el sitio web no es un gran problema. Es bastante sencillo de conseguir, desde guardar una imagen editada hasta colocarla dentro del sitio web utilizando HTML y CSS.

Y en este artículo te damos algunas técnicas sencillas que puedes poner en práctica para mejorar la velocidad de tu sitio web utilizando imágenes optimizadas.

1-Utiliza la opción de guardar para optimizar.

Guardar las imágenes para el sitio web es una de las funciones que tienen los editores de fotos como Photoshop. Elegir esta opción de guardado hace que el programa comprima los archivos y, por tanto, pesen menos.

Pero todo depende de la calidad que pongas a tus imágenes; obviamente, cuanto mayor sea el porcentaje de calidad, más pesadas serán. Por esta razón, tendrás que elegir, incluso si guardas tus fotos para el sitio web.

Tendrá que encontrar el equilibrio entre calidad de la imagen y tamaño del archivo. Por término medio, cada 10% de la imagen la ha hecho más pesada entre 30% y 50%.

Herramientas como Photoshop permiten generar varias copias de diferente calidad en la misma ventana y compararlas entre sí.

De esta manera, se puede ver una gran diferencia entre elegir la calidad 70 u 80 para sus fotos. No establezca un valor estándar para todas sus imágenes, haga esta comprobación para cada una de ellas ya que algunas fotografías tienen colores más intensos que suelen requerir un ajuste de mayor calidad.

2-Utiliza el formato correcto.

Para el sitio web, se utilizan cuatro formatos de imagen: JPEG, PNG, GIF y SVG. JPEG es el formato más común para imágenes e ilustraciones; probablemente la mayoría de las fotos de su sitio web estén en este formato. PNG tiene transparencia, por lo que se utiliza para diseños en los que se necesita esta característica.

Puede utilizarse, por ejemplo, para colocar imágenes caladas de personas u objetos dentro de la composición. Por otro lado, el GIF se utiliza para las animaciones. Y SVG es un formato vectorial que suele utilizarse para logotipos e iconos.

Al guardar la imagen para el sitio webSi no tienes una imagen, asegúrate de que eliges el formato correcto. Aunque PNG es un formato apto para la web, tiende a ser ligeramente más pesado que JPEG, así que si tienes imágenes sencillas que no usan transparencia, guárdalas en JPEG.

3-Elige JPEG de carga progresiva

A la hora de guardar para la web en Photoshop, tienes varias opciones. Las que tienes en cuenta son la calidad y el formato de archivo que quieres guardar. Si el formato cambia, muchas de las opciones que tenías en primer lugar cambian y se adaptan al tipo de formato que estás guardando.

Si está trabajando con JPEG, habrá observado una serie de casillas de verificación (indique dónde).

Hay una casilla que es esencial y a la que quizá no haya prestado especial atención hasta ahora. Nos referimos a la que indica "Progresivo".

Esto indica que la carga de la imagen se realiza de forma progresiva, y al principio, el usuario puede ver una imagen pixelada que se va aclarando. Frente a la descarga "progresiva", encontramos la "optimizada", en la que la descarga se realiza desde la fila superior de píxeles hacia abajo.

Aunque optar por la carga "optimizada" puede parecer la mejor opción, sobre todo por el nombre, recomendamos elegir la carga "progresiva".

La diferencia de peso de los archivos es mínima entre las dos opciones, la carga progresiva da al usuario la sensación de velocidad en su sitio web.

Así, aunque las imágenes tarden más de dos segundos en cargarse, sabrán que al menos el sitio web se está cargando si el usuario nota esas imágenes pixeladas.