Retina-images again

  • Author
    Posts
  • #939316

    Here’s another CSS solution that looks good:

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
           only screen and (min-resolution: 144dpi) {
        /* Style adjustments for high resolution devices */
    }

    Found via http://girliemac.com/blog/2012/08/03/resolution-in-media-queries/

    #939317

    pixelcounter
    Member

    Okay thanks again!

    However, the problem remains that I still really don’t know what to do with the code.

    I mean, where do I put this image etc. background:url(‘http://pixelcounter.files.wordpress.com/2012/07/pixelfitted2x.png?

    #939318

    You would replace the comment line

    /* Style adjustments for high resolution devices */

    with your background and background size rules.

    Regarding which media query solution to use, I threw a lot of information at you in all of those links. :) Keep in mind that the examples we’re talking about for setting retina images using CSS are currently being discussed and evolved by web designers around the world—so there’s not necessarily one definitive answer for how to do it. What you should do is look over the examples, test them, and then decide which works best for your target audience.

    Looking back at the example I posted on Jul 9, I think it should work. I did a little extra digging, and I found that there’s an issue reported where “WebKit on Retina iPads will downscale the image and then upscale it again, leading to a significantly uglier image.” The workaround is to save JPG images in progressive mode or a PNG should work. For details, see http://www.quora.com/CSS3/What-is-the-best-method-for-adding-2x-images-to-webpages-that-will-be-displayed-on-the-new-iPad-with-Retina-graphics

    I see you’re using PNG though, and it seems that should be good, but it made me wonder if the problem could possible be with the type of PNG you saved (this is kind of a wild guess). Would you be willing to try the Jul 9 solution with a progressive JPG?

    In addition, I researched the issue you reported where the built in custom header image upload didn’t work by default. I found that if the theme you are using supports flexible header images, then it will work as long as you select the “Skip Cropping, Publish Image as Is” option on step two in the Appearance → Header page (it only appears if the theme supports flexible headers). If your theme doesn’t support flexible header images yet, then you need to use a CSS solution. Here is a list of which themes currently have flexible header image support:
    http://theme.wordpress.com/themes/features/flexible-header/

    #939319

    pixelcounter
    Member

    I see you’re using PNG though, and it seems that should be good, but it made me wonder if the problem could possible be with the type of PNG you saved (this is kind of a wild guess). Would you be willing to try the Jul 9 solution with a progressive JPG?

    The header-image I used was actually PNG-8 so I could try using PNG-24 instead if that makes any difference. A progressive JPG is unfortunately out of the question since the background of the header needs to match the BG-color of the site seamlessly and JPG doesn’t support alpha-channel, I believe.

    If your theme doesn’t support flexible header images yet, then you need to use a CSS solution.

    It seems the theme I use doesn’t indeed support flexible header images according to the list you provided, so CSS that is :)

    Thanks again for all the support!

    #939320

    pixelcounter
    Member

    So, I uploaded a new header image formatted as PNG-24 and used the earlier CSS -code but no cigar.

    Everything works fine on an iPhone but not on an iPad.

    #939321

    I was able to get someone with a retina iPad to check http://pixelcounterrr.com/ and they’ve let me know the Pixel Counterrr header image does indeed look retina when they check it.

    Perhaps try clearing your browser cache.

    1. Go to your iPad Home screen
    2. Select the Settings icon
    3. Select Safari from the drop down list
    4. Tap on Clear cache
    5. Confirm when prompted

    #939322

    pixelcounter
    Member

    Ok, very much appreciate the information. Everything indeed works now fine on the iPad and iPhone retina screens.

    However, when I checked out the site with a MacBook Pro Retina the header looked fine but other images didn’t, even though they work on other retina devices.

    This is especially baffling to me as WordPress just made a big deal out of the new retina-friendly image uploading system.

    #939323

    Good to hear that everything retina is working on iPad and iPhone for you. No changes were made, so I think they were working all along. I think if the retina images are working on your devices, they should be working on your retina laptop as well. Are you certain you’re not viewing cached versions? Also, just to make sure, are you certain you were looking at images that have large enough original file sizes when you tested from your laptop? Can you provide an example URL where you are currently seeing the problem happening? I will find someone to help test it from our side.

    #939324

    pixelcounter
    Member

    I was just testing the site at a store quickly, but still noticed that any of the newly updated retina-images weren’t working as they should. So, it’s impossible I was looking at a cached version.

    For instance, the images here http://pixelcounterrr.com/thesis/ appear right on iOS devices but not on retina MacBook Pro.

    #939325

    Thanks for the info. It’s always worth double checking the basics to start. I’ll post back once I hear back from some other testers.

    #939326

    All right. Testing on our side shows that the images are indeed showing as retina. Can you please try clearing your browser cache on your MacBook Pro?

    #939327

    pixelcounter
    Member

    Thanks for the investigation, very much appreciated. Like I told earlier, I only tested the images quickly at the Apple Store on a MacBook Pro retina, but I can assure that the images (sans the header) didn’t work but were blurry standard-resolution ones.

    Well, I have to go and check again if it was some setting in the browser or something like that.

    Thanks again!

The topic ‘Retina-images again’ is closed to new replies.