Skip to main content
R
r_tist
Inspiring
November 23, 2017
Answered

retina display imgs

  • November 23, 2017
  • 1 reply
  • 3681 views

Hi,

Was reading that if you can double the size of an image and then cite the pixel w & h in the img tag (downsampling) this will suffice for the crisp, non blurry appearance of images for retina display screens.

I suppose I am wondering how that affects loading times? Is the fact that you mention the w & h somehow compressing to keep the load time at its optimum speed?

Please explain, thank you.

    This topic has been closed for replies.
    Correct answer pziecina

    r_tist  wrote

    Hi,

    Was reading that if you can double the size of an image and then cite the pixel w & h in the img tag (downsampling) this will suffice for the crisp, non blurry appearance of images for retina display screens.

    The doubling the size of the image, no longer works. That was for the original iPhone/pad which was 180ppi, currently most hi-dpi displays are 300ppi, and whilst text is not affected, images are.

    Ps and most people who use it for the web, uses 72ppi as its base measurement, which has not been used on macs since the late 90's, and was never used on windows. The current base standard acording to the w3c is 96ppi, and the generated content spec now tells users to create and offer images as near to the device ppi as possible.

    To do this i would suggest you read up on srcset and picture element usage, (also takes into account users connection speed).

    1 reply

    pziecina
    pziecinaCorrect answer
    Legend
    November 23, 2017

    r_tist  wrote

    Hi,

    Was reading that if you can double the size of an image and then cite the pixel w & h in the img tag (downsampling) this will suffice for the crisp, non blurry appearance of images for retina display screens.

    The doubling the size of the image, no longer works. That was for the original iPhone/pad which was 180ppi, currently most hi-dpi displays are 300ppi, and whilst text is not affected, images are.

    Ps and most people who use it for the web, uses 72ppi as its base measurement, which has not been used on macs since the late 90's, and was never used on windows. The current base standard acording to the w3c is 96ppi, and the generated content spec now tells users to create and offer images as near to the device ppi as possible.

    To do this i would suggest you read up on srcset and picture element usage, (also takes into account users connection speed).

    R
    r_tistAuthor
    Inspiring
    November 28, 2017

    This is the most informative article I discovered. Many articles are rejecting and frowning upon using the <picture> method.

    https://learnedia.com/responsive-images-srcset-attribute-picture-element/

    Let me zero in on the nugget of important info, used in the example in the article:

    <img src="hero-big.jpg"
    srcset="hero-small.jpg 450w, hero-medium.jpg 960w, hero-big.jpg 1500w"
    sizes="(max-width: 552px) 450px, (max-width: 1062px) 960px, 1500px"
    alt="Learnedia Hero" />

    So I am to have 3 versions of each image to ensure faster loading? 

    Here is my specific use case:

    portfolio image w: 402px x 622px (h)...  I open this up in Photoshop and with iMac retina display what used to appear as 100% and a 'decent' acceptable size, displays at half the size! So at 100% in Photoshop, it visually looks like 150-200px; looks like a thumbnail!

    The 402 x 622 (actual size presented on a website) appears slightly fuzzy on the retina screen because it is "registering" as 200% magnification for the presentation in the portfolio.

    I am unsure how to go about creating portfolio images going forward based on the dimensions I have. Again, perfect for non-retina - but would like to start making the switch going forward. Do I stick to my original plan of doubling my dimensions and offering those up as a small and medium option and cite as the srcset?

    Thank you. Want to get to the bottom of this!

    pziecina
    pziecina
    Legend
    November 28, 2017

    The only thing wrong with using the picture element is that older html5 aware browsers and devices do not recognise it for styling purposes, and like a number of the newer html5 elements a shiv is required.

    That said, srcset is worth starting to learn and use, but lack of proper support in most code editors make using it difficult but not impossible, and the media-query like construct is the feature most people will have problems with.

    We no longer use px dimensions when creating the various images, but instead decide how big we want the images to be dispayed across the various viewports, then create the images at the image size, (in inches) at the correct ppi for the images. Which in general are 96ppi, 180ppi and 280ppi.

    It is worth creating a code snippet or a macro for the srcset code you find is best for you, as then you only have to change the image file names. Also create your own method of naming files so that it is easy to know which files belong to which srcset, (we place each set in its own folder). You can make using srcset, (and the picture element) as easy, (or as difficult) as you wish it to be, but once you do have a workflow using variations in image size and ppi density only takes a little more time than using just one image.

    Once you are happy with using srcset, then experiment with using different images, (or cropped images) using the picture element, as that is the picture elements intended usage, and significantly expands what one can do using images.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices