retina display and the internet
- Started
- Last post
- 16 Responses
- autoflavour
so.. anyone out there with a Retina display macbook pro?
does the internet look blurry? I remember there being a big noise before it was released about how the internet will look crap..
was this the case?
i am just rebuilding my site, and i am trying to future proof it a bit.. but i dont want to have every image on my site be retardedly large..
anyone?
- Christian0
Yes it does.
- Nutter0
yeah got the same problem, there are java scripts that will detect wether or not the user has a retina screen and show either a large retina image or a standard one.
you could try the following script:
http://retinajs.com/
- autoflavour0
is it significantly terrible?
- nb0
You should learn a bit about media queries and designing for retina before you decide.
- colin_s0
this is such a pain in the ass to design for.
- tank020
Blurry indeed. That's why i had my site developed retina ready...
http://consultancy.coffeeklatch.…
- colin_s0
from everything i've read it's based in creating double-wide images and reducing via CSS for standard screens, or showing at full res for retina displays correct?
but how does this affect responsive design, when images are displayed in percentages / scaling widths as opposed to direct pixel widths? do you just export for 200% of the max width of the column/div the image will be displayed in?
- autoflavour0
my question is more about load times..
sure having a nice retina display is good.. but if you live in an country where the internet isnt amazing (looking at your Australia), then surely having everything you looking at double scaled is going slow everything down massivelyor am i missing something
- arne0
i'm working on my first retina job right now. building at 220%.
good bye pixel :,(
- inteliboy0
you know what looks blurry? going back to normal 72/96 density screens. Yikes.
- Nathan_Adams0
It's not too difficult. Try to use as few images as possible around the site (in favour of typography and icon fonts). For images, use lower resolution images, but have references to higher quality ones as data attributes, and then use javascript to detect screen size and whether it's retina or not and swap in the appropriate size.
- sem0
I heard the quality is so significantly better than you can actually see the NSA agents hiding in your browser.
- autoflavour0
been doing a bit of research.. what seems to be an easy solution is just have all your images at double resolution.. but compress the fuck out of them, like 15%..
on non retina they get scaled down and the artefacts shrink also, and on retina its a higher density so they also get obliterated.
i just did a test, instead of a 1280x720 image at 55% being 140kb, increased it by 200% but then compressed it at 15%.. file came out around 130kb..
but then loaded on my site, and flicking between the 2, i could see absolutely no difference..
- which shits me no end, as i just spent the last 2 days making a shitload of galleries, which now will need to be remadeautoflavour
- autoflavour0
you dont even need to go online.
just go into photoshop, go create a large image, go into save for web and switch between Original and optimized at 50% scale..
its impossible to see the glitches
- Christian0
^
After that, take it even further and run the images through ImageOptim
http://imageoptim.com/
- mekk0