Image Basics

bymavhryc

72 followers

Updated 9 years ago

I have quite a few years of Graphic Design experience under my belt in both Print and Digital, I thought I might list a few digital graphic Basics that might be helpful to those getting started online.

I'm trying to see if I can style my WA blogs but I still don't have the hang of it here.

Hope this is helpful!

• DPI (dots per inch):

With web graphics the images's DPI isquite inportant, you want to ensure that you have a dpi (dots per inch) of 72dpi which is standard for screen/web and keeps the file size small and quick to load when on your webpage, on a computer and mobile device. You may have heard of 300dpi this is for print and really increases the file size and load time to view the image online (long loading and heavy images can cause people to avoid your website and miss out on your product/service).

• Color Mode:

Color mode is the color setting of your image, it can come in RGB, CMYK, INDEXED, and Greyscale.
• CMYK (cyan,, magenta, yellow, black) is more for print jobs
• RGB(red,green,blue) is most commonly used for web images, it's a name is made up of "#" and a series of letters or numbers, you can see a useful example of a RGB color picker here.
• Indexed used to describe reduced color mapping of 8-bit or less(simple colors) useful in reducing file size.
• Greyscale is used for black and white images and if you don't need color this color mode is great because it reduces file size.

• Recommended Image File Formats:

There are tons of file formats when you hear about digital graphic in general but when dealing with web graphics, you'll want to keep these 3 in use for compatibility ease of use:

• JPEG or JPG is short for Joint Photographic Experts Group:
  This format seems to be the most universal, it's very "lossy" (means it has lost most of the original graphical data and file size is lighter).
• GIF: (Graphics Interchange Format)
  Small file size with few colors, supports transparency and can do simple animations - Animate GIF.
• PNG (Portable Network Graphics):
  2 types of PNG png-8 (better on light-white backgrounds) & png-24 Both allow for transparent backgrounds but png-24 is better quality and has a slightly larger size.




This is from my site: http://makealivinglovingit.com/web-graphics-useful...

Thanks for reading!