¿Qué formato es mejor usar si podemos elegir entre .svg y .png? ¿Cuál carga más rápido o tiene mejor rendimiento?

Pablo Nicolás Alonso

Pablo Nicolás Alonso

Pregunta
studenthace 4 años

¿Qué formato es mejor usar si podemos elegir entre .svg y .png? ¿Cuál carga más rápido o tiene mejor rendimiento?

3 respuestas
para escribir tu comentario
    Mauro Nava

    Mauro Nava

    studenthace 4 años

    Depende, pero normalmente SVG carga mas rapido ya que los archivos svg solo con puntos matematicos representados en xhtml (si no mal recuerdo) y los png son mapas de bits. Los SVG's son escalables, por lo que no importa el tamaño que les asignes, siempre se veran se buena calidad, mientras que un PNG pierde su calidad despues de escalarlo mucho.

    Gonzalo Alfaro

    Gonzalo Alfaro

    studenthace 4 años

    @Sebastian_Heredia No concuerdo, para iconos siempre seria lo ideal usar .svg, digamos que por alguna razón necesitas usar o reciclar estos iconos, entre version Desktop o Mobile. es mucho mas fácil hacer crecer de tamaño un .svg que un .png. Un icono en .png por decirte de 50px x 50px se va a ver muy bien, pero al hacerlo un poco mas grande ya se va a pixelar. Lo ideal es que todos los iconos sean .svg. Saludos!

    Sebastian Heredia

    Sebastian Heredia

    studenthace 4 años

    ¡Hola Pablo! Eso es relativo normalmente al usar iconos pequeños por ejemplo para las redes sociales del footer lo recomendable es usar .svg

    Si vas a utilizar iconos también pero no son tan pequeños es recomendable usar .png

    Los .svg siempre cargaran mas rápido pero no quiere decir que usar .png es malo, debes tenerlo mas bien en cuenta en el tamaño de imágenes que uses, así no perderás resolución en las diferentes pantallas.

Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First

Desarrolla sitios web adaptables con Responsive Design y Mobile First. Aprende a utilizar wireframes, crear estilos y aplicar media queries para garantizar que tus proyectos se vean bien en cualquier dispositivo. Usa herramientas como Figma y Lighthouse.

Curso de Responsive Design: Maquetación Mobile First
Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First

Desarrolla sitios web adaptables con Responsive Design y Mobile First. Aprende a utilizar wireframes, crear estilos y aplicar media queries para garantizar que tus proyectos se vean bien en cualquier dispositivo. Usa herramientas como Figma y Lighthouse.