These are simply guidelines, but they are important, as they can impact the way images display on the site and how quickly pages load.
Images
In general, we strive for the smallest file size that does not affect the quality of the image(s).
These are the dimensions of most images:
- Portfolio images
- 2505px by 1670px (landscape orientation)
- 1670px by 2505px (portrait orientation)
- Team Member images, both “front” and “flip”
- 384px by 480px
The reason for the consistent file dimensions is that variations in the dimensions can cause some odd effects when rendered.
The file type/extension used for images is the WebP format. It produces smaller file sizes, which allows our pages to load more quickly. This filetype can also be used for animated images (like GIF images). All of the animated images on the Team Member pages are WebP format, rather than GIF.
Videos
For the most part, when possible, we post videos to YouTube and link to those. There are side effects, of course, specifically the controls and the Related Videos, but what it does is act as a place to store videos that doesn’t use up our GoDaddy storage.
When adding videos to our WordPress Media Library, we need to do everything we can to keep the file sizes as small as possible, without sacrificing quality.
Processing the files
We always need to remember that not all site visitors (even our ideal clients) have the best internet connections at all times and a slow site will be skipped in favor of faster ones.
In general, we will receive raw photos and video taken with high definition cameras. The file sizes are usually in the megabyte or gigabyte range. These files remain in their respective Egnyte folders as originals. Prior to uploading the files to our WordPress site, we ensure reduce the file sizes to something more reasonable that will not sacrifice the quality of the image/video.
There are free alternatives to paid applications. Keep in mind, though, they can come with sometimes steep learning curves.
- GIMP – a free Photoshop alternative. It may not have every single feature that Photoshop does, but for cropping and converting images to different formats, it works very well.
- Handbrake – this free application can be used to compress video files to smaller sizes, convert from one codec and/or media type to another.
- Davinci Resolve – video editing software used by industry folks. The free version has so many useful features that work for anything we do. Again, this one definitely has a learning curve, but there are some great tutorials on their website and on YouTube.