Formats

An image’s format refers to its filetype. Common filetypes are .jpeg/.jpg, .png and .gif.

In most cases, .jpeg/.jpg should be used. It is the most widely used image format and is far less likely to present any issues.

The filetype, size and resolution all contribute to an image’s overall quality. WordPress offers a helpful article on Image Size and Quality that details each factor and how it affects display. For a good breakdown of how filetypes differ, see Sitepoint’s GIF-JPG-PNG: What’s the Difference.

Newswire Compatibility

For optimal integration with the Newswire, use .jpeg/.jpg filetype in posts.

Image File Name

A clear image file name helps with search engine optimization and keeps your media library searchable. WordPress uses the name you upload to build the image URL, so rename images before uploading. Changing the name afterward does not update the URL. Below are the best practices for naming images:

• Use descriptive names that say what the image shows, such as talley-student-center.jpeg rather than IMG_4821.jpeg
• Use all lowercase letters
• Separate words with hyphens, not spaces or underscores
• Keep names concise (2-5 words) and do not use special characters such as &, #, % and apostrophes
• Follow a consistent pattern, such as location-subject or program-topic
• Remember the image name is separate from alternative text, which is required and describes the image for accessibility purposes

Size

When uploading an image to WordPress, the system will automatically create three additional cropped versions of your image. This allows certain blocks and display areas to utilize the proper size.

For example, the Quote block can display a small headshot next to the attribution. Loading a full 3000px by 3000px image would be wasteful when the space only displays at about 150px by 150px, so WordPress automatically uses a smaller auto-cropped version. This happens without any action from you. Other blocks, such as the Image Block, let you choose which crop size to use.

By default, up to three auto-crop sizes will be created for each image, in addition to the original uploaded size.

• Full: The full, original size of the image uploaded
• Large: maximum 1024px width and height
• Medium: maximum 300px width and height
• Thumbnail: 150px x 150px square

Images smaller than 1024px width or height will have fewer crop sizes available.

For display locations without specific image dimension requirements, users can select which size of image they wish to display from the Block Settings area. For example, in the Image Block, the following size dropdown is available:

Keep in mind that not all image sizes are appropriate in all situations, nor will they always work with other selection options of a block. While the editor provides a good estimation of what the published page will look like, previewing and verifying the front-end page is always recommended.

Ratios and Dimensions

For most blocks requiring an image, the general recommendation is to use an image with dimensions of 1500px wide and 844px tall.

These dimensions create a ratio size of 16:9, which is the general recommended width to height ratio for the majority of the theme’s blocks.

Most blocks will contain in-editor instructions on suggested image size wherever appropriate.

Ratio and Dimensions Exceptions

Though 1500px by 844px is the standard recommended dimension for images within the NC State Theme and Stories, there are occasions where different dimensions are acceptable and even recommended. Some common cases where content maintainers will want to use different dimensions are provided below:

• Full-width Page Header: 1500px x 530px
• Magazine Media Banner Header/Cover: 1500px x 530px
• Magazine Side-by-side Header/Cover: 1000px x 1500px (or roughly a 4:5 ratio)
• People Headshot Images: 500px x 500px
• Vertical Video Cover Image: 844px x 1500px

Need help?

Have questions? Feel free to reach out with any questions or concerns at go.ncsu.edu/ucomm-dev-request.