It is important for artists to be able to comply with stated requirements when sending images on the web. For this reason I created this article which is about as clear as mud.
Imagine a photograph you have created a grid over in order to paint a large version of it.
courtesy Draw n Paint
The photograph has the same number of boxes as the painting, the boxes are just bigger.
If the boxes were pixels there would be 17 down by 13 across. the image would be 221p in size.
The problem is pixels are basically all the same size. On order to make the larger image we would have to increase the grid. We have to increase the number of pixels. When you take an image from your computer or camera and increase the amount of pixels the computer just figures out what color they would be and it looks like a fuzzy image.
Thats why all the fuss over the megapixel range of the camera. It’s ok to adjust the image down but not so good to adjust up. You have to keep an uncompressed version of each image on your computer at the highest size you can get. Each time you need an image you copy from that one and adjust size. Make sure your source image isn’t a jpeg. Make it photoshop or tiff or bmp image. A non compressed format.
Jpeg is a compressed image format. In order to save from sending every pixel across the internet the software decides which ones it needs and which it can just copy. When the software creates a jpeg it decides that a certain area all the pixels look the same so it makes a note that the sky is blue and just plugs in all the same blue pixels. It looks ok sometimes depending on the compression rate but if you keep compressing from a compressed image you get some real poor images eventually.
When I asked for an image 1300 pixels wide that’s pretty darned big for the web. It’s no problem if you have a large source to start with. The problem came when I asked it to be both 1300 across and 700 high. The odds of your image having that ratio of length to width is very rare. In order to match that specification the image has to be cropped. If you were to just increase or decrease either length or height the the image becomes distorted.
Most of the time in contests or web galleries they ask for a specific width jpeg.
A good size for a web page is 600 to 900 pixels across.
The next situation comes up when you have one of those fancy retina screens which pack more pixels in to an inch than a regular screen. Even without that fanciness we can set our screens to different screen depth which makes an image 900 pixels across look like a different size on one screen than it does on another.
In building a responsive site we make the coding of the image flexible so it can fit on a phone and still look somewhat proportional to the screen.
I wrote another article on this couple of years ago linked here. it’s a little more technical.
Jpegs and jargon
and one on jpegs here
Image degradation
If it still doesn’t make sense hire me for $50 an hour and I will do this stuff for you. It’s usually about 20 bucks to get some images tagged and submitted to a contest or show.