[SOLUCIONADO] ¿ Usar Imagenes o código vectorial para tu web?

TibicenasDesign · #1 (**permalink**) 14/11/2013, 04:43

Buenos días

A la hora de maquetar tu web, veo que puedo introducir introducir una imagen (logo por de empresa) en estos formatos .jpg .png .gif o otra opción es pasar mi diseño vectorial a código, siendo este unos valores matemáticos.

Razonándolo veo que la imagen se aloja en el servidor, por lo tanto el navegador se lo pide a este y según su peso y la calidad de nuestro servidor la imagen tardará más o menos tiempo.

Si es pasada esa imagen a código tengo la ventaja de que ahorro espacio en mi servidor pero ¿Sale rentable? pues ese código pasa a ser unas líneas que debe interpretar el navegador que estemos empleando.

Aunque tiene la ventaja claro está de que es vectorial, osea que la web no se pixelaría aumentemos lo que aumentemos.

¿Entonces alguien podría decirme que es mejor usar? Obviamente para FOTOS fotos reales no voy a estar vectorizándolas. Pero para por ejemplo los Botones o el diseño del menú navegación o Logotipo ¿Es algo a tener en cuenta?

Muchas gracias de antemano !

Linton · #2 (**permalink**) 17/11/2013, 03:57

Para dispositivos móviles (que son el futuro, en EEUU ya se venden muchos más que ordenadores) tiene sentido cualquier cosa que aligere la descarga. Y pasar a SVG todo lo que puedas es uno de los recursos.

Un saludo.

Rafael · #3 (**permalink**) 17/11/2013, 07:19

Más o menos tienes los conceptos, pero no los detalles.

Los "códigos vectoriales" actualmente son 3 opciones, o una imagen svg o una tipografía o una cosa llamada canvas. En muchos casos se estan usando íconos utilizando tipografía, Icon fonts para menús y cosas de esas.

El espacio que te vas a ahorrar para las imagenes de un menú, en un servidor será menos de lo que mide este guión - por así decirlo. Las imagenes svg sí son una opción para diagramas, y cosas... pues vectoriales y canvas para datos dinámicos. Así de simple. Cada cosa para lo que és.

El formato png está optimizado para lo que quieres, aunque como dices no para ampliarse. Actualmente ni google maps usa vectores para mostrar mapas. Mostrarlos así es entregar los datos y no le conviene, por lo que siguen entregando mapas de bits.

TibicenasDesign · #4 (**permalink**) 20/11/2013, 11:36

Cita:

Iniciado por Rafael

Más o menos tienes los conceptos, pero no los detalles.

Los "códigos vectoriales" actualmente son 3 opciones, o una imagen svg o una tipografía o una cosa llamada canvas. En muchos casos se estan usando íconos utilizando tipografía, [URL="https://www.google.com.mx/search?q=typographic+icons+for+web&ie=utf-8&oe=utf-8&rls=org.mozilla:es-ES:official&client=firefox-a&channel=fflb&gws_rd=cr&ei=ucGIUrPtGebL2wXYo4DwDQ #channel=fflb&q=icon+fonts&rls=org.mozilla:es-ES%3Aofficial"]Icon fonts[/URL] para menús y cosas de esas.

El espacio que te vas a ahorrar para las imagenes de un menú, en un servidor será menos de lo que mide este guión - por así decirlo. Las imagenes svg sí son una opción para diagramas, y cosas... pues vectoriales y canvas para datos dinámicos. Así de simple. Cada cosa para lo que és.

El formato png está optimizado para lo que quieres, aunque como dices no para ampliarse. Actualmente ni google maps usa vectores para mostrar mapas. Mostrarlos así es entregar los datos y no le conviene, por lo que siguen entregando mapas de bits.

Gracias por ambas respuestas, yo lo intento pensar para poder diseñar una web y que esta sea visible en un pc, smartphone, tablet y a su vez en una pantalla HD si lo he entendido bien entonces:

utilizo el código SVG para mi Logo o imágenes o botones que sean estáticos entendiendo que no sufriran tranformaciones.

y mediante canvas ( que es un lienzo en el que dibujar ) realizaría los Nav o menús desplegables por ejemplo ? que se ensanchen etc.. según la ventana o dispositivo.

