Optimizing images for the web

OPTIMIZING IMAGESFOR THE WEB

Or, “Why do my pictures look weird?”

Friday, April 12, 2013

AGENDA1. Lossy vs. lossless compression

2. Comparison of JPG, GIF, and PNG

3. Free image editors - Pixlr, Google+ Image Editor, GIMP

4. Real world examples & uses:

1. social media: Facebook, Twitter, Pinterest, LinkedIn, Google+, and YouTube

2. live examples: katharineholmes.ca

Friday, April 12, 2013

LOSSY VS. LOSSLESS The trick with image files is to make sure that the images aren’t too large, or they will take too long to load on your website, Facebook page, Twitter account, or Pinterest page.

Image file types are used to encode digital images. Compression is important, which is why there are so many choices: image files can be quite large, so the goal is to make them smaller to make downloading easier and faster.

The most common file formats are JPG, GIF, and PNG.

Lossy vs. Lossless compressionYou will often hear the terms "lossy" and "lossless" compression. The question is “What are they?” Simply put:

Lossless compression means that no information is lost in the image. A lossless algorithm looks for a recurring pattern, and makes a shorter version, reducing the file size.

Lossy compression reduces file size by compressing the data in the file – ie: reducing of the number of colours – thus making it smaller and easier to transmit digitally.

Low compression (84% less info than uncompressed PNG, 9.37 KB)

Medium compression (92% less info than uncompressed PNG, 4.82 KB)

High compression (98% less info than uncompressed PNG, 1.14 KB)

Friday, April 12, 2013

JPG VS GIF VS PNG

JPG/JPEG files

• best for images with smooth tones: ie: gradients, photographs

• Uses “lossy” image compression, which means some image quality is lost when it’s saved to 72 dpi

• cannot have transparent background

• amount compression can be adjusted, depending on how small you want/need the file

• most common format saved by digital cameras

GIF files

• maximum of 256 colours - best for simple shapes, limited colour palette, text elements

• “lossless” compression – image quality not obviously sacrificed

• support transparent backgrounds and animation. These were the culprits behind all those animated “Under Construction” graphics in the ‘90s. Now they are mostly used to show celebrities tripping on their way up to get an Oscar.

PNG files

• gaining popularity. Work well in newer browsers, but don’t “play well” with Internet Explorer.

• better compression, colour, and transparency than GIF files

Friday, April 12, 2013

IMAGE EDITORSThere are lots of photo editing software on the market, some of which can be quite expensive. Most of us don’t have the resources to purchase Photoshop, so what’s out there that’s free? Here are just a few of your options.

PixlrPixlr (pixlr.com) is a great free, online image editor. It operates similar to Photoshop, and even looks alike. There are a few different options:

1. Pixlr Editor This is the advanced editor. This is perfect for anyone familiar with other image editors. As you can see, there are menus at the top, a toolbar on the left, and palettes on the right. As I said, this is very similar to Photoshop and other editors.

2. Pixlr Express This has a much simpler interface with 5 buttons: Browse, Open URL, Webcam, Collage, and Mobile. This is perfect for a quick-edit project. Browse allows you to upload an image from your computer, Open URL opens an image from your browser, Webcam takes an image from your webcam and opens it on the Pixlr site, and Mobile takes you to a download page for their mobile app.

3. Pixlr-o-matic Allows you to use your webcam or open an image from your computer. You can then add filters, effects, and frames to the image. Basic, but fun!

Friday, April 12, 2013

Google+ Image EditorGoogle+ offers a simple image editor, for hours of fun!

Basic Editor options:

1. Crop Pretty straight-forward: cut out the unnecessary parts of the image.

2. Rotate Oriented your photo horizontal, instead of vertical? No problem!

3. Exposure If the Auto-Exposure option doesn’t work for you, you can always adjust highlights, shadows, and contrast according to your tastes.

4. Colours Adjust the saturation, and colour temperature of your image (cool vs. warm)

5. Sharpen Crisp up that image. Be sure you don’t do this too much, or the image will look pixellated. Clarity will brighten and emphasize the your image.

6. Resize Make the image larger or smaller. Making an image smaller usually isn’t a problem, but when enlarging an image, make sure you don’t enlarge it too much. Web-optimized images tend to get “fuzzy” when enlarged too much.

Effects:

There are many image effects you can add to your image to change the mood, colours, and fix up your image (there’s even an airbrush!)

Decorate:

This is the “fun” part of this editor. Add face paint, doodles, speech bubbles, beards, and masks (and so much more) to your image.

Text:

Add text to your image. There are lots of fonts available. Vive le Grumpy Cat Memes!

Friday, April 12, 2013

GIMPGIMP is an acronym for GNU Image Manipulation Program. It is a free, downloadable image editor, professional quality photo retouching program, image format converter, and MUCH more. Add on your favourite plug-ins and extensions, and you’ve got yourself a pretty awesome program to do whatever you need!

