Exporting for web

[louiser32014908]

Hi there,

I'm very new to web design so apologies if the answers to this question are obvious!

I'm designing on a retina screen, and am trying to export my images which need to be super-sharp (they look fab in XD), so I click on the image I need, and follow instructions to save as a png at 2x,  but for some reason they save at about half the size and are very blurry.

I have been trying all sorts of tricks, and the best solution at the moment seems to be to go back to my original photoshop file, set the image size to DOUBLE the pixels that I need (at 300dpi) then save for the web as a 1x JPEG. This keeps things sharp, then if I bring it into XD to check, it is the right size. However, I have been reading that 2x is best when exporting - but I have tried that at 100% pixel size in photoshop, and things still look blurry.

Hope this makes sense!

Is there a correct way to do this at all? I feel like I'm in a minefield!

Thanks in advance

[elainecc · Accepted solution]

I'm writing up a longer explanatory blog post about it (you can watch @adobexd or my own Twitter account, @elainecchao for an announcement about it), but the short answer is: set your export to "Designed At" 1x instead of 2x.The @2x version of the file should be the size you want.

-Elaine