Foros del Web » Creando para Internet » Diseño Gráfico »

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

Estas en el tema de ¿ Usar Imagenes o código vectorial para tu web? en el foro de Diseño Gráfico en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/11/2013, 04:43
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Pregunta ¿ Usar Imagenes o código vectorial para tu web?

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 !
  #2 (permalink)  
Antiguo 17/11/2013, 03:57
Avatar de Linton  
Fecha de Ingreso: diciembre-2011
Ubicación: Viena
Mensajes: 1.213
Antigüedad: 12 años, 3 meses
Puntos: 55
Respuesta: ¿ Usar Imagenes o código vectorial para tu web?

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.
  #3 (permalink)  
Antiguo 17/11/2013, 07:19
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: ¿ Usar Imagenes o código vectorial para tu web?

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.
  #4 (permalink)  
Antiguo 20/11/2013, 11:36
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Pregunta Respuesta: ¿ Usar Imagenes o código vectorial para tu web?

Cita:
Iniciado por Rafael Ver Mensaje
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
  #5 (permalink)  
Antiguo 20/11/2013, 15:45
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años
Puntos: 1329
Respuesta: ¿ Usar Imagenes o código vectorial para tu web?

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
__________________
Grupo Telegram Docker en Español
  #6 (permalink)  
Antiguo 20/11/2013, 15:55
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Pregunta Respuesta: ¿ Usar Imagenes o código vectorial para tu web?

Cita:
Iniciado por Carlangueitor Ver Mensaje
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?
  #7 (permalink)  
Antiguo 20/11/2013, 16:00
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años
Puntos: 1329
Respuesta: ¿ Usar Imagenes o código vectorial para tu web?

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
__________________
Grupo Telegram Docker en Español
  #8 (permalink)  
Antiguo 20/11/2013, 17:04
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Respuesta: ¿ Usar Imagenes o código vectorial para tu web?

Cita:
Iniciado por Carlangueitor Ver Mensaje
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
  #9 (permalink)  
Antiguo 21/11/2013, 06:38
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: ¿ Usar Imagenes o código vectorial para tu web?

Cita:
Iniciado por TibicenasDesign Ver Mensaje
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.

Última edición por Rafael; 21/11/2013 a las 06:43
  #10 (permalink)  
Antiguo 21/11/2013, 15:21
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años
Puntos: 1329
Respuesta: ¿ Usar Imagenes o código vectorial para tu web?

Cita:
Iniciado por TibicenasDesign Ver Mensaje
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
__________________
Grupo Telegram Docker en Español

Etiquetas: html, imagenes, navegador, pixel, servidor, vectores
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:21.