Convierte imágenes de sprites a retina display

Hola a todos, tengo un conjunto de íconos como sprites para y en las pantallas de retina, los íconos se ven muy borrosos. Leí algunos documentos para la pantalla de retina, use la imagen como 200% (usando Photoshop). Ahora, la pregunta es ¿cómo cambio todo el sprite como retina? imagen compatible guardando todo el sprite como 200% ah o seleccionando una capa separada y cambiándola como 200% y luego guárdala como sprite ah guíame.aqui mis duendes

así es como uso sprite para retina y normal

para pantalla normal

.logo {
background:url('../images/big-icons.png');
  background-position: -241px -289px;
  width: 217px;
  height: 69px;
}

.footer-logo {
background:url('../images/big-icons.png');
  background-position: -239px -359px;
  width: 217px;
  height: 69px;
}

para la retina

@media (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) { 
    .logo{
    background:url('../images/big-icons@2x.png');
    background-size: 200px 100px;
    background-position: -375px 0; width: 434px; height: 138px;
}

.footer-logo{
    background:url('../images/big-icons@2x.png');
    background-position: -375px -158px; width: 434px; height: 138px;
}

}

las imágenes se repiten en retina display... cómo escribo estilo sprite para retina display...

Para consideración futura: use SVG en lugar de PNG. Los SVG son escalables y evitan que tenga que crear varias versiones para pantallas retina.
Además, su hoja de sprites debe estar en algún tipo de cuadrícula lógica con cada imagen individual unida por un cuadro invisible del mismo tamaño para que sea práctico.

Respuestas (1)

La borrosidad se introduce durante el escalado.

Si está proporcionando dos conjuntos de imágenes, trabaje en el tamaño 2x y reduzca la escala para el segundo conjunto, modificando cualquier parte que muestre problemas después del escalado (a veces, las reglas y los bordes, etc., se vuelven demasiado delgados y deben aumentarse {etc, etc}) .

Si está proporcionando un conjunto de imágenes, proporcione el conjunto de dimensiones de píxeles más grandes. Pero tenga en cuenta que la escala del navegador puede ser mala.

Entonces:

(1) La ampliación al doble de las imágenes ráster es un problema de calidad, especialmente en el momento de la visualización, renderice ambos conjuntos usted mismo y nunca le pida al navegador que lo haga.

(2) al renderizar en " dispositivos retina ", el sistema operativo y el software a veces cambian sus unidades , por lo que no se respeta lo que solicitó ( codificado ) . Esto se puede manejar en el código, pero debe estar atento a los problemas. No recuerdo los detalles porque hago muy poco trabajo web directo, al menos profesionalmente.

Una última cosa: no confíes en vistas previas simuladas para evaluar la calidad visual.

EDITAR

Menciono "dispositivos retina" con respecto a no respetar los tamaños de las unidades, pero esto es tanto un problema del navegador móvil como simplemente "retina". La razón por la que se requieren imágenes "retina" y el esquema de nombre de archivo @ 2x es porque el sistema operativo y el navegador en dispositivos con estas pantallas conectadas están alterando deliberadamente los números: están intentando arreglar el tamaño de visualización física, lo cual es un problema muy peliagudo dado el variedad de tamaños de pantalla y capacidades.

Convierte imágenes de sprites a retina display
RespuestasAquíPolítica de privacidad1y, 0v