Size

Photo size is really important and ties into photo quality. Do not use blurry or pixelated images on your website, especially on the home page. It looks unprofessional and reflects poorly on your organization. Don't try to blow up/enlarge small images, you'll need to start with large images. File size is also important to not slow down the loading time on your site, don't upload images that are more that 1mb each. 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. Often your Staff images will all be square and cropped to the same size. Check the size on similar existing images on your site to determine the best size for new images. 

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 (or lots of files) can affect how fast your website loads. Try to keep your images to less than 1mb or 1,000kb each. A good image size to aim for is around 200-300kb per image.

You should be able to edit all of these dimensions (width, height, DPI and file size) 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

To see an image's size when viewing in your files: 

On a Mac: In Finder sort your file view by Columns. Select your desired file, and the details will all show in the column to the right. If you don't see them try making the Finder window bigger and it will show more details. You can also right click or command+click and select "Get Info" to see the file size and dimensions.

file size mac

image get info
On a PC: This can vary depending on your operating system. You can hover your cursor over an image until the dimensions appear. You can also try viewing your image in its folder and the bottom of the window should show the dimensions. Try expanding the folder window if you don't see them at first.

#57980 views