Put your Photos on a Diet

cat

Feb. 27

Written By

Are fat image files bogging down your web 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)

[responsive_video type='youtube' hide_related='1' hide_logo='1' hide_controls='1' hide_title='0' hide_fullscreen='0' autoplay='0']https://www.youtube.com/watch?v=RsJz7JN1uqA[/responsive_video]

Summary of the file specs talked about in the video

File dimensions for web sites:

Make your photo a little smaller than the column width it will be placed in.
If your Wordpress theme is responsive, it should resize to fit the columns properly when viewed on different computers or mobile devices.
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 600 pixels.
If your Wordpress web theme isn't responsive, you may have to leave a bit of breathing room, so use 550 pixels. This gives you 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.
If you are designing a header image, it can go the full width. In our example that would be 900 pixels wide. But again a responsive theme will resize it for you.

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