Choosing JPEG vs Vector: When Size Matters
When you need to place artwork on a small business site, personal site, blog, online commerce site, artist portfolio or similar online outlet, it's important to take into account the size of the graphic, as it has the potential to affect the loading time for your page or pages tremendously.
An Introduction to Sizes
Even if you're unfamiliar with photo sites or free stock photography, it helps to take into account the fact that every graphic image on the web uses a certain memory size that the image fills. The number of images that can go on a page is determined by the memory that each computer that views the page possesses.
If you can expect to have hundreds, thousands, or even millions of viewers, you need to take into account even the smallest memory configurations that are likely among your viewers and plan your pages accordingly so that all viewers are able to readily access your pages and images.
Fortunately, you don't have to have much technical knowledge to enable this; you don't even have to know much about stock photo sites or stock photography to deal with this constraint. But it does help to know that different graphic formats have varying file sizes and that using one format versus another for your graphics can have a big impact in how fast (or even whether) your pages load.
JPEG stands for Joint Photographic Experts Group, the body who developed this graphic file format standard in 1992. The JPEG standard has evolved over the years, but essentially it is a "lossy" bitmap format that is ideal for storing photographic images (such as those used in stock photos).
The term "lossy" means that you can select how much information the format is allowed to "lose" when storing the image. If a photo is not in the JPEG file format already, it can usually be converted to this format, and saved at the quality setting you select. If you choose the highest quality setting, the format will store the image in as close a setting to the original capture as possible, so that it will appear in the richest, most accurate possible form when it is viewed.
The downside of this is that in order to maintain accuracy, the image needs a bigger file size for all of the information being stored. Sometimes this size can be a LOT greater than say, a setting of 50 percent of the original quality; the file size increases exponentially rather than directly, according to the quality setting you select.
With JPEG, the best way to get an idea of file sizes is to try saving the same file at different quality settings and seeing how big each one is. If it's possible to test your page with each version, then you can time the loading speeds and see how the different sizes impact the page loading speed.
But remember, you are only looking at the page on your computer, with your Internet connection. Therefore, it may benefit you to either look at the same page on a "lowest-common-denominator" system or to calculate speeds of such a system proportionally, based on the connection speeds you're currently at.
Page Loading Times
A good way to test your speed is by going to the website SpeedTest.net. SpeedTest and other sites measure download speeds in Mbps, or megabits per second. A megabit is one-eighth the size of a Mb, or megabyte.
Most images are stored as a number of megabytes, usually in the single digits for screen-sized images (for example, 3.7Mb). Given that a megabit is one-eighth the size of a megabyte, you would need a speed of 8 Mbps to download an image that is 1 megabyte in size.
For an image that is 3.7 megabytes, you would need 3.7 seconds to download it at 8 Mbps or 29.6 seconds at 1 Mbps. Given that the average high-speed Internet connection in the United States operates at 11.5 Mbps, and that many web pages consist of not just multiple images but also other files, code, scripts and other components, you should probably aim to make most of your images (even full-screen ones) smaller than two megabytes each. (Remember also that people will likely be viewing your pages not just on computers, but on smartphones and tablets, as well, and so slower speeds may be likely).
There are many stock image companies that can give you pre-sized photos that will conform to the size considerations you have in mind. But in certain cases, when you need your graphics to be extra-small and you don't like the look of highly-compressed, low-quality JPEGs, you may want to think about using vector graphics.
Vector graphics are designed for lines, curves, shapes and polygons, as opposed to bitmap graphics (JPEGs are a type of bitmap; bitmaps are designed for photos). Think about a traffic sign or a diagram.
Vector graphics include type, since alphabets are just shapes that are combinations of curves and lines. As such, vector graphics are only storing numbers for point coordinates and a few color fill values. Therefore, the file sizes of vector graphics are much smaller than those of bitmap graphics.
Vector graphics can also incorporate bitmaps, the way a road sign can have a picture on it. But this is sort of like a snake eating something larger than itself; the bitmap graphic isn't really being converted, so much as put inside the smaller vector format.
When this happens the entire file size will grow to be the sum of what the two files were before the bitmap was added. Essentially, you shouldn't put bitmap (photo) graphics in a vector format because that's not what the format was designed for.
However, as a replacement for a photo, a vector graphic can be a highly efficient, smaller format to use. Ideally, you can find a vector graphic that will convey the same message as a photo.
Again, stock images may be the answer here, as there are stock art and even free image sites that feature vector graphics for you to make use of. Most vector graphics come in the EPS, PDF or SVG format. SVG is the format used on the web, so if your vector graphic isn't in this format it will likely need to be converted.