This is not me ragging on you thiis is me exploring the best way to handle retina and 4k monitors…
Physical size in pixels…
So the first thing we have to address is HOW BIG ARE THEY REALLY… Macbook pro screens are referered to as retina and that isnt 4k per se – or Ultra HD I dont thing – but that said, in photoshop cs6 on a retina macbook, a 2880 image can only be displayed at 50% zoom out. Whereas the same image in CC on the same diplay shows 100% zoom. That means that my 15″ Retina screen on my MacBook SHOULD display an image at twice the resolution, clearer…
What does that mean? It means that to show a resolution the image will have to be sx the size of the screen. So the screen rez of the macbook which is 1440×900 would require an image of 2880×1800 to display in true Restina…
And between 4k and retina specs are kinda subject to the constraints of the users computer and software… Not that this will explain anything but…
Since the rule in internet/website optimization is that you “Always code for the lowest denominator” – which means the smallest monitor, slowest connection, and oldest computer… I really should find a plugin that tracks usage on your site so we can see if your visitors would actually benefit from having the site formatted for the Highest denominator – namely your iMac with Retina display – which I will do and if you dont hear me bragging about it (installing a plugin to track visitors computers) by the end of them month – kick me in the pants to get it done…
Next topic…
Physical size in bytes…
Regardless of what size images (In pixels) you are throwing up on the server you need to be conscious of the size (in bytes) of your images before you start.
NEW RULE. Run all images through tinypng.com or tinyjpg.com. They are the same site but whichever you can remember easier, make a note of it. All uploads should go through there first.
It seems photoshop (if that is what you used) is doing a pretty crap job of compressing your images when you save them out for the site…(see screengrab of tinypng.com below)…
To work within the parameters of the existing site we need to change 3 things 1) the defined size of the slideshow. 2) Resize the images seen in it 3) change the max size for uploaded images…
- The new recommended slide size will be 2880×1260 based on my 15″ Retina and not your 27″ Retina because i think that at 5400 pixels wide will be WAY TOO WIDE for the majority of your visitors computers…
- Resave and optimize (at tinypng.com) images for slideshow… 3 images – one for Edu, Comm and Res.
- So the new max width for all images from now on is 2880 px.
aaaa
