They look fine on a web browser on a MacBook Air, but on a phone, they look pixelated. I tried making them 144dpi instead of 72 and it made no difference.
Heres the website homepage www.ashleyhalcyone.com
and here’s the page where I’m having the problem www.ashleyhalcyone.com/about
Thanks for any help
DPI is for print and not websites so it’s not going to make any difference.
If want a higher resolution image for “retina”(hi-def) displays like iPhones than you need to have a stack that supports a hi-def image.
A brief look at the page in question and it looks like you are using standard “stacks images” stack, that does support Retina images (NOT the new stacks Site-image).
They’re 400px at longest side. So if I made them 800px, they would just be displayed twice as big. How do I tell stacks to make them retina images?
Regardless, they look worse than a regular non retina image should I think. They’re falling apart.
Thank you
I looked at the page on my iPhone 7+ and the images look nice and sharp. Try clearing the data from the site in Settings on your phone. Sometimes Safari on iOS caches images very aggressively.
Sorry I read this before on my phone and missed the link for how to scale the images in stacks to make them retina images. I just redid them at 800px at the longest side at 72dpi and then scaled them 50% and then I opened the page in chrome on my iPhone which I’d never used before on this site, so no caching going on, and they bloody look the same! The top image is much worse, but I find it strange that doubling the resolution didn’t do anything.
I’m not seeing that on the web page above? Looking at the source code I don’t see the srcset statements that a stacks image stack will produce when you do the 50% scale. So you are seeing the same images.
I don’t see “Pixelation”, and as I pointed out above you didn’t successfully “double” the resolution.
The top image is a 298x408px image. I’m not a photographer but it looks washed out(overexposed background). That and having it on a white semi-transparent background doesn’t help.
I changed the background to almost black and it stands out more, but still not a great image.
I see it in her face especially. Yeah they’re overexposed, not my style, it’s one of those “looks” where you fuck up the image in LR and people think it looks cool. I could have fixed it a bit but I just respect the photographer.
Here’s screenshot proof that they are 800px longest side, and I set scale to 50%.
I’m looking at what is actually on the page on your server, Whatever these screenshots are of didn’t make it to the server.
This is from the actual source code that gets loaded from this link (http://www.ashleyhalcyone.com/about):
This is what the HTML img statement should look like if it has been set to 50% scale and uploaded to the server:
So if you made the changes in RW, they didn’t get published.
I don’t think on the top image you’re going to get a good image unless you use some Photo Editing Magic.
But of course I resized them, otherwise they would be huge.
Weird. Maybe it’s time to wipe the server and republish all files.
Yeah I could make the first image look better to me, but it’s not my website. They’re also jpegs which I hate editing.
Not sure what you mean here,
I’m talking about the screenshots you posted from RW not Photoshop. What you show in RW didn’t get published.
Imho I would wipe the server of the images and republish all from rapidweaver. I swear I recall having publishing issues when changing an image, keeping the same file name, placing back in rapidweaver and publishing. I could be making that up 
but I feel I remember it happening in the past. Good safe bet, and way to narrow down the issue is scrub and repub, then see what the results are.
I deleted all files and republished all files. And it bloody looks the same!
What’s the code look like? Is it still not publishing retina images?
I can’t see the problem. The top image is a bit hazy whatever you do with it, but the image under the tree is very sharp on my iPhone
I’m actually not seeing the issue either (as far as I can tell) on my iPhone 8. Images look sharp. @Spacemonkey can you post some pics of what your seeing on your browser?
The code still shows just a single 408px wide image being loaded, It does not have a srcset with retina image alternatives.
When you say they are pixelated, as you seeing that when loaded or are you zooming in on your phone to see pixelation?
No I’m not zooming in I’m a photographer I know better than that.
Is there some CSS or other code I could use to make them publish as retina images? The stacks method clearly isn’t working.
Here’s a screenshot of how the first image looks on my phone. Her face is like 2 giant pixels.
Thank you
Here’s a link to download it from my iCloud Drive.
It’s not a CSS thing but the actual HTML on the page that creates the <img tag with a srcset attribute.
And the basic image stack does work perfectly.
I just replicated your setup:
And I generated the 2 images for each photo and sets up the HTML image tag with the proper srcset attribute.
I don’t have the original images that you are using so I just used some NASA images I have.
So something you are doing isn’t working. The Scale has to be exactly 50%, 49% or 51% will not generate the srcset attribute. Also, could you change something else on the page to make sure the publishing is working okay?
There are addon image stacks that are set up to handle retina displays. However, without a well-prepared good quality image, they can only do so much.
Here’s one that works well, there are others available.
I was really careful they’re both definitely 50%. You can check out my screenshots above to see all my settings
Can I add html code to the page?
They must be publishing because I deleted all files from the website on my server and the got published back up. (Unfortunately I deleted my images for the pro photo gallery stack so that’s not working till I load them to my hosting company again)
Okay,
I’m replying here incase others might be following.
I got the project file from you (DM) and had a look.
Okay,
I don’t have a clue as to what was wrong. I notice on the two images when I opened them they looked to be set okay. They weren’t creating the proper HTML srcset to enable the Retina images to display.
So I just went into each photo (double-Clicked) and re-typed the 50 and hit enter on the Scale on both and magically they both started working. The HTML is being created with the two images and the proper srcset attribute.
The 50 was there to start, but for some reason stacks didn’t pick it up.
Anyway,
I exported the project after changing and published if you want to have a look:
https://dev2.teefers.com/about/
It’s still not a great picture but check it out on the iPhone, it does look better i think
It looks way better!! My God. So what I did is use the scale slider to get it at exactly 50%. Coming from photography I’m used to having to be exact with scroll bars.
But that didn’t get Stack’s attention for whatever reason. They wanted a typed in 50% evidently. Totally crazy on the behalf of stacks. Pretty big fail.
But I’m glad you figured it out! Thanks so much for looking and your help
Whitney
