In some previous Salient support posts I've heard that you can save an image at twice the size so it appears crisp on retina screens. Not twice the ppi, but twice the pixel dimensions. In theory, it would take that larger image, shrink it by half for non-retina screens (due to the pixel density) and it would display crisp and clean regardless of the pixel density of the screen. In other words, it would be smart enough to know when to shrink it down to normal size based on the screen. So far, it seems to make perfect sense in theory.
But I'm running into issues. I've got a graphic that I intend to render on non-retina screens at 270 x 270. So I save it at twice the size (540 x 540). When it renders on a non-retina screen, it appears at 540 x 540 instead of the intended 270 x 270. Am I missing something? Is there something I need to do in the wp admin area to mark it as a retina image so it sizes appropriately for different screens? How does Salient know if I saved it at double size for retina purposes? Do I need to add a class to the image? Javascript? Inline css? I'm just not clear on how this retina stuff works. I hope I'm explaining the source of my confusion properly. Thanks!
As of now the only way to handle this would be to upload the image at 2x in general - theres no swapping for this yet. If you're looking for a swap based on device it would require a plugin like this: http://www.cssigniter.com/ignite/retina-images-for...
In some previous Salient support posts I've heard that you can save an image at twice the size so it appears crisp on retina screens. Not twice the ppi, but twice the pixel dimensions. In theory, it would take that larger image, shrink it by half for non-retina screens (due to the pixel density) and it would display crisp and clean regardless of the pixel density of the screen. In other words, it would be smart enough to know when to shrink it down to normal size based on the screen. So far, it seems to make perfect sense in theory.
But I'm running into issues. I've got a graphic that I intend to render on non-retina screens at 270 x 270. So I save it at twice the size (540 x 540). When it renders on a non-retina screen, it appears at 540 x 540 instead of the intended 270 x 270. Am I missing something? Is there something I need to do in the wp admin area to mark it as a retina image so it sizes appropriately for different screens? How does Salient know if I saved it at double size for retina purposes? Do I need to add a class to the image? Javascript? Inline css? I'm just not clear on how this retina stuff works. I hope I'm explaining the source of my confusion properly. Thanks!
Hey ,
As of now the only way to handle this would be to upload the image at 2x in general - theres no swapping for this yet. If you're looking for a swap based on device it would require a plugin like this: http://www.cssigniter.com/ignite/retina-images-for...
Cheers
ThemeNectar Support Team