Image and Video Recommendations
Orange Seed allows you to easily upload images and video to be used within your website. Most web browsers only support certain formats, while other web browsers support other formats. For images, there is a very well defined standard of image formats that can be trusted to work on all web browsers. Video however is much harder, since there are tons of video formats and codecs that can be used, but only a handful that will work on all browsers. We have but together the following guide to help you in creating the best images possible for your site.
A word about aspect ratio
Aspect ratio refers to the height and width of an image or video. Orange Seed has 5 standard aspect ratios that it supports. These are industry standard and by only supporting these 5, it helps to ensure a clean and beautiful web site.
Aspect ratios are notated by a number, a colon, and another number. The first number refers to the width, while the second number refers to the height. They can also be flipped to notate that the aspect is in portrait (the height is greater than the width), or the default landscape (the width is greater than the height).
Landscape | Portrait | Supports | |
---|---|---|---|
Square | 1:1 | 1:1 | Images |
Digital | 4:3 | 3:4 | Images |
HD Wide | 16:9 | - | Images and Video |
CinemaScope | 21:9 | - | Images |
Panorama | 3:1 | - | Images |
There are most certainly other aspect ratios, but these are the most common and should be expected to be used throughout your website. If you upload an image or video that does not fit these aspect ratios, Orange Seed will do it's best to conform the image to one of these aspect ratios.
Images
Orange Seed is built so that it is easy to use and you don't have to worry about all the stuff like various image sizes and formats for different browsers. Ultimately a good website would have about 9 to 12 formats and sizes for every single image that is placed on the site. This ensures the best possible image for all devices and screen sizes. However, using Orange Seed allows you to upload a single image and it will figure that out for you. However to ensure that it can properly do this, we required the best possible image to be uploaded.
Basic Recommendation
Basically, we recommend uploading the original file (no matter how large), to your web site, in one of the following formats/extensions.
jpg, png
additional formats include: jp2, pjpg, png8, png32, webp
Uploading a file in jpg or png is always recommended first since Orange Seed is capable and built to serve the fastest and best image format to the browser.
Most image sizes will be between 5 MB and 15 MB with a width or height greater than 2000 pixels.
Videos
Videos are a very different beast than images. The industry has yet to standardize on one format over another and due to licensing issues, most browsers support quite different codec (the way a video is translated by the browser). We are working on other ways to combat this issue, but for now have the following recommendations.
Encoding is the process of making a video into another format. Each device will record video in a different format and codec. Mobile phones use a format that cannot be played directly in a browser. Some cameras have their own format, while a Mac often uses .mov file which can only be played well on a Mac. So to make video work, we need to ensure we use a format that all browsers can understand. This is the process of encoding.
A note about video file size. It is important to note that the larger the video file size is, the longer it will take to start since it needs to download a significant portion before playing. If it is too large, it can stall while waiting for more of the video to download. It is important to create the smallest size video file while maintaining the best quality for viewing.
Turn Sound Off to Reduce File Size
If you are encoding a video that you don't need sound, you should encode only the video and do not add the sound to the video. This will reduce the file size considerably.
Test First
It is always recommended to encode one video and test it out before you do a batch of videos to ensure your encoding process will work correctly.
Below are our standard recommendations for video encoding.
Cattle Video (30 to 60 second video of cattle, usually without sound)
Video Quality | Size | Frame Rate | Aspect Ratio | Video Type | Video Data Rate | Audio Type | Audio Frequency | Audio Bit Rate | Audio Channels |
---|---|---|---|---|---|---|---|---|---|
720p | 1280 x 720 | 20 | 16:9 | H.264 | 7000 kbps | Off | |||
1080p | 1920 x 1080 | 20 | 16:9 | H.264 | 7000 kbps | Off |
Active Video (Video with lots of movement)
Video Quality | Size | Frame Rate | Aspect Ratio | Video Type | Video Data Rate | Audio Type | Audio Frequency | Audio Bit Rate | Audio Channels |
---|---|---|---|---|---|---|---|---|---|
720p | 1280 x 720 | 29.7 | 16:9 | H.264 | 12000 kbps | AAC | 48000 | 256 | Stereo |
1080p | 1920 x 1080 | 29.7 | 16:9 | H.264 | 12000 kbps | AAC | 48000 | 256 | Stereo |
Slide Show/Computer Screen Presentations (Video with minimal movement)
Video Quality | Size | Frame Rate | Aspect Ratio | Video Type | Video Data Rate | Audio Type | Audio Frequency | Audio Bit Rate | Audio Channels |
---|---|---|---|---|---|---|---|---|---|
720p | 1280 x 720 | 15 | 16:9 | H.264 | 6000 kbps | AAC | 48000 | 256 | Mono |
1080p | 1920 x 1080 | 15 | 16:9 | H.264 | 6000 kbps | AAC | 48000 | 256 | Mono |