Viewing Retina HD @3x

Retina HD @3x



User: Christopher 11 years ago
Have you heard the rumours? Looks like the next iPad will have HD Retina and require @3x images to fully take advantage of this. When will it end??

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 11 years ago
Adding retina images using @2x is the Apple way of doing things and is kind of obsolete. I don't bother using it at all anyway. How many of your visitors are using Retina devices to view your full size websites?

If you are bothered abut such things you should be using the Srcset attribute. It now has fairly wide support with modern browsers.

Here's how to use it and note that you can go to 4x so sucks to Apple's@3x stuff!

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: John S. 11 years ago
3-4 years ago I dismissed mobile traffic because it was <5% of my total site traffic. Today it is 30-35% and with the mobile users comes mostly high resolution ("retina") screens. There are also HDPI laptops and 4K monitors (which are very rare in my analytics data). Overall, I'm guessing 25-30% of my audience is on some type of retina grade screen. It's reach a tipping point and I'm trying to address it.

Image srcset is the solution for 1X, 2X, 3X, 4X, etc. More here. Image srcset is supported in some browsers, but not others. You can check the status here: http://caniuse.com/#feat=srcset

Fortunately EverWeb supports @2X and I don't need to do any additional HTML. I'll support to 2X, but that's it. 3X and 4X sized files will result in even larger files, thus slower page loads. In 5 years I'll probably be struggling with 4X files, but for now, 2X is good enough (for me).
User: Roddy 11 years ago
As most of us are aware, the biggest factor in causing a web page to perform poorly in the browser is the size and number of images on the page. Apart from movies of course!

I think everyone should ask themselves the question. "What is the purpose of this image?". Is it to provide illustration to support text content or a work of art where visitors are going to gaze at it in admiration and appreciate every fine detail?

Like a lot of surfers, I am impatient and use the internet to find answers to all these question marks floating around the remains of my brain. I don't look at slideshows containing dozens of images. I wonder at the size of the ego of those who do include more than half a dozen. What makes these "webmasters" think that I want to waste my time - and data allowance - looking at this stuff?

Download speed is of the essence - especially for the Home page - and, in most cases, it's hard to justify using an image that is wider than the actual web page. I see EverWeb users putting the same image file on both their full size site and the smart phone version. What are they thinking?

Say I create my main site at 800px wide which is the optimum nowadays when you are restricted to two versions of a fixed width website. I import an 800px wide image and a retina version at 1600px. When viewed on an iPhone, the retina version is about 5 times the width of the screen!

Forget about retina and srcset and provide images that get the point across with the minimum file size. If you really need to show your visitors every crack and crevice in a rock face in Yosemite, provide them with a link to a full size download that they can view full screen on their new Retina iMac.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.