Basics of Digital Image Sizing
One of the most common mistakes made by new My Artisan Web users is to use excessively large image files on their websites. Understanding some basics of digital imaging is essential to having photos or other visual art display properly on your website. In digital imaging, "large" can refer to two different measurements: file size and dimensions.
File size is measured in kilobytes, and refers to the amount of memory space a file takes up on your computer or website. File size can be thought of as the "weight" of the image, with some files "heavier" than others.
Dimensions are the height and width of the image. Dimensions are always measured in pixels, NOT in inches or centimeters. New users sometimes struggle with measuring images in pixels rather than a more familiar measurement. For a better understanding of pixel dimensions, check out this excellent tutorial on resizing and inserting images.
There is a relationship between file size and the dimensions of an image.
Digital camera owners know that you can set your camera to take pictures that are of higher quality, and thus are "heavier" in file size. The better quality of the pictures, then, the fewer pictures you can take, because "heavier" files use up the available space on your camera's memory card quicker. The typical digital camera is automatically set to take photos that you can print on paper at at a significant size (4" x 6" at 300/350 dots per inch - dpi - or even larger ) and still have a picture look crisp and clear. A typical digital photo takes up at least 600-800 kilobytes (kb) of space, and so the image file has plenty of data in it to print a large copy that looks like a real photo from film.
Images on the web, however, can be much "lighter" in file size, because the typical computer monitor screen simply can't display all that data anyway (72 dpi as opposed to 300dpi). Images on the web might be as "light" as 10% of the size of the original file, and will look just as good as a "heavier" version would. This concept is becoming increasingly important because of the heightened use of mobile devices with limited data plans.
Because images prepared for the web still look great on a screen while being much smaller in size than images prepared for printing, My Artisan Web encourages you to edit and resize images to meet our size standards. These standards are meant to help keep your site looking good and loading quickly. Image files larger than 75kb will slow down your website and will put unnecessary load on your users phone or tablet and slow down your site.
However, keeping your images "light" is only half of the standard. Maintaining appropriate image dimensions is equally important.
As we stated above, an image can remain relatively large in pixel dimensions and still be relatively "light" in file size. This is done using an image editing program to "compress" the file size while maintaining the image's dimensions. Having tall and wide images that are also "light" in file size doesn't necessarily mean the best of both worlds. Placing an image that is too tall or wide inside an article can distort the way the image or text around it looks. Consider for a moment the incredibly variety of computers, web browsers, and monitors that your web audience will use. These days, it's likely that someone will view your website on their cell phone! Keeping images relatively narrow is important.
In addition, tall and wide images made "light" through compression can also make a picture look grainy and/or degraded.
My Artisan Web recommends that most of your images be no more than 600 pixels wide, especially if they are going to be embedded with text. While you can certainly display images wider than 600 pixels, you should be very cautious, and preview the article often to be sure a wider image doesn't "break" the article or display awkwardly. No image should exceed 700 pixels wide except under very rare circumstances like an artists portfolio or lightbox preview. Because the height of an image can be viewed by scrolling down a web page, a tall picture is much more acceptable and tends to display better.