Photos and Images

Some helpful information about editing photos for the web.

Photo size is measured in three ways.

Pixels

These are like the inches or feet, the dimensions of a photo. For most hero images (the top/main images on a page) you want to have an image that is at least 1600 pixels wide. For images you're adding within the content, aim for a max width/height of 1200 pixels. 

DPI - Dots Per Inch

You want all images for the web to be 72 dpi.

File Size

Most of the Joomla websites we create for our clients can handle very large files. But large files can affect how fast a website loads. Try to keep your images to less than 1MG or 1,000KB.

You should be able to edit all of these dimensions in your photo editing software.

You can view other images on your website to get idea of size and format. If you want to find out the size of a image, you can do the following:

In Firefox you can right click on an image and select View Image Info. You will get the screen below that shows you the file type, file size, and image dimensions.

Image Info

In Chrome, you can right click on the image and select Inspect. You will see the following which displays the image's dimensions.

chrome inspect

For the web, the two main formats you want to use are jpg and png.

JPEG

  • When to use: most of the time for photos.
  • Online (compressed format) = smaller file size = faster load times.
  • Avoid using for images with type/text or logos.
  • Does not allow for transparent backgrounds.

PNG

  • Also, compressed but files tend to be larger.
  • Use if there is type/text involved.
  • Better for logos online.
  • Allows for transparent backgrounds.
  • Use for email footers.

GIF

  • Similar to png but older and was patented.
  • Use png when possible.
  • Less colors available

What about PDF?

PDF images must be converted into a JPEG or PNG. PDF Documents can be added using the Document Manager.