Ideal Media Dimensions

Ideal Media Dimensions

In this document, you will find a set of best practices for working within your Gabbart Website. Each specification is a suggestion of what our trained Gabbart Graphic Artists think will suit your site best!

Each Element or stack item below provides an image for the ratio of the images and videos used on your website. 

Video Design Stack 


Resolution: 2760px by 720px
File Size: 75-25 MB 
File Type: M P42, H.264 Codec3
Video Length: 30-45 Seconds 

Video Feature Stack 


Resolution: l920px by l080px
File Size: Under 250 MB 
File Type: MP4, H.264 Codec
Video Length: Any Length as Long as it is compressed to under 250 MB. 

Stacked News Articles


Resolution: 600px by S00px 
File Type: JPEG4 or PNG5 

Row News Articles


Resolution: 500px by 475px 
File Type: JPEG or PNG

News Article Widget


Resolution: 345px by 575px 
File Type: JPEG or PNG  

 Trendy News Articles


Resolution: 600px by 450px
File Type: JPEG or PNG

Design Slideshow


Resolution: 1500px by 800px 
File Type: JPEG or PNG 
Details: Leave 150 pixels on top and bottom for Bleed• 
(On extra wide screens, less of the image will be cut off) 

Secondary Slideshow


Resolution: l000px by 700px 
File Type: JPEG or PNG

Scroll Over Images


Resolution: 625px by 275px 
File Type: JPEG or PNG

Parallax Images


Resolution: 1500px by 1500px
File Type: JPEG or PNG 
DPI:  100-300•

Double Blocks Image


Resolution: 650px by 600px
File Type: JPEG or PNG 
DPI:  100-300•

Number Count Stack

 
Resolution: l000px by 500px
File Type: JPEG or PNG

Video Terms Defined

1.      px or pixels A pixel is represented by a dot or square on a computer display. The more pixels, the higher quality the image and the higher the file size.
Cameras are often referred to as having a certain number of Mega pixels. Mega pixels are equivalent to l Million pixels.
2.      MP4 MP4 is an international standard for audio-visual coding. "MP4" is a container for the code that makes up the video. It works with most online platforms including Gabbart sites; however, not all .mp4 files work. Why is this? Read below about codecs.
3.      H.264 Codec A codec is the way that your video is coded. Not all codecs can be read by online video platforms. H.264 is a very popular flavor of the M PEG-4 codec. This codec is widely supported on most platforms.

Photo Terms Defined


4.      JPEG A very popular photo file format that works with most online media hosting platforms. It does not honor transparency and will always appear opaque.
5.      PNG Another popular file format that is widely accepted and tends to have higher file sizes than JPEG. This format can display transparency on Gabbart sites.
6. Bleed Extra space that is added to the edge of a document. It is most often used in prints.
7.      Image Ratio An aspect ratio is a proportional relationship between the image's width and height, essentially it describes the image's shape
8. DPI or Dots Per Inch DPI is another way to set up your resolution in design software. In short, it means that there are X number of dots (or pixels) per inch. So, if you had a 4 by 5-inch document at 750 DPI, the document would be 600 dots wide and 750 dots tall.

Please reach out to us at 877-810-6894 if you need any assistance with your site. 


    • Related Articles

    • Home Page Slide Show - How to edit images to fit

      When working with images that will be used in your site’s homepage slide show, it can be somewhat difficult to upload images that fit very well depending on the actual image and how it was taken.  In this tutorial, we’ll walk through some editing ...

    • Full Width Slideshow stack

      Full Width Slideshow  What is the Full Width Slideshow?  The Full Width Slideshow stack item is one option for you to display images on your page. It is similar to the design slideshow available for your home page. The slideshow will be the Full ...

    • Embed a Power Point Slideshow

      To Embed a PowerPoint Slideshow on your site you will need to decide how you want the slideshow to appear. The two options to display a PowerPoint slideshow is to convert the file to either a video or PDF format. The following links will provide ...

    • Why isn't my photo uploading?

      If your photo is too large it will cause your site to lag as it tries to upload and display the image. You will want to compress the image and upload the smaller file. We typically do not have a suggested photo size for your slideshows since your ...

    • The File Cabinet

      The File Cabinet is a convenient way to store your Photos, Documents, Audio/Video Files, and various Forms that you may need throughout your school year.  Let's look at the File Cabinet, it's Subsections, and how to use them. There are four (4) ...