Optimizing images for the web

  • 500 views
Uploaded on

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 …

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+).

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
500
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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.caFriday, 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 • FreeBSDFriday, 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