pixel disparity between DW and PS [Branched from 4 yr old topic]

[RossMan]

Having the same issue. My display is making things in photoshop look super small because of the hi resolution display. Ok, no problem, but shouldnt it still look the same in DW as well? 

[Nancy OShea]

You resurrected a very old discussion so I branched this to a new one for you.

It's all relative.  Hi resolution displays with 226 PPI are like an Olympic sized swimming pool compared to average displays with 96 PPI which are more like an inflatable kiddie's pool.   A 500 x 500 px image looks like a postage stamp in an Olympic pool but normal in a kiddie's pool.  So what can you do?  Increase magnification settings Ctrl +++.  Revert to normal magnification with Ctrl + 0 (zero).

Alternatively, use Illustrator to create vector graphics which are not resolution dependant.  Scalable Vector Graphics are math-based, not pixel-based.  So they can be rescaled to whatever size is required without any loss in quality.  SVG is ideal for icons, text, charts, drawings, comics, cartoon puppets, infographics and other flat colored images. 

Source: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

[Liam Dilley]

Not sure what you mean in Photoshop.

You can always zoom in and out on that.

If you are working on a file size of 50pixels by 50 pixels then its going to be small - Zoom in a bit to work on that.

In terms of making images for the web...

If you want to consider retina based displays in your images:

Photos:

Photos will obvisly be as is and you do want to optimise for web in photos but there are a few things you can do.

As a basic method if you just have the IMG element you can just look to have a double size of the image you want and then CSS or width height parameters on the image and it will scale down half - this will look sharper.

For true responsive images you take it a step further with use of the <picture> element and have images of different sizes.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
With a CMS like Umbraco you can do these automated from one image and get a great output and content management experience.

In terms of graphics:

You would look to do the double image size and CSS in terms of a jpg or png but as Nancy has pointed out you would be looking to make SVG's for scalable graphics and in terms of Icons I even go further and make font icon sets for websites these days.