CSS - Como hacer que una imagen no se pixele

 
Vista:

Como hacer que una imagen no se pixele

Publicado por Francisco Daniel (12 intervenciones) el 03/08/2020 19:30:38
Hola a todos. Quiero clocar una imagen de fondo en el header de mi sitio que ocupe todo el ancho de la pantalla pero que no se pixele, es decir que no se distorcione. Esto se puede hacer con CSS o tengo que modificar la imagen?

Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Kathyu
Val: 111
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como hacer que una imagen no se pixele

Publicado por Kathyu (26 intervenciones) el 03/08/2020 22:29:46
Imagen de gran resolución y cover de fondo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 668
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como hacer que una imagen no se pixele

Publicado por joel (152 intervenciones) el 04/08/2020 11:13:20
Hola Kathyu, no me queda muy claro... podrías ser un poco mas especifica?

A que te refieres con "cover de fondo"??
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kathyu
Val: 111
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como hacer que una imagen no se pixele

Publicado por Kathyu (26 intervenciones) el 04/08/2020 11:47:10
Claro, creo que a veces me falta explicar un poco, generalmente lo hago de buena manera, con el propósito que el que hace el post lea, busque, y averigüe un poco

Con lo de "cover" me refiero a

1
2
3
4
5
6
7
.image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Image cover the entire container */
}

Y acá un concepto mas normal del cover: Cuando se usa una imagen como cover con background-size: cover; la imagen cubre todo el contenedor "que la contiene" y por eso decía que debe ser de gran tamaño, esto me ha salvado muchas veces. También hay que saber que en la background-positio adecuada la imagen se verá de una u otra manera

Acá lo principal es que no se pixelee, entonces si o si debe ser una imagen de gran resolución y que no sea muy pesada.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de joel
Val: 668
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como hacer que una imagen no se pixele

Publicado por joel (152 intervenciones) el 04/08/2020 11:56:45
ah, muy interesante Kathyu, gracias por la explicación!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 136
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Como hacer que una imagen no se pixele

Publicado por Lopez (33 intervenciones) el 05/08/2020 22:28:42
Solo añadir que la solución de Kathyu no soluciona esto en realidad.
Pixelado es muy distinto a distribuir/ocupar espacio como lo hacen las las opciones de la propiedad background-size.
El pixelado es un tema que pasa por la calidad y tamaño de gráficos. Para esto recomiendo uses svg o webp (lossless), o bien guardes la imagen en un tamaño mayor. Podrias añadir una opacidad o blend via css, esto usualmente ayuda a esconder el pixelado.

Claramente el usuario autor no responde ni se ve interesado, pero queda el apunte para un futuro .
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como hacer que una imagen no se pixele

Publicado por Francisco Daniel (12 intervenciones) el 06/08/2020 00:26:50
Hola, gracias por responder. Estos días no tuve internet, por eso no respondí. Voy a probar tu sugerencia. Muchas Gracias por tomar tu tiempo y responder.

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar