-4

Para una pagina web cuales son las medidas recomendadas de imagenes para: Fondo Slides de al menos 3 imagenes. Cual es la calidad que se recomienda. Muchas gracias.

4
  • 1920x1080 pixeles el 7 ago. 2018 a las 12:59
  • Me parece que lo importante debería ser el peso en bytes. @VeroenBaires te sugiero revises el documento Cómo preguntar para que tengas una idea de como preguntar y obtengas excelentes respuestas, no olvides realizar el recorrido de bienvenida del sitio, saludos!
    – Jorgesys
    el 7 ago. 2018 a las 15:04
  • 1
    Existe una pregunta parecida, te podría decir lo mismo que dije en su momento: no existe una respuesta definitiva. Hay maneras de definir diferentes imágenes para diferentes resoluciones. Deberías aclarar tu pregunta y añadir más información (p.e. las dimensiones de tu proyecto y del carrusel/slides, lo que hayas investigado, etc).
    – Alvaro Montoro
    el 7 ago. 2018 a las 20:41
  • El tamaño del alto y ancho de pixeles depende de la resolución de las pantallas. Te recomiendo que sea superior a los 1280px de ancho y, sobre la calidad de las imágenes, siempre tienen que ser de buena calidad. Ahora si por calidad te refieres al tamaño en bytes de las imagenes, asegúrate que estas sean menor a 1 mega. Si estas trabajando con photoshop, puedes guardar imagenes en buena calidad y livianas usando la opción archivos>exportar>guardar para web. Espero que te haya ayudad y que en otra pregunta seas más específico.
    – V4L3R14
    el 8 ago. 2018 a las 14:26

1 respuesta 1

-1

Respuesta objetiva

No existen unas medidas recomendadas para tamaños de imágenes.

Más bien te diría que cuides mucho el tamaño de las imágenes según el ancho mínimo y máximo en que deberá mostrarse en los dispositivos y su peso.


Recomendaciones @g3kdigital

Yo he desarrollado, desde mi propia y subjetiva experiencia, un manual con respecto a esto (que para algo soy diseñador), pero son mis recomendaciones no las de toda una comunidad.

Por ejemplo:

  • Si la imagen en móviles mide 400px, entonces su ancho debe corresponder a 400px
  • En pantallas retina, se recomienda cambiar al doble o @2X, es decir, siguiendo el ejemplo anterior a 800px.
  • Si son imagenes de fondo o que siempre cubren el ancho del dispositivo, las dimensiones deberían ser desde
    • 960px a 1200px de ancho
    • y unos 480 a 960px de alto.
  • Si puedes permitirte media queries para cada imagen, entonces
    • A partir de 1320px cambia el tamaño para un ancho mínimo de 1440px hasta un máximo de 2600px
    • Y en altura un máximo de 1200px.
  • Yo además preparo otro tipo de imágenes para los diseños full-width y full-height, que solo cargo en un media query cuya dimensión supere los 960px de alto y la orientación sea portrait ya que acá las imágenes las exporto desde 1600px a un maximo de 2000px tanto en anchura como en altura.

Lo anterior es más o menos un incordio para un desarrollador, pero en mi caso es un deber ético, más que una responsabilidad impuesta.

Si lo anterior te parece muy tedioso, entonces procura mejor cuidar el peso de las imágenes, depende mucho del tipo de la imagen, pero en lo posible si usas photoshop exportar con la opción guardar para web o instala el plugin de tinypng.com y si no tienes los 50 dólares que cuesta lo mejor es que una vez exportados los pases por la web o alternativa similar. Incluso ya desde illustrator puedes exportar distintas resoluciones abreviadamente o desde photoshop crear una "action" que automatice las distintas exportaciones segun tamaños.

Yo en tu caso, las exportaría a la mitad de una resolución máxima (así solo se vean a un tercio) es decir:

  • En móviles (960px / 2) = 480px.
  • Retinas = 960px.
  • Monitores = 1300px.

Aunque los más puristas, dirían que lo dividiese entre 3 y no en 2, porque así lo vas a usar.

En cuanto rangos de pesos, yo te recomiendo que:

  • Una imagen puede pesar en promedio 60-200kb y un máximo de 450kb (0.45mb)
  • Si pesa igual o más de 0.8 mb después de exportada y comprimida, trato de sacrificar dimensiones en su anchura para quede en máximo 0.65mb, aveces funciona mucho usar en photoshop un "desenfoque de superficie" en la imagen.

Para iconos a color, uso SVG (sin respaldos png porque vivo al extremo!! jajaja), para iconos a un solo color, creo mi propia fuente a partir de otras fuentes usando fontastic.me y metiendo los iconos que hagan falta o directamente uso fontawesome. Los svg puedes comprimirlos aún más usando SVGOMG.

En cuanto a la automatización con distintas resoluciones hay un proyecto llamado: RetinaJS que sigue la convención del iphone de @2x @3x etc.. o sino puedes crear un simple script por js, que cambie el src de las img. Eso si trato de que todas las imágenes que tengan estas variantes en resolución tengan un sufijo de _@1x para poder detectarlas discriminando de las que no tienen variaciones.

En cuanto al css y las background-image, trato de usar siempre variables css, de esta manera solo tengo que reemplazar en el media querie las variables en el body en cada query, algo así:

:root{
  --img_fondo-01_1X: url('http://picsum.photos/1200/600');
  --img_fondo-01_2X: url('http://picsum.photos/1600/900');
  --img_fondo-01_3X: url('http://picsum.photos/2200/1080');
  --img_fondo-01_2Y: url('http://picsum.photos/600/1600');
}

body{
  --img01: var(--img_fondo-01_1X);
}

@media (min-width: 960px){
  body{
    --img01: var(--img_fondo-01_2X);
  }
}
@media (min-width: 1360px){
  body{
    --img01: var(--img_fondo-01_3X);
  }
}
@media (min-width: 1360px) and (orientation: portrait){
  body{
    --img01: var(--img_fondo-01_2Y);
  }
}

Como ves, en resumen lo que hago en el css es:

  • Alistar todas las imágenes que vaya a usar en todos los proyecto en el root mediante variables más semánticas.
  • En el body renombrar las variables más semánticas por variables más standar, así las puedo llamar en el proyecto sin complicarme recordando el nombre, solo el número.
  • En los media query, siempre que lo necesite, solo debo cambiar las variables en el body y no me complico, cambiadola en cada selector.

Para variaciones de tema, simplemente asocio las variables a una clase en el body, algo así:

body.theme01{
  --img01: var(--img_fondo-05_1X);
}

@media (min-width: 960px){
  body.theme01{
    --img01: var(--img_fondo-05_2X);
  }
}

Y listo. Es una respuesta genérica, pero espero te ayude.

PD: Cualquier cosa, deja tu comentario y un voto +1 a la respuesta no estaría mal ☻.

1
  • 1
    Genial muchas gracias por tu explicacion! el 9 ago. 2018 a las 0:06

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.