Are fat image files bogging down your site and your screen shows?
And do you choke people’s email accounts when you send them your PowerPoint presentations?
The video tutorial below shows you the file sizes and file types to use for quick loading web sites, web videos and screen presentations.
Be a good steward of precious bandwidth. Speed up the content on your site. Don’t make your audience wait ages for your slide pages to load. Alleviate the pain of an overloaded email server.
To find out how: Watch this video (full screen is best)
Summary of the file specs talked about in the video
File dimensions for websites:
- Make your photo a little smaller than the column width it will be placed in
- Example: If your site is 900 pixels wide and has two columns split 1/3 and 2/3, then the wide side of the photo needs to be a bit less than 300 pixels or 600 pixels depending on the column it’s placed in
- In the case of my website, the maximum width I use is 550 pixels. This gives me room for captions and borders on the photos
- It’s best to standardize your website image dimensions. Your site will look better from a design sense too.
- Your header image can go the full width and be 900 pixels wide
File dimensions for screen presentations and videos:
- For an average PowerPoint or Keynote presentation, a good width is 900 pixels and a good height is 600
- This gives room for titles at the top of the slide
- The images can be scaled down if they’re too big, but I don’t recommend scaling them up, or they will look soft and pixelated
- For videos, it depends on the resolution of your final show and if the photo will fill the frame.
- Use the pixel dimensions as your guide.
File types for web, screen and video:
- JPG files are all 24 bit colour (millions of colours) so they are the best choice for photos.
- JPGs also use a lossy compression, which makes them “lighter” on the bandwidth and they’ll load fast.
- PNG 8 and 24 bit files are good for both logos and photos that have transparency. Only use transparency if you want them to be put on a coloured background, because transparency makes your files “heavier” and they’ll take more bandwidth.
- Some older web browsers aren’t compatible with PNG files.
- GIF files only have 256 colours (8 bit) as the maximum, so they’re not good for photographs.
- You can use GIF files for animation
- And, you can also have transparency on your GIF files
Let me know if you have any questions in the comments.
p.s. Ironically, this video is a bit on the “fat” side due to its length. I chopped as much out of it as I could without losing the message. Sorry!
Comments on this entry are closed.
{ 10 comments }
Great Job Marlene! Very professional and I learned a lot.
Thanks Karen! Glad you learned some new things.
This tutorial answered SO MANY questions that I’ve had bouncing around in the back of my head about how people get such nice images in powerpoint presentations. I learned so much that I think my head might explode!
Great job Marlene, and thank you!
Glad you liked it, and sorry about your exploding head Lisa! BTW, that would be a photographic subject suitable for a png file.
Thanks for sharing this Marlene. I learned a lot. Thanks for including the notes, too. Much appreciated.
So happy you enjoyed this Mike! Thanks for your comment.
Marlene,
Thanks SO much for this. It did answer a bunch of questions.
One additional question: If I’m preparing photos for a PowerPoint slideshow for use in a webinar, is the presentation size 1024×768, or does that depend on the webinar service?
Also, what’s the best resolution for photos for that use — 300?
You can tell I’m a novice at this, eh?
Thanks!
Marsha
Great question Marsha.
That’s a good standard size for a slideshow as it’s 4:3 proportion. If you’re not sure then you might want to check with the webinar provider.
For your images that go into it, resolution (ppi) doesn’t matter, rather the actual pixel dimensions are what you want to keep your eye on. But, for reference web resolution is 72ppi.
Using my notes as a guide, 600 pixels high on either a horizontal or vertical photo will give you room for titles at the top. If you want to completely fill the frame with a horizontal photo then make it the size of the show, which in this case would be 1024×768 pixels. If you had a vertical photo and lots of text on the same slide, you could scale the photo a little smaller (just by clicking the corner of the photo and dragging) once you start playing with your layout, but 600 pixels high is a good starting point. Remember you can size down, but you can’t size up, or your image will look soft and possibly pixelated.
Let me know if that answers your questions.
Marlene,
That does answer my question.
I do know that resolution for the web is 72ppi. That’s why I was wondering if it was the same for photos/slides that would be viewed online in a webinar.
I’m making notes…
Thanks again!
Marsha
Marsha, yes, anything going to a “screen” is 72ppi.
{ 1 trackback }