WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Hi,
is there any update on adding retina-images on a wordpress.com hosted site?
I tried to upload an "@2x.png" version of an image on the server but it didn't do anything when viewed on an iPhone 4 retina screen.
However, I found out that there're some plug-ins for that kind of job but as far as I know, one can't install plug-ins when hosted at wordpress.com?
Thanks.
The blog I need help with is pixelcounterrr.com.
No plugins allowed, but did you see the last reply by designsimply in your earlier thread? http://en.forums.wordpress.com/topic/adding-retina-graphics?replies=8#post-856539
Thanks, I do remember that reply but the thread was closed before I could make further questions.
So I copy-paste that code into the CSS -field? How do I insert the @2x alternative?
Sorry for the complete lack of knowledge about the issue :)
You'll have to wait until someone versed in CSS can assist you, but I am assuming yes.
I tried to upload an "@2x.png" version of an image on the server but it didn't do anything when viewed on an iPhone 4 retina screen.
Simply uploading the image is not enough. You have to write some CSS to change out the image when whatever criteria you choose is met (i.e. such as min-device-pixel-ratio from the example justjennifer linked to).
I can help walk through an example with you. What is the link to the regular image, the retina image, and a URL where the regular image currently appears on your blog?
Ok, very kind of you!
The regular image (it's the header):
http://pixelcounter.files.wordpress.com/2012/05/pixelfitted.png
And the 2x image (actually a placeholder, I update it later):
http://pixelcounter.files.wordpress.com/2012/07/pixelfitted2x.png
Thanks!
Here's the current CSS that sets up that image—we need to know this so we know what to add in our media query:
justjennifer
designsimply#headerimg {
background: url(http://pixelcounter.files.wordpress.com/2012/05/pixelfitted.png) no-repeat top;
}Here's what you should add to your Appearance → Custom Design → CSS page to do a straight up swap of the image:
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
#headerimg {
background: url(http://pixelcounter.files.wordpress.com/2012/07/pixelfitted2x.png) no-repeat top;
}
}I copy-pasted the latter block of code and unfortunately, the image doesn't appear quite right: https://dl.dropbox.com/u/2312669/Photo%209.7.2012%2023.27.44.png
Any idea what went wrong?
Looks like you need a little more than a straight-up swap. Give this a whirl to see if it helps:
@media
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
#headerimg {
background:url('http://pixelcounter.files.wordpress.com/2012/07/pixelfitted2x.png') no-repeat left top;
background-size: 100%;
}
}Better?
It works!
Thanks a lot, man.
Could you yet provide a small hint for how'll carry on from this? Replacing the regular images, that is.
Thanks again.
I'll check into what might be available to help with this within the next few days and post back when I have more information.
Very much appreciated!
Will there be some love for WP.com users without CSS?
Apologies for the delay. Regarding regular images, we're working on that. You won't need to do anything to your CSS to make it work.
I found out in the meantime that it works right now.
You just need to have an image double the size as it will show up in the WP.com blog (p. e. 400 x 200 pixels). First insert it as usual and then go to the image properties. Change the displayed image size to the half of the original image size (pixel count divided by two, in my example 200 x 100).
Voilà: All images crisp sharp and retina ready (for MacBook Pro Retina p.e.). Have a look @ my blogs the most recent postings (mostly screenshots):
http://retinamac.wordpress.com/
http://rossau.wordpress.com/
(You need to watch them with a retina display and Safari for being able to see the effect. Maybe some WP folks with a Retina MBP will confirm.)
I didn't find out yet how you accomplish this with the header image. But with "regular" images within blog postings IT JUST WORKS as described!
I really don't know HOW it works exactly but anyway, it's great! Thanks once more to WordPress.com. Fantastic service!
Looks like some of the work the developers have been doing to get things retina-ready are getting implemented already. Wonderful! More updates are in the works.
Yeah. The WordPress.com editor has already retina icons! That's pretty awesome. Looks perfect on retina display. That was fast.
Apple has set new technical standards here. Maybe it's some months or years ahead; but sooner or later more and more displays will feature the high pixel density. I am quite sure on that.
Important fact for every webmaster, whether he owns a retina device or not: When you care about the design of your blog and want it up-to-date and most modern, you'll just have to upload the bitmap images double the size. It's easy as described in my previous posting.
Promised when you do that: WordPress.com blogs look (at least) TWICE as good as before on MBP Retina displays. Really impressive!
Hi again,
cool thing that WordPress.com now supports retina-ready images.
However, now my header doesn't work even though I uploaded a double-resolution version of it. The previous CSS-hack did work on iPhone but not on retina-iPad, so I tried removing the CSS and uploading the said 2x -version of it since the other images now work that way.
Any ideas?
I suspect that header images aren't retina-ified yet, but I'll double check to find out.
Regarding using CSS to target an iPad, you probably need to add an additional @media query for it. Here is a good set of examples from css-tricks.com to check out:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Also see the first example at
http://css3.bradshawenterprises.com/blog/retina-image-replacement-for-new-ipad/
And note that the order matters, see
http://stackoverflow.com/questions/9780189/retina-ipad-specific-css
Here's another CSS solution that looks good:
rossau@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/
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?
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/
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!
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.
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
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.
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.
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.
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.
This topic has been closed to new replies.
