Cuando se trata de agregar imágenes a su sitio web, hay dos tipos básicos de imágenes para elegir: imágenes rasterizadas e imágenes vectoriales.
Una imagen rasterizada, típicamente una fotografía, está formada por píxeles y tiene una resolución establecida. Cuando se amplía, perderá calidad y puede aparecer pixelada o granulada.
Se crea una imagen vectorial utilizando puntos, líneas y formas. Puede escalar imágenes vectoriales a cualquier tamaño sin perder calidad. Las imágenes de vectores están limitadas en cuanto a la cantidad de detalles que pueden representar, por lo que se utilizan mejor para elementos como tipografía, logotipos, iconos o ilustraciones.
El soporte para gráficos vectoriales en la web ha recorrido un largo camino. Tradicionalmente, los gráficos vectoriales se rasterizaron y se guardaron como archivos JPG, PNG o GIF para su uso en un sitio web. Ahora que los dispositivos de mayor resolución se han vuelto populares, como los dispositivos de Apple con pantalla Retina, ya no se garantiza que las imágenes de trama se muestren a un nivel de alta calidad para todos los usuarios.Con un diseño receptivo, las imágenes a menudo deben utilizarse en una variedad de dimensiones para diferentes tamaños de pantalla. Si bien existen numerosos enfoques para explicar estos problemas con las imágenes de trama, existe una solución aún más sencilla para los gráficos basados en vectores: usar SVG.
SVG significa Gráficos vectoriales escalables, y es un formato de archivo que le permite mostrar imágenes vectoriales en su sitio web. Esto significa que puede escalar una imagen SVG hacia arriba y hacia abajo según sea necesario sin perder ninguna calidad, por lo que es una excelente opción para un diseño web sensible.
En este artículo, analizaremos cómo usar los SVG y cómo son beneficiosos para su sitio web.
MANERAS DE USAR SVG
Hay dos formas principales de implementar SVG en su sitio web:
- Como un archivo .svg. Los archivos SVG se pueden usar como otros archivos de imagen, mostrándolos en una página con la etiqueta <img> o como fondo en CSS.
- Usando el código SVG en línea. Donde los SVG difieren es que el código dentro del archivo se puede copiar y pegar directamente en una página para mostrar la imagen. Este método permite un mayor control sobre la manipulación de la imagen.
BENEFICIOS DE SVG
Escalabilidad
Uno de los principales beneficios de SVG es que son independientes de la resolución. Esto significa que, a diferencia de los tipos de archivos como JPG o PNG, los SVG conservan la misma calidad sin importar en qué resolución de pantalla o tamaño estén. Por lo tanto, en una pantalla de retina donde un JPG puede aparecer borroso si no es lo suficientemente grande, un SVG aún se verá de alta calidad.
La imagen anterior muestra la diferencia entre un SVG y PNG cuando se amplía. La imagen SVG es clara y nítida, mientras que la versión PNG comienza a aparecer pixelada.
Tamaño del archivo
El uso de SVG puede resultar en tamaños de archivo más pequeños que otros tipos de archivos cuando se optimizan correctamente. Esto es útil cuando se trata de pantallas de mayor resolución, ya que los SVG no necesitan crearse en tamaños más grandes para adaptarse a la diferencia como lo hacen las imágenes rasterizadas. Si está utilizando archivos SVG en su sitio web, los tamaños de archivo más pequeños significan que sus imágenes se cargarán más rápido.
Capacidades de edición
Los archivos SVG son únicos, ya que pueden editarse en programas de edición gráfica (como Illustrator o Sketch) como otras imágenes, pero también en un editor de texto donde el marcado se puede ajustar directamente.
A la izquierda hay un SVG abierto en Sketch.A la derecha está el mismo archivo abierto en un editor de texto, que muestra el código contenido en el archivo de imagen.
Actuación
El uso de SVG en línea es beneficioso para el rendimiento de un sitio web porque elimina la necesidad de cargar la solicitud HTTP en un archivo de imagen. Como no es necesario descargar ningún archivo, esto se traduce en menores tiempos de carga para una página. Esto hace que su sitio web se vea más rápido para los visitantes, mejorando la experiencia del usuario.
Control de estilo
Otro beneficio de usar el método SVG en línea es que le permite controlar los estilos dentro de su imagen.Puede controlar propiedades como el color de relleno, el color del trazo, el tamaño y más a través de CSS. Esto es especialmente útil para agregar efectos de desplazamiento a una imagen, eliminando la necesidad de sprites de imagen.
Opciones avanzadas
Los SVG se pueden manipular con tecnologías como Javascript, lo que las hace más dinámicas que las imágenes de mapa de bits. Por ejemplo, la animación SVG es una técnica popular para agregar interés e interactividad a un sitio web.
Buscas mejorar tu sitio web? En EstrategiasWeb podemos ayudarle!
