What do you mean by "significantly more low res"? Be specific.
Sorry the image is a screen shot and it looks like it may be compressed when uploaded to this forum. The right image in Lightroom looks pin sharp when viewed on my MacBook Pro. Hopefully you can still get a the idea.
So let's get some basic information. What are the dimensions of the photo in pixels (width and height) before you export?
What settings do you use in the Image Sizing section of the Lightroom Export dialog box.
What browser are you using to view your blog, and what blog software is being used?
The problem is the same when viewed in both Safari and Chrome. I use Wordpress for both blogs (myfunnyvalentineblog.com , and straightnochaserblog.com ). When exporting I select the highest quality (100) on the slider, and a resolution of 300 pixels per inch. I am editing and exporting in sRGB color space. Screen shot attached
I'm exporting at 640x600 pixels, and I've also tried exporting at 900x800 pixels for a different blog. It is grainy when viewed at the intended size, but if I exported the image at a much higher resolution e.g. 3000x2800 - the image is clear when viewed at the size that 640x600 is normally viewed at (for example manually resizing a 3000 pixel horizontal image to 640 pixels horizontal AFTER uploading the image to the wordpress blog post).
The problem is evident when looking at the exported jpeg file in Preview (Mac OS), NOT JUST in the uploaded file- so it's definitely the exporting process in Lightroom that is the issue, not the blog software.
I've never had this issue until recently, when I upgraded my Lightroom on my new MacBook Pro.
Thanks for looking into this for me!
You appear to be using a mac book pro with a retina screen. This makes that websites need to be programmed to feed your browser a higher resolution image than they would feed to people using a lower resolution screen. Not all websites do this correctly (most don't). I don't know if your site does this automatically. A 640x600 or 900x800 image is not going to cut it in general, certainly not at the size you are displaying it on that webpage. Generally these websites do not have this worked out well. I've written about how to do this on my blog here: Jao's photo blog: A much simpler way to serve retina displays the right images but you need to have a way of serving two versions of the image somewhere.
On your retina display, when opening a 640x600 pixel image in preview will also look bad as it will show it pixel doubled too by default. A good thing to do is to go into the preferences in preview.app, click on images and select "1 image pixel equals 1 screen pixel." Then when you open small images it should show at the real resolution of the screen. If your image is larger than the screen, you can hit command-0 and it will show the image at the native screen resolution. This assumes that you are using "best for display" in the resolution popup in the displays section of system preferences. You should probably have this set this way anyway because otherwise the 1:1 display in Lightroom does not work correctly. Your screenshot appears to indicate you have it set correctly.
Also, there is absolutely no point to using 100 quality. For most images 75-85 will be indistinguishable from 100 but will be far smaller in size. Secondly, ignore the ppi setting. It is irrelevant for online images. Only thing that matters is the dimension in pixels.
That makes a lot of sense! So essentially it's the fact that I'm viewing the exported image on a Retina display screen on my new Macbook Pro (previously I wasn't using a Retina display), rather than any changes to the way I'm exporting my images. So I need to export a larger pixel size image if I want to view in on my MacBook Pro Retina at a 'normal' screen size on either the Preview App or on the website?
If I didn't want to change any coding, can I just upload a larger image and resize it within the post? That seems to work ok.
Thanks so much!
>If I didn't want to change any coding, can I just upload a larger image and resize it within the post? That seems to work ok.
Yes that should work in general. The only disadvantage will be that people that have normal screens will load an image that is larger than they really need. Luckily because of the pervasiveness of iPads, iPhones, and Android tablets, a lot of browsing is done on high resolution screens nowadays so this is probably not impacting that many people. Also, lots of windows laptops come with HiDPI (the term for retina screens outside of the Apple universe) screens and your website will look better with higher res images on those too. The trick likely is to upload an image that is exactly twice the size in each direction as the size specified. So if you want an image of say 640x600, export it to 1280x1200 pixels and set the width and height tags on the <img> html code to 640 and 400 respectively. The pixel dimensions specified in HTML are not real screen pixels anymore nowadays and on typical retina screens, there is a resolution multiplier of 2 so to get very crisp images you need twice the resolution. I don't use wordpress myself but it should be possible to set these dimensions exactly by just going into the html code of your posts or by some other method in the interface.