Presentation about choosing the correct resolution and file format (jpg, gif, and png) for images on the web, and an introduction to image editors (Pixlr, GIMP, and the Google+ Image Editor). Also includes information on optimizing images for social media platforms (Twitter, Facebook, YouTube, Pinterest, Google+).

1. OPTIMIZING IMAGES
FOR THE WEB
Or, “Why do my pictures look weird?”
Friday, April 12, 2013

2. AGENDA
1. 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

3. 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 compression
You 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 Medium compression (92% less info than High compression (98% less info than
uncompressed PNG, 9.37 KB) uncompressed PNG, 4.82 KB) uncompressed PNG, 1.14 KB)
Friday, April 12, 2013

4. JPG VS GIF VS PNG
JPG/JPEG files GIF files PNG files
• best for images with smooth • maximum of 256 colours - best • gaining popularity. Work well in
tones: ie: gradients, photographs for simple shapes, limited colour newer browsers, but don’t “play
• Uses “lossy” image compression, palette, text elements well” with Internet Explorer.
which means some image quality • “lossless” compression – image • better compression, colour, and
is lost when it’s saved to 72 dpi quality not obviously sacrificed transparency than GIF files
• cannot have transparent • support transparent backgrounds
background and animation. These were the
• amount compression can be culprits behind all those
adjusted, depending on how animated “Under Construction”
small you want/need the file graphics in the ‘90s. Now they
are mostly used to show
• most common format saved by celebrities tripping on their way
digital cameras up to get an Oscar.
Friday, April 12, 2013

5. IMAGE EDITORS
There 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.
Pixlr
Pixlr (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

6. Decorate:
Google+ Image Editor This is the “fun” part of this editor. Add face paint, doodles, speech
bubbles, beards, and masks (and so much more) to your image.
Google+ offers a simple image editor, for hours of fun! Text:
Basic Editor options: Add text to your image. There are lots of fonts available. Vive le
1. Crop Pretty straight-forward: cut out the unnecessary parts of Grumpy Cat Memes!
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!)
Friday, April 12, 2013

7. GIMP
GIMP 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

8. SOCIAL MEDIA SITES
Each social media site has different parameters for the
images used on the pages. I’ll go over the most popular
ones.
Facebook
Facebook 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

9. SOCIAL MEDIA SITES
Twitter
Twitter 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

10. SOCIAL MEDIA SITES
Pinterest
On 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

11. SOCIAL MEDIA SITES
LinkedIn
LinkedIn 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

12. SOCIAL MEDIA SITES
Google+
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

13. SOCIAL MEDIA SITES
YouTube
1. 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