Media



The media library is where all of your images, videos, and other uploaded files such as PDFs are stored on your website. Although media is automatically entered into the media library when you add it to a page or post, you can add media, perform edits, and other maintenance tasks directly from the media library.

WordPress automatically creates thumbnails for all images that you upload through the media library. In the media settings area you can define the exact size of small, medium and large thumbnails. Large thumbnails are usually cropped so that they fit into your main post content area. For example, if your main post content area was around 600 pixels in width, you may want to set your large thumbnail at around 550 pixels. This ensures that any large images are cropped and do not break your design. Your theme will sometimes set additional image sizes. For instance, the Twenty Twelve theme adds a post thumbnail size of 624px X 9999px (unlimited height). Watch the video below:

Today’s digital cameras produce high resolution images that are large in size. It is best to resize your images in Paint.net before uploading them to your wordpress Media Library. That means that you have to understand how your theme treats images. You can reference the twenty-twelve theme and examine image specifications:

The main column width is 625px except in the full-width page layout where it’s 960px. The sidebar width is 250px. Images appearing on your standard post page (use Default template) are 624px in width, the height is flexible.

However, the twenty-twelve theme has a mobile-first layout and is totally responsive. That means, the theme can be viewed on any device (well, almost) — smartphones, tablets, HiDPI screens — you name it!. In this theme images will resize according to the device they are displaying on. This is important in regard to your image width. Watch the video below to get a better understanding:

The suggested header image dimensions are 960px by 250px (width, height). However, both the height and width are flexible (responsive) so you can upload a larger or smaller image if you wish. The header width is limited to a max of 2000px. Watch this video on creating a header, you will get a better understanding of responsive design: