resolution

Basic math determines Image Quality

When it comes to the topic of IMAGE QUALITY, most people are lacking some vital information (and common sense logic), which I believe can help you (and anyone that cares to learn) a whole lot.

Most people focus on the ‘megapixels. Those are basically the dimensions of an image.

For example, 1920x1080 = 2,073,600, or basically ‘2 Megapixels.’ While an image that has the dimensions of 5472x3648 = 19,961,856, or basically 20mp for all intensive purposes.

While those numbers are relevant, especially if you are cropping into that image… or trying to make it bigger, the reality is that it is the dpi (dots per inch) for print, or ppi (pixels per inch) for screen resolution that are really the MOST important.

The “PI” absolutely impacts the 'quality' of the image, much faster and much more than the 'dimensions' in most cases (even when just displaying, but especially when enlarging or cropping images smaller than their current size).

If you take a small 200x200 block, leave it the same size, but increase the dpi... the average person will NOT see any difference with the naked eye!

However, the 'math' and logic are simple. It's basketballs vs soft balls vs bb's, and limited to the display and what a person can see... but also WHY and HOW they 'can see' that image is determined by stuff far different than just dimensions.

Background: Most cameras capture a certain dimension (it’s ‘megapixels’) at 300dpi. It then has basically two options: a) JPG (compressed, and the most common), b) RAW (uncompressed), this difference plays a part in the ‘color depth’ (JPG’s are compressed down to 256 shades of 256 basic colors, while RAWs are 16.7 million shades of 16.7 million colors, huge difference in photo editing… and the final edited print, but little difference in unedited images.

Next, and how RESOLUTION impacts WEBSITE SPEED.

The old CRT (catho-ray tube) displays were limited to 72dpi DISPLAY (regardless what the starting image quality was, the displays have a maximum of what they are capable of displaying... and it's not until you drastically enlarge an image (zoom in) beyond their established dimensions that you 'see' pixilation). Somewhere I have an old full page 'production monitor' that was a whopping 144dpi, which cost me over $5000 back in the early 90's... just do I could gain more accurate 'actual' viewing quality at the size that would be printed, without losing much quality. 72+72=144, which meant I could zoom in 200% or crop the image by 50%, and either way I’d still SEE perfect screen resolution. The actual image may or may not have been actually changed, depending on the process. If you think of the enlarging process like a rubber band being PULLED, it thins out the further it’s ends are pulled away from each other.

The newer LCD & LED changed things... from Dpi to Ppi (dots per inch vs pixels per inch), though most people that have been 'in the industry' for years still refer to the 'dots,' though 'pixels' is more correct today, and both are technically 'dots' made up of RGB (red, green, blue) 'dots' (pixels) that have variable intensities, that ultimately can, in combination with each other, make up the visual spectrum of about 16.7 million different colors, shades, and shadows. The terms 'dpi' and 'ppi' are somewhat interchangeably, but technology jumped from the 'basket balls' (72dpi) up to soccer balls (96-120ppi) for their display capability standard, and even the best displays still have significant room to improve... however, the limits of the human eye generally make pushing the limits less worthwhile, except for the most creative that might actually CROP INTO an image (and still want a good clean sharp resolution after the crop).

I’ve heard some monitor and tv sales people claim that the math is the “actual display resolution divided by the actual inches of the display.” But that is an over-simplified thought, failing to accept that there is an inherent limit to the 'size' of the actual pixels.

Monitor/screen manufacturers have been notorious for 'over selling' and over stating their displays actual dimensions for decades. Obviously 1920 bb's lined up would look significantly different than 1920 basketballs lined up... both 1920, both 'dots' (or pixels). But it is the SIZE of those dots is ultimately the 'resolution' limitations that particular display will have.

There is also a factor of ‘proximity.’

How close we are to the screen. Los Vegas and Times Square in NYC prove that, with their tiled mega screens and animated bill boards. From a distance, those large screens making up that bill board on the side of a building appear as 'pixels' ... the closer we get, the larger they get, and soon we can see they are a bank of screens stacked together to display the larger image.

Generally, a native 800x600 image is 800x600, is an 800x600 on any display, any website... capable of, but limited to, displaying just 800x600.

Some people will claim there is absolutely no difference in the image quality - regardless of dpi (ppi) unless the image is printed... which is true ONLY if they image is never ever displayed above that 800x600 size.

Those same people are, however, absolutely wrong IF or WHEN THAT SAME IMAGE IS EXPANDED, ENLARGED, OR CROPPED IN (thinking the 'new version' will be display at the same 800x600 dimensions the original was displayed). Composition material aside, you can compress a basketball, but it's impossible to enlarge a bb (and maintain the quality, integrity, and appearance). Same with over inflating that basketball to twice its normal size, distortion is necessarily created.

Some of the newest LED displays (ie real 4k) have gone up to as much 192dpi/ppi (note: 723=216, but 962 = 192). Understanding that 1920x1080 (standard HD Quality) is 2 megapixels, it makes sense that 4k (4 megapixels) would be the next logical step up.

To the best of my knowledge, today, there is nothing in the private sector capable of displaying (visually) anything higher than 192ppi (that a normal human being can afford). Frankly, it doesn't much matter, because the average human eye can't easily see anything 'crisper' than that (until the image is enlarged or magnified). The vast majority of the screen sold today are still down in the 96dpi range.

The dpi most easily determined WHEN THE JPG IS CREATED... If the jpg was created IN CAMERA... is usually still captured at a highly compressed 72dpi (which is usually great up to about 8x10 PRINT Sizes, because the dimensions are higher than what is required for 8x10 prints) without losing any more detail in the image than necessary. However, a RAW image is nearly 10 times the file size, for an image with exactly the same dimensions. CAMERA RAW is generally the highest quality most cameras are capable of capturing at, and usually requires a secondary program (like PhotoShop) to ‘post-process’ and export to a printable file type. .

Without getting too geeky...

Size Differences = data differences

Responsive
TIFF Images

The same image taken in a 20mp camera… with the same colors, same size (dimensions) of 5472x3648, the CR2 (RAW file) is 19,669KB, whereas the JPG (Large-Fine, same dimensions) is just 2,801KB. That really is a huge difference, because of resolution, compression, and color depth.

If, however, the image was brought in through an image editing program, then it would depend on the settings of that program, and how the images are 'normally used' out of that program. For example, programs that are 'designed' for PRINTED picture manipulation are often 'defaulted' to a print ready dpi (220 minimum, often 300) when they save the files, whereas a 'web image editor' might be set to a default of just 72 or 96dpi (which are usual web sizes). This is a prime example of using the right tool for the job. While you can hammer in a nail with a screw driver, it’s not as effective as using a hammer; and the claw on a hammer might be able to remove a screw, it’s unlikely it can do it with the same ease or efficiently as a screw driver.

Some cameras capture TIFF format (which is either uncompressed, or significantly less compressed... and far more robust than the JPG. However, the TIFF is usually not as full and flexible as the RAW (completely uncompressed, with max data). RAW is what Professional cameras can use (and is recommended); however, many people still choose to shoot JPG (or TIFF) because 100% of RAW images require post-processing (converted to something else) 100% of the time, to be viewed by other people off camera (or used on a website).

Choose from the large selection of latest pre-made blocks - full-screen intro, bootstrap carousel, content slider, responsive image gallery with lightbox, parallax scrolling, video backgrounds, hamburger menu, sticky header and more.

Sites made with Mobirise are 100% mobile-friendly according the latest Google Test and Google loves those websites (officially)!

Mobirise themes are based on Bootstrap 3 and Bootstrap 4 - most powerful mobile first framework. Now, even if you're not code-savvy, you can be a part of an exciting growing bootstrap community.

Megapixels and Dimensions be damned

unless you’re shooting bill boards, or drastically cropping into an image, as they are far less meaningful than the DPI when it comes to the actual image QUALITY, flexibility, and file SIZE. Unless you’re selling images to be printed, there is no reason to have images above 2mp posted on a web page.

Even on our professional photography site, when we had the active ‘store’ section running: watermark or not, the Original Images are never ‘displayed’ – they are held in the background, accessible only to paying customers, and then only to the size they paid for. What is seen on the website are the thumbnails, catalog (about 2 to 3 times as big as the thumbnail), and the proof (usually 800x600, or 1024x768 max… 96dpi). So, IF someone copied or stole my images, they wouldn’t ‘get’ the original, or anything that could be reasonably printed larger than 8x10 with any hope of quality & clarity.

Photoshop has a 'quality' slider, when saving JPG images (in the ‘save as’ option)... 2 (lowest, often pixelated with the slightest enlargement, but lightening fast on the web… but will look terrible if enlarged). On CS6, the highest level is 12 (which is the highest quality, least compression – and can usually be printed or displayed at 2-300% zoom without degradation or pixilation, but will necessarily have a much large file size... and slower display time over the internet). Lightroom also has an option in the export mode to alter the dpi to nearly anything, within reason.

Without actually GOING TO THE DETAILS of the image... which are found in the properties ON THAT individual image file... you can usually customize the folder view (in any version of Windows, but also MACs) to include ‘other things’ (besides name, date, file size). Dimensions and either horizontal resolution or vertical resolution (which should be the same number) are what I usually select. The DPI will be under the resolution column, for all but RAW images (which will be blank).

It's honestly tough to impossible to say what the dpi of a given image is by just looking at it on a computer screen in its original size (or smaller). The visual difference between 72dpi and 96dpi is subtle on most screens, and anything past 96dpi is absolutely lost on the vast majority of screens and eyeballs. However, once you start enlarging or zooming in, 200 to 300%, or more, even with the best of LED displays, you’ll quickly see exactly what I’m talking about.

When it comes to image displays... it's ALL MATH

A 640x480 image that is 300dpi (dots per inch), has 3 times the data (the dots of information) than the same 640x480 image that is 100dpi, which has about 30% more data than the same image that is only 72dpi. The file size gets lower as the DPI drops... because DETAILS in the image are also sacrificed… losing ability to enlarge, but also some depth, clarity, sharpness, and shades.

For web sites, file size matters the most 99% of the time. Impacting load times, band width, as well as quality factors; but it also plays a role in search engine results. SEO (Search Engine Optimization) looks at file size (and page load times). Two different sites with basically the same info, the same keywords, the same quality of backlinks, the faster and more efficient page will win… getting higher search engine placement and ranking.

So, SIZE MATTERS!

Web sites are generally dynamic or fluid on a display, because of different 'window sizes' - browsers & display resolutions, some images may be automatically enlarged on higher resolution displays... while others might be shrunk as the display or window is reduced in size.

By the same token, a 640x480 image that is 9600 dpi (a popular scanner resolution) can be significantly enlarged (about 64 time it's original size) without losing much quality, because the RAW DATA INFORMATION IS THERE (in the dpi)... allowing the expansion (enlargement, zooming, and cropping in).

So, while many claim that image 'size' (megapixels or dimensions) matters the most, it really depends on RESOLUTION, which a person may or may not have as much control over. Most stock, and professional digital images, are controlled by resolution… because it allows them to control the size and quality more. That’s the sense of reality added into the decision making process; it is far less about the dimensions than it is about the DPI.

I’d rather have a 9600dpi wallet size image, than a 72dpi 8x10… FOR PRINT and post processing/editing. The 9600dpi is actually able to be expanded to 20 times larger. However, for WEB display, nothing above 96dpi is necessary and ultimately controls the speed an image will be displayed (and more dpi can’t be seen on a screen, unless the image is enlarged).

My process:

I try to capture at the HIGHEST dpi (RAW) I can, with the most megapixels (dimensions)… FOR PRINT, posters, bill boards, and cropping into an image. I can ‘cut’ 50% of a 20mp RAW image in half, and still have an image that can be printed on banners or even a bill board. That’s almost impossible it I was starting with just a 2mp image.

Once I have the image, I then look to the digital needs… figure out WHERE and HOW an image will be used.

That will determine the max size I need. I’ve learned, over the years, that if I think I might EVER want or need that image used in print, it’s always best to START with that, and then do a ‘save as’ to get the lower resolutions I’ll need for the website(s). I adjust the image accordingly, for website displays – there are usually DIFFERENT VERSIONS:

1. original (never actually ‘loaded’ on a page, as it’s going to be large and slow… but may still be downloadable, and used as an additional offsite ‘backup’ just in case).
2. full screen (web) approximately 1920x1080, 96dpi, max ~ there is no sense in having any image larger.
3. half screen (web)
4. mobile (not over 960 on the long edge)
5. thumbnail (not over 200x200)
The images are never over 96dpi, and seldom over 1920 wide or 1080 tall (1920x1080 are HD wide screen dimensions, and will also display nicely on 4k screens).

Consider, mobile devices, which makes up about 65 to 75% of the actual internet browsing these days (2018). The vast majority of those devices (smart phones of tablets) seldom actually display any images larger than 600x960 (or 960x600, depending on orientation), even if they might ‘claim’ more… they are just ‘compressing’ (shrinking) the larger size stuff into a smaller window (like making that 8x10 a 3 x 5, though everything is ‘there’ it is absolutely smaller and more compressed on the smaller screen). The shrinking tightens things up, usually making them appear both smaller and a bit crisper.

There is little sense, today, to burden the vast majority of the population and growing mobile market with anything over 1920 wide, and frankly most of my stuff is seldom over 1440 wide… because it upscales well, and is even better for smaller screens. It is frankly silly, and poor planning, to force 4k image sizes over a WEBSITE platform designed to enhance MOBILE VIEWING. The majority of web users aren't capable of viewing the web at even 1920x1080, 96dpi (in reality).

Any image on a 'home page' that is more than 2MB in size, without some absolutely justifiable reason (which I honestly can’t think of), that web ‘developer’ should have their 'admin’ access taken away, if it happens repeatedly. Their choices are costing that business clients!

For Websites - Loading speed is vital

and the vast majority of pages should be loading in 1.5 to 6 SECONDS, not 30 or 60+ seconds, and dang sure not minutes!

There is NO REASON for an opening page, the index.html (or default.html) to ever have any image over a 4k 192dpi size, which is about 5mb in actual file size. Most all 'images' on a web page should be UNDER 1MB... with very few exceptions. IF (or when) someone is intending that image to be COPIED FOR PRINTING, have the high-res version load on a SEPARATE PAGE - DIFFERENT LINK - for the person willing to wait for the HIGH RES version to actually load up!

Having huge files on a website costs storage space, but more importantly time, bandwidth... speed, storage space on mobile devices (especially), all of which equates to TIME & MONEY!

The ONLY exceptions, today, would be IF the image is a 'gigapan' or 360 image - where a person can drastically zoom IN TO THE IMAGE (like Google Earth's aerial mapping, or landscape vistas, or individuals in stadium type settings (which are still usually gigapan type images)),

The key factor is to RESIZE FOR THE WEB - to the MAXIMUM dimensions you have designed your website to be displayed at... but also SCREEN RESOLUTIONS (rather than print resolutions)... 96dpi maximum, rather than 300dpi (which necessarily, and mathematically, is a 300% difference in file size for the exact same image ON DISPLAYS (obviously not the same for print).

~ To Be Continued...