Los .PNG (que permiten transparencias) y los JPG guardados ambos para web serían las opciones idoneas para fotografías no ?.

Seguro que me equivoqué en algo pero para ir aclarándome poco a poco. De nuevo gracias a los 2 a ver al final si me queda claro y me lo grabo a fuego en el cerebro

Carlangueitor · #5 (**permalink**) 20/11/2013, 15:45

No, los menús y elementos de la página en su mayoría se hacen con HTML y css, no es necesario usar cosas más complejas.

Saludos

TibicenasDesign · #6 (**permalink**) 20/11/2013, 15:55

Cita:

Iniciado por Carlangueitor

No, los menús y elementos de la página en su mayoría se hacen con HTML y css, no es necesario usar cosas más complejas.

Saludos

Cierto, me dejo atrás lo esencial. Entonces si lo esquematizo todo para ayudarme a mi y a los demás que tengan esta duda:

Logos en SVG

MENUS y Botones en HTML y CSS

Fotografías en PNG optimizado para web o en su defefecto JPG

Y el Background:
CSS: Si es Color sólido
SVG + CSS: Si es un patrón
PNG + CSS: Si es una fotografía

Correcto?

Carlangueitor · #7 (**permalink**) 20/11/2013, 16:00

Personalmente casi nunca uso SVG, en realidad no creas que es diferencia considerable el usar una imagen o SVG, y en todo caso el espacio que ocupan los assets de una web casi nunca es importante, el espacio en disco duro es demasiado barato para preocuparse con eso.

Saludos

TibicenasDesign · #8 (**permalink**) 20/11/2013, 17:04

Cita:

Iniciado por Carlangueitor

Personalmente casi nunca uso SVG, en realidad no creas que es diferencia considerable el usar una imagen o SVG, y en todo caso el espacio que ocupan los assets de una web casi nunca es importante, el espacio en disco duro es demasiado barato para preocuparse con eso.

Saludos

Bueno pero usted mismo me lo está diciendo, si no es un cambio considerable respecto a uno de otro, entonces mejor un SVG que no va a perder calidad la imagen

Rafael · #9 (**permalink**) 21/11/2013, 06:38

Cita:

Iniciado por TibicenasDesign

Logos en SVG

MENUS y Botones en HTML y CSS

Fotografías en PNG optimizado para web o en su defefecto JPG

Y el Background:
CSS: Si es Color sólido
SVG + CSS: Si es un patrón
PNG + CSS: Si es una fotografía

Correcto?

No, no... no.

Las fotos van en jpg. Muuuuuuuy extremadamente en casos raros van en png.
El sistema de compresión del png no optimiza fotos de ningún tipo, incluyendo cosas como pinturas.

El sistema de compresión png es apto, correcto, recomendado para logotipos, gráficas, patrones etc, así que lo usas para logotipos, gráficas, patrones de fondo.

En un menú PUEDES usar aparte jpg, o png si necesitas una imagen. No es excluyente. Si tu menú de navegación son animales de tu zoológico las fotos a fuerzas son un formato de imagen. Para un menú de texto no tiene sentido. Para eso sas pues texto.

El svg es un tema aparte, se irá usando más en el futuro, pero por un tiempo NO TIENE SENTIDO para logotipos para una web normal.

El sistema svg por ser vectorial te permite hacer zoom. En una página web no necesitas hacer zoom a un logo. el svg se usa para diagramas donde necesitas que el usuario interactúe con tal imagen, pero incluso para esto tal vez conviene que descargue un archivo, digamos un pdf para imprimir en su casa.

CSS es algo que A FUERZAS tienes que utilizar, no es para poner fondos sólidos, sino para formatear TOOOODA la web. Para fondos incluso puedes hacer degradados. Tu mismo lo repetiste en tu tablita para todo.

No veas las cosas tan cuadradas. Entiende a fondo los ingredientes y luego haces tus ensaladas.

Carlangueitor · #10 (**permalink**) 21/11/2013, 15:21

Cita:

Iniciado por TibicenasDesign

Bueno pero usted mismo me lo está diciendo, si no es un cambio considerable respecto a uno de otro, entonces mejor un SVG que no va a perder calidad la imagen

Creo que la única pega podría ser los filtros que hay disponibles con SVG, aunque como dice Rafa yo usaría SVG para algo que en verdad necesite serlo.

Saludos