{"id":416,"date":"2023-02-25T00:55:38","date_gmt":"2023-02-25T00:55:38","guid":{"rendered":"https:\/\/dornsife.usc.edu\/website-project\/?page_id=416"},"modified":"2026-03-26T21:04:39","modified_gmt":"2026-03-26T21:04:39","slug":"size-guidelines","status":"publish","type":"page","link":"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/","title":{"rendered":"Image Size Guide"},"content":{"rendered":"\n\n \n \n\n\n\n\n\n\n\n
\n\n \n\n <\/div><\/div>\n\n\n\n \n \n\n\n\n\n\n\n\n
\n\n \n
\n
\n\n \n
\n\n \n

\n USC Dornsife WordPress Image Resizing Tool\n <\/h2>\n\n\n<\/div>\n \n \n
\n\n \n

Need to resize an image for your USC Dornsife website? Our image resizing tool makes it easy. Follow the prompts to resize images to the specifications of the design components you plan to use on your website.<\/p>\n\n\n\n<\/div>\n \n \n

\n\n \n \n \n\n Image Resizing Tool \n <\/svg>\n<\/a>\n\n\n<\/div>\n\n <\/div>\n\n
\n \n
\n\n \n \n \n \n \n \n \n \n\n \n \n \n \n\n<\/div>\n <\/div>\n \n<\/div>\n\n\n <\/div><\/div>\n\n\n \n \n\n\n\n\n\n\n\n
\n\n \n\n <\/div><\/div>\n\n\n\n\n \n \n\n\n\n\n\n\n\n
\n\n \n \n
\n\n \n

Image Size Guidelines for Components and Features of the USC Dornsife Website<\/strong><\/h2>\n

The following table catalogues how images display at the 1200pt desktop view and recommends content management system (CMS) upload sizes that will ensure crisp images even on retina devices.<\/p>\n

The design for the new USC Dornsife website is responsive, meaning that content automatically scales and rearranges for the best possible display based on the user\u2019s screen size.<\/p>\n

vw<\/strong> = viewport width
\nvh<\/strong> = viewport height
\ncw<\/strong> = component width
\nch<\/strong> = component height<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n

Component<\/strong><\/h3>\n<\/td>\n

\n

Display Size \u00a0 <\/strong><\/h3>\n<\/td>\n

\n

Upload Size<\/strong><\/h3>\n<\/td>\n

\n

Ratio<\/strong><\/h3>\n<\/td>\n

\n

Note<\/strong><\/h3>\n<\/td>\n<\/tr>\n

\u00a0<\/strong><\/td>\n@1x at 1200pt<\/td>\nRecommended minimum<\/td>\nResponsive<\/td>\n<\/td>\n<\/tr>\n
Article: Hero<\/strong><\/td>\n900×506 px<\/td>\n2000×1150 px<\/td>\n16:9<\/td>\nPromotes articles site-wide.<\/td>\n<\/tr>\n
Article: Image Gallery<\/strong><\/td>\n650×365 px<\/td>\n1950×1097 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Articles Carousel<\/strong><\/td>\n350×197 px<\/td>\n1050x591px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Contact Us: Map<\/strong><\/td>\n550×550 px<\/td>\n1650×1650 px<\/td>\n1:1<\/td>\n<\/td>\n<\/tr>\n
DCI Overlay Hero
\n<\/strong><\/td>\n		1000×563 px<\/td>\n2000×1150 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Editorial Cards – Horizontal
\n<\/strong><\/td>\n		350×197 px<\/td>\n1050x591px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Editorial Cards – Vertical
\n<\/strong><\/td>\n		325×455 px<\/td>\n975×1365 px<\/td>\n5×7<\/td>\n<\/td>\n<\/tr>\n
Exceptional Featured Story<\/strong><\/td>\n1200×675 px<\/td>\n2000×1150 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Featured Block<\/strong><\/td>\n600×600 px<\/td>\n1800×1800 px<\/td>\n1:1<\/td>\n<\/td>\n<\/tr>\n
Full-Width Image with Text<\/strong><\/td>\n1200×675 px<\/td>\n2000×1150 px<\/td>\n16:9<\/td>\nKeep image focus to left or right and use appropriate orientation of component.<\/td>\n<\/tr>\n
Hero with Featured Story<\/strong><\/td>\n1200×600 px<\/td>\n2000×1000 px<\/td>\n2:1<\/td>\n<\/td>\n<\/tr>\n
Homepage Hero: Card Flip<\/strong><\/td>\n500×500 px<\/td>\n1500×1500 px<\/td>\n1:1<\/td>\n<\/td>\n<\/tr>\n
Homepage Hero: CTA with Image<\/strong><\/td>\n400×400 px<\/td>\n2000×2000 px<\/td>\n1:1 or 2:1<\/td>\nOn tablet, images appear at 2:1 ratio and crop towards middle.<\/td>\n<\/tr>\n
Homepage Hero: FW Video with Text<\/strong><\/td>\n100% vw x 100% vw<\/td>\n2000×1150 px<\/td>\nVariable<\/td>\nPoster image will fill viewport and crop towards center.<\/td>\n<\/tr>\n
Homepage Hero: Sequence Intro<\/strong><\/td>\n100% vw x 100% vw<\/td>\n2000×1150 px<\/td>\nVariable<\/td>\nPoster image will fill viewport and crop towards center.<\/td>\n<\/tr>\n
Homepage Hero: Story Carousel<\/strong><\/td>\n350×197 px<\/td>\n1050x591px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Interactive Content Pane<\/strong><\/strong><\/td>\n100%vw x ch<\/td>\n2000×1150 px<\/td>\nVariable<\/td>\nUse textural imagery. Image will crop towards center.<\/td>\n<\/tr>\n
Interactive Quotes Pane<\/strong><\/strong><\/td>\n100%vw x ch<\/td>\n2000×1150 px<\/td>\nVariable<\/td>\nUse textural imagery. Image will crop towards center.<\/td>\n<\/tr>\n
News & Events Promo: Instagram<\/strong><\/td>\n600×600 px<\/td>\n1800×1800 px<\/td>\n1:1<\/td>\n<\/td>\n<\/tr>\n
News & Events Promo: Event<\/strong><\/td>\n600×337 px<\/td>\n1800×1013 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
People Profile<\/strong><\/td>\n325×455 px<\/td>\n975×1365 px<\/td>\n5×7<\/td>\n<\/td>\n<\/tr>\n
Photo Wall<\/strong><\/td>\n500px wide in lightbox<\/td>\n1500xH px<\/td>\nVariable<\/td>\nImages display with standard width but can be any height.<\/td>\n<\/tr>\n
Program Overlay Hero<\/strong><\/td>\n1000×563 px<\/td>\n2000×1150 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Minisite Homepage Hero: Image
\n<\/strong><\/td>\n		1200×675 px<\/td>\n2000×1150 px<\/td>\nVariable<\/td>\nPage title appears centered over image.<\/td>\n<\/tr>\n
Minisite Homepage Hero: Video<\/strong><\/td>\n1200×675 px<\/td>\n1920×1080 px<\/td>\nVariable<\/td>\nPage title appears centered over image.<\/td>\n<\/tr>\n
Minisite Program Hero<\/strong><\/td>\n1200×500 px<\/td>\n2000×1150 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Minisite News & Events Promo: Events<\/strong><\/td>\n200×113 px<\/td>\n600×338 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Rich Text: Left\/Right Embedded Images<\/strong><\/td>\n350 px x Height<\/td>\n1050 px x 3xHeight<\/td>\nUnrestricted<\/td>\nImage width is constrained by template but height is flexible.<\/td>\n<\/tr>\n
Scrolling Image with Text<\/strong><\/td>\n50%vw x 100%vh<\/td>\n1800×2400 px<\/td>\nVariable<\/td>\nImage will crop toward center to fill half of the user’s viewport.<\/td>\n<\/tr>\n
Sign Up Block<\/strong><\/td>\n450px x ch<\/td>\n1350 x 900px<\/td>\n3:2<\/td>\nKeep image focus in center or use textural imagery. If component height exceeds 300px, image will crop towards center to fill ch.<\/td>\n<\/tr>\n
Social Media Promo: Facebook Posts<\/strong><\/td>\n500×281 px<\/td>\n1500×844 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Social Media Promo:<\/strong> Instagram Posts
\n<\/strong><\/td>\n		300×300 px<\/td>\n900×900 px<\/td>\n1:1<\/td>\n<\/td>\n<\/tr>\n
Spotlight Quote<\/strong><\/td>\n325×325 px<\/td>\n975×975 px<\/td>\n1:1<\/td>\n<\/td>\n<\/tr>\n
Stacking Elements: Landscape Image
\n<\/strong><\/td>\n		300×169 px<\/td>\n900×506 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Stacking Elements: Portrait Image<\/strong><\/td>\n300×375 px<\/td>\n900×1125 px<\/td>\n3:4<\/td>\n<\/td>\n<\/tr>\n
Video Listing: Poster Image<\/strong><\/td>\n650×365 px<\/td>\n1950×1097 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Video Listing: Video<\/strong><\/td>\n1200×675 px<\/td>\n1920×1080 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Video Pane: Portrait Poster<\/strong><\/td>\n300×533 px<\/td>\n900×1600 px<\/td>\n9:16<\/td>\n<\/td>\n<\/tr>\n
Video Pane: Portrait Video<\/strong><\/td>\n300×533 px<\/td>\n1080×1920 px<\/td>\n9:16<\/td>\n<\/td>\n<\/tr>\n
Video Pane: Landscape Poster<\/strong><\/td>\n400×225 px<\/td>\n1200×675 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Video Pane: Landscape Video<\/strong><\/td>\n400×225 px<\/td>\n1920×1080 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n
Video with Text: Poster Image<\/strong><\/td>\n900×506 px<\/td>\n2000×1150 px<\/td>\n16:9<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n<\/div>\n\n\n <\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":11,"featured_media":1566,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-416","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"\nImage Size Guide - USC Dornsife Website Resources & Support<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Size Guide - USC Dornsife Website Resources & Support\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/\" \/>\n<meta property=\"og:site_name\" content=\"USC Dornsife Website Resources & Support\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-26T21:04:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/06\/Content-Design-Identity.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/\",\"url\":\"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/\",\"name\":\"Image Size Guide - USC Dornsife Website Resources & Support\",\"isPartOf\":{\"@id\":\"https:\/\/dornsife.usc.edu\/website\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/06\/Content-Design-Identity.jpg\",\"datePublished\":\"2023-02-25T00:55:38+00:00\",\"dateModified\":\"2026-03-26T21:04:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/#primaryimage\",\"url\":\"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/06\/Content-Design-Identity.jpg\",\"contentUrl\":\"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/06\/Content-Design-Identity.jpg\",\"width\":2000,\"height\":1150,\"caption\":\"Rock feature with water\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/dornsife.usc.edu\/website\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image Size Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dornsife.usc.edu\/website\/#website\",\"url\":\"https:\/\/dornsife.usc.edu\/website\/\",\"name\":\"USC Dornsife Website Resources & Support\",\"description\":\"USC Dornsife Website Resources & Support\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dornsife.usc.edu\/website\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image Size Guide - USC Dornsife Website Resources & Support","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/","og_locale":"en_US","og_type":"article","og_title":"Image Size Guide - USC Dornsife Website Resources & Support","og_url":"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/","og_site_name":"USC Dornsife Website Resources & Support","article_modified_time":"2026-03-26T21:04:39+00:00","og_image":[{"width":2000,"height":1150,"url":"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/06\/Content-Design-Identity.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/","url":"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/","name":"Image Size Guide - USC Dornsife Website Resources & Support","isPartOf":{"@id":"https:\/\/dornsife.usc.edu\/website\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/#primaryimage"},"image":{"@id":"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/#primaryimage"},"thumbnailUrl":"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/06\/Content-Design-Identity.jpg","datePublished":"2023-02-25T00:55:38+00:00","dateModified":"2026-03-26T21:04:39+00:00","breadcrumb":{"@id":"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dornsife.usc.edu\/website\/size-guidelines\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/#primaryimage","url":"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/06\/Content-Design-Identity.jpg","contentUrl":"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/06\/Content-Design-Identity.jpg","width":2000,"height":1150,"caption":"Rock feature with water"},{"@type":"BreadcrumbList","@id":"https:\/\/dornsife.usc.edu\/website\/size-guidelines\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dornsife.usc.edu\/website\/"},{"@type":"ListItem","position":2,"name":"Image Size Guide"}]},{"@type":"WebSite","@id":"https:\/\/dornsife.usc.edu\/website\/#website","url":"https:\/\/dornsife.usc.edu\/website\/","name":"USC Dornsife Website Resources & Support","description":"USC Dornsife Website Resources & Support","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dornsife.usc.edu\/website\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/pages\/416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/comments?post=416"}],"version-history":[{"count":44,"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/pages\/416\/revisions"}],"predecessor-version":[{"id":2247,"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/pages\/416\/revisions\/2247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/media\/1566"}],"wp:attachment":[{"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/media?parent=416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}