As with other image editors, you can correct image colour, contrast, and brightness. You can also sharpen or blur an image, fix perspective (how many times have you taken a photo only to notice it looks kinda warped or skewed?), remove red eye. It’s a full-featured image editor for free!

It is available for download in for these systems:• GNU/Linux (i386, PPC)• Microsoft Windows (XP, Vista)• Mac OS X• Sun OpenSolaris• FreeBSD

Friday, April 12, 2013

SOCIAL MEDIA SITESEach social media site has different parameters for the images used on the pages. I’ll go over the most popular ones.

FacebookFacebook has these distinct areas to add images:1. Cover image This is the large image at the top of

your Facebook page. It can be any image you like. For example, on my page I’m using a photo I took. Dimensions: 851 pixels x 315 pixels. Use JPG - other images will be converted.

2. Profile picture This is usually a photo of yourself, so people know it’s you. Many times, though, people use other images, like kittens, puppies, and their kids. Dimensions: 200 pixels x 200 pixels. Use JPG - other images will be converted.

3. Favourites/App Boxes This area is where images of your followers, your photos, and your “favourites” show up. Dimensions: 111 pixels x 74 pixels.

The trick with images on Facebook (and other sites) is to make them larger than you need. Here, the profile picture is 200 x 200, but I’d recommend increasing the dimensions so that when it’s clicked on and made larger, the image won’t end up pixellated like the poor dog earlier in this presentation.

Friday, April 12, 2013

SOCIAL MEDIA SITESTwitterTwitter has these distinct areas to add images:1. Background The background image on your

Twitter profile can be personalized using a photo or solid colour. Personally, I recommend a solid background, so you don’t have to deal with tiling issues. That being said, a seamless repeating pattern also works well.Dimensions: 2000 pixels x 1200 pixels.

2. Profile picture As with Facebook, most people use a photo of themselves, but quite often you will again see kittens, puppies, and superheroes. If this is for a business page, I would recommend against a superhero. While you may think you’re super, it tends to look unprofessional. Companies usually use their logo.Your profile picture is 128 pixels x 128 pixels, but Twitter will resize it for your mini-avatar that is next to your tweets.Dimensions: 200 pixels x 200 pixels.

Friday, April 12, 2013

SOCIAL MEDIA SITESPinterestOn a Pinterest page, you need an image for:1. Avatar What you use for your avatar depends

on whether or not this is a business or personal page. For business pages, I would either use the company logo or an image that is somehow associated with your company. For a personal page, you could use a photo of yourself.Dimensions: 180 pixels x 180 pixels.

Friday, April 12, 2013

SOCIAL MEDIA SITESLinkedInLinkedIn is a business networking site, so I would suggest any imagery used be professional-looking.1. Avatar For a personal page, this could be a

professionally-taken photo of yourself, or your company logo. As mentioned on the graphic to the right, use an image larger than the default viewing size (100 pixels x 100 pixels). This will ensure that it looks good when zoomed in to it’s full size of 200 pixels x 200 pixels.Dimensions: 200 pixels x 200 pixels.

2. Company Page Banners When making a LinkedIn page for your company, you’ll be putting a banner at the top of the page (similar to the cover photo on Facebook). This is in addition to your avatar. This provides space for additional branding and promotion. Dimensions: 640 pixels x 220 pixels.

Friday, April 12, 2013

SOCIAL MEDIA SITESGoogle+Google+ is growing in popularity for business and individuals. You can group people according to interests, or how you know them. Services include a constantly-updated stream of people sharing interesting articles, “Google Hangouts” (or as we used to call them “Chat Rooms”), instant messaging, social gaming.1. Single Banner For my Google+ page, I have an

abstract image that is similar to the back of my business cards.NEW Dimensions: 2120 pixels x 1192 pixels.

2. Company Page Banners An alternate way of displaying a cover image (banner) is in a group of 5 images. Dimensions: 110 pixels x 110 pixels.

3. Profile Image A photo of yourself, or your company logo.Dimensions: 250 pixels x 250 pixels.

Friday, April 12, 2013

SOCIAL MEDIA SITESYouTube1. YouTube is a great way to video blog, educate

people about something (for example, this presentation will be posted on YouTube in the next few days!), share important events with family/friends/fellow business people.

2. Avatar Either your face or your company logo.Dimensions: 1600 pixels x 1600 pixels (YouTube says 800 x 800). The trick is to make sure it sizes also down well to 36 pixels x 36 pixels. It’s a balancing act.

3. Channel Background Make sure this image will view well on various screen sizes. The last thing you want is your image to be indistinguishable!Dimensions: 1500-2000 pixels x 1200-2500 pixels.

Friday, April 12, 2013