1) If I want to have Full home page design, we need to keep 96 DPI and Width of 1900 x height of 900. Am I correct? or different Width & height
2) Can I simply change the resolution from 72 DPI to 96 DPI and let photoshop uses it own algorithm to improve resolution enhancement?
I must stress again, discard your notion of DPI. It is not really that relevant to web because DPI is not fixed from one display to another. When you see the media query using it, they can using it to differentiate devices and to present different image renditions. These days between we have normal DPI displays and retina displays and with the mixture of mobile devices of various high resolution displays, that's why the DPI is used.
Even so, when you have 1900pixels across a display as large as 32inch or as small of 4inch. To fill up the display horizontally, you will need 1900pixels across. It doesn't matter if the image is 300dpi or 72dpi. I hope I make this very clear. So please throw the dpi concept out of the window. That's for hardcopies like your photo print out when you are talking about metrics like centimetres, inch, feet, hectare etc. Suppose if I want a 4R(4x6in) photograph and I want to print at 300dpi, then the image I need should have 1800 pixels across in landscape.
In the digital world presentation, DPI is not really applicable in this matter. Read this
http://stackoverflow.com/questions/...-or-is-it-irrelevant-when-building-for-retina
3). What the best option? Save for Web with 30% Quality or Export as Jpeg with 50% quality?
Save for web is just a convenient tool for you to choose in various web raster file format and then manipulate the settings and you can preview the effect and see if the filesize fits your requirement. It does not do anything different from if you, for eg: change the RGB model to an indexed RGB model and then change the colour index table from 256(8bits) to 16bits(4bits).
Allow me to explain further. Even if your screen is 1900px across, it doesn't mean you need to use a 1900px in width image. You can scale the image at client side to whatever size you wish and let client interpolation take place. If you image is only 190px, and you need to scale across 1900px in the browser, and it means 10x scaling. Obviously, your image will look blur. But if your image is just 950px across, then the scaling is only 2x and 2x on the mobile is actually not obvious at all. Even in desktop, it will only only slightly blur, not that worse. It's like viewing 720p video vs 1080p video on your desktop. In exchange, you get not 2x less pixels, but in fact 4x less pixels (assuming image aspect ratio is maintained). This means, the bytes you saved in pixel resolution gives you the ability to compress less.
The more you compress your image using JPEG technique, the more original data you lose. For different image type, the effect can be visually significant. The most obvious one is obviously lose in details, which can be alright for some image usage. Compressing too aggressively can result in noise-like artefacts generated in sharp edges areas. Blocky artefacts are also created as a result due to discontinuity in the macro blocks within JPEG.
You can observe these effects as such
Rather you want to just have a lower resolution image with higher quality image, so the browser will scale up and create a slightly blur but pleasing looking image.
For mobile, because screen asset is physically smaller. That's why higher compression artefacts and blurring is less pronounce. Hence you are encouraged to have different image size and quality rendition to tackle mobile devices.
Allow me to show you a demonstration of how different size images of same quality compression looks when scaled across the same browser width.
The images below will show 4 files from top to bottom - #1-1900px, #2-1425px, #3-950px, #4-475px
Code:
$ ls -lh Test*.jpg
-rw-r--r--@ 1.8M Aug 21 02:22 Test1900.jpg
-rw-r--r--@ 1.1M Aug 21 02:24 Test1425.jpg
-rw-r--r--@ 511K Aug 21 02:24 Test950.jpg
-rw-r--r--@ 140K Aug 21 02:25 Test475.jpg
Code:
<html>
<head>
<style type="text/css">
img {
width: 100%;
clear: both;
border: 1px solid red;
}
</style>
</head>
<body>
<img src="./Test1900.jpg">
<img src="./Test1425.jpg">
<img src="./Test950.jpg">
<img src="./Test475.jpg">
</body>
</html>
#1 and #2
#2 and #3
#3 and #4
You can see from the filesize, it dropped alot with MAXIMUM QUALITY setting. If you take a look at image #3 which is 950px, it is still looking very acceptable. This is using a browser with of 1000px.
Even if I will view it across my desktop at 1900px for a 1000px, it still looks pretty okay.
If you want to compress further, you can do so, but take note of the JPEG artifacts introduced in the process. For your image, I think a compression of the 1900px at 40% is acceptable. Lower and the artefacts will be too obvious.
If I scale down the image to 950px, I can still compress at a good quality of 80% with a resultant file size of 208KB
There are more you can do actually. The image you have shared has pretty obvious chromatic noise. Use a noise reduction tool to further reduce the chroma noise and you can achieve better quality with smaller filesize. This will just gain you marginal benefits though.
I hope what I have explained give you better understanding to image size and compression quality topics.
