Let’s face it. Most of your time spent reaching out to others is online. You’re either directing people to your website or pitching buyers and press through email since gone are the days of a good old fashioned phone call. That’s why it’s so important to optimize your photos for the web by sizing them properly because large files usually result in crashing platforms, long load times and potentially, a very frustrated end user.
Vanessa Kincaid, a designer and art director based in New York currently oversees digital design globally at Donna Karan International and shared with us her insight on why photos need to be formatted correctly for online use and the four steps to a get them web ready.
She says, “the way you format and save your images is so important, especially when sending out for press or review. Similar to a cover letter or resume, not having an understanding of your audience and end purpose could get your submission thrown to the side for lack of attention to detail or extra effort needed on your recipient’s part. Unless you are printing an image, large file formatting is unnecessary and can be detrimental.”
1. Bandwidth: There is only so much of it and currently 6 billion people trying to share it. You want to keep your files as lean as possible because all that data will use up the bandwidth. Therefore, it will take you longer to upload and send, and your recipient just as long to receive and download. Always keep a New York minute in mind.
2. Space: Data storage and space online isn’t free and there is no reason to take up room due to poorly formatted images that are 600MB in size on your or others servers.
3. User experience: There is nothing more annoying to a user than the spinning ball and slow loading files and pages. You want your viewers to see your pictures, not the loading bar because with our expectations on site speed in 2013, chances are you will lose your audience to another site.
How to Optimize Your Images for Web
For all images being viewed on a screen or posted on a website, here are four steps that will save you, and your end recipient time, and bandwidth while still ensuring quality.
1. Save as: Always save the image as a second copy or a new file as you will be compressing and reducing the quality of the image. You should keep your original photo so you can go back and edit again if necessary. With image sizing and manipulation, you can always go smaller but never the other way around.
2. File size: Images never need to be over a file size of 100KB. Pictures you take with camera will be much larger than this, and need to be compressed before sending. By doing this, image quality will not be compromised and you will probably be surprised at how good your photo will look on screen at even one-tenth of the file size. So don’t fear – just make sure to follow step number 1.
3. File type: All images should have a .jpg or .png at the end of the file name (for example mygreendress.jpg). These are the files that were designed specifically for this purpose and work best for screen. They also need be saved as 72 dpi which is a term for pixel density per square inch, print uses 300dpi and the larger the dpi the larger the file size.
4. Color mode: Images for the web need to be formatted with RGB color mode in order to be as crisp and vibrant as possible. This stands for Red/Green/Blue and is important because all screens translate color in a mixture of these three colors.For example, if an image has ever looked muted on your screen or opened in Acrobat, its’ because it was saved for a printer, which uses CMYK, a four-color process made up of cyan/magenta/yellow/black and since your screen reads red/green/blue, the colors won’t be as vibrant and beautiful as you will want them to be to show off your best work.
Expert bio: Vanessa Kincaid is a designer and art director living in New York City. She graduated from Parsons the New School for Design, and has studied at Parsons Paris and the School of Visual Arts where she developed an excitement for digital design, strategy, & emerging technologies. She currently oversees digital design globally for all brands at Donna Karan International. Her clients and past work include CBS, Tory Burch, L’Oreal, LVMH, Graff Diamonds, JPMorgan Chase, Z!nk Magazine, Aspen Fashion Week, Galvanize, Harrison & Shriftman PR, The Handbag Network, Boutine, LogJobs, & Plum Productions among others.
Emerging Designer or have a resource to share? Please feel free to contact us at email@example.com.
You may also like: