Un gran porcentaje del contenido en una página web son imágenes. No solo hay que elegir las fotografías adecuadas, sino asegurarse que todas tengan el mismo estilo y se visualicen correctamente en el sitio web. Pero eso no es todo, también es necesario que las imágenes no solo sean de calidad, sino que se encuentren correctamente optimizadas para la web. De esta manera, puedes mejorar la velocidad de carga en el sitio. Y como debes saber, la velocidad de carga es una factor esencial para determinar si la experiencia de usuario ha sido buena.
Optimizar imágenes para web no es nada del otro mundo, es bastante sencillo de lograr, desde que guardas una imagen editada hasta el propio proceso de colocarlas dentro del sitio mediante HTML y CSS. Y en este artículo te damos algunos técnicas sencillas de poner en práctica para que puedas mejorar la velocidad de tu sitio al emplear imágenes optimizadas.
Utilizar la opción de guardado para web
Guardar imágenes para web es una de las características que editores de fotos como Photoshop poseen. Elegir esta opción para guardado hace que el programa comprima los archivos y por lo tanto pesen menos. Pero todo depende de la calidad que coloques a tus imágenes, obviamente, a mayor porcentaje de calidad, mayor peso. Por esta razón, deberás tomas decisiones, incluso si guardas tus fotos para la web.
Deberás hallar el equilibrio entre calidad de la imagen y el tamaño del archivo. En promedio, cada 10% de calidad que posee la imagen la hace un 30% a 50% más pesada. Herramientas como Photoshop te permiten generar varias copias de diferente calidad en una misma ventana y compararlas lado a lado. De esta manera, notas si existe una gran diferencia entre elegir calidad 70 u 80 en tus fotografías. No coloques un valor estándar a todas tus imágenes, realiza esta verificación para cada una de ellas ya que algunas fotografías poseen colores más intensos que, por lo general, requieren un mayor ajuste de calidad.
Emplear el formato adecuado
Para la web, se emplean 4 formatos de imagen: JPEG, PNG, GIF Y SVG. JPEG es el formato más común para imágenes e ilustraciones, probablemente gran parte de las imágenes que contiene tu sitio web tienen este formato. PNG posee transparencia, así que se emplea para diseños donde se necesite esta característica. Puede ser, por ejemplo, para colocar imágenes caladas de personas u objetos dentro de la composición. Por otro lado, GIF sirve para animaciones. Y SVG es un formato vectorial que se suele emplear en logos e icono.
Cuando estés guardando tu imagen para web, asegúrate de elegir el formato adecuado. Si bien PNG es un formato apto para web, suele ser un tanto más pesado que el JPEG, así que si tienes imágenes simples ue no hacen uso de transparencia guárdalas en JPEG.
Optar por JPEG de carga progresiva
Al momento de guardar para web en Photoshop tienes una serie de opciones. Las que tomas 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ás trabajando con JPEG, tal vez has podido notar una serie de casillas de verificación (indicar donde). Hay una casilla que es muy importante y que tal vez hasta ahora no le habías puesto especial atención. Nos referimos a aquella que indica “Progresivo”. Esto indica que la carga de imagen se realiza de manera progresiva y en principio el usuario puede ver una imagen pixelada que se va haciendo más clara. Opuesto a la descarga “progresiva” encontramos la “optimizada”, en donde la descarga se realiza desde la fila superior de pixeles hacia abajo.
Aunque optar por la carga “optimizada” puede parecer la mejor opción, especialmente por el nombre, recomendamos elegir la carga “progresiva”. Aunque la diferencia en el peso del archivo es mínima entre ambas opciones, la carga progresivale da al usuario la sensación de rapidez en tu sitio web. De modo que, incluso silas imágenes tardan más de dos segundos en cargar, si el usuario nota estas imágenes pixeladas sabrá que al menos el sitio se está cargando.
Usar fotografías con las dimensiones precisas
Usar las dimensiones incorrectas es un error poco común si es que se ha realizado el proceso previo de creación de layout. Pero nunca está de más asegurarse, particularmente si estás trabajando en una galería de imágenes que presenta vistas en miniatura. De manera usual, se suele colocar un nombre representativo a cada imagen, pero también se añaden las dimensiones en ese nombre. Esta técnica permite a los diseñadores o desarrolladores saber las dimensiones de la imagen y evitar confusiones al momento de elegir entre la imagen de tamaño original y la vista en miniatura.
Por supuesto, también puedes subir una sola imagen y modificarle mediante mediante CSS para que tenga las dimensiones apropiadas según el layout. Pero realmente no es recomendable, en particular si tienes una galería con muchas imágenes.
En conclusión…
Gran parte del proceso de optimización de imágenes para web se realiza en programas editores como Photoshop y se trata más que todo de comparar la calidad así como tener en cuenta cuál es el formato más apropiado según la función de dicha foto o imagen. Es una tarea sencilla, pero sí que debes ser cuidadoso.
