{"id":4842,"date":"2025-10-27T09:26:48","date_gmt":"2025-10-27T13:26:48","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?p=4842"},"modified":"2025-10-27T09:29:12","modified_gmt":"2025-10-27T13:29:12","slug":"cutheme-image-size-cheat-sheet","status":"publish","type":"post","link":"https:\/\/carleton.ca\/cutheme-docs\/2025\/cutheme-image-size-cheat-sheet\/","title":{"rendered":"cuTheme Image Size Cheat Sheet"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        cuTheme Image Size Cheat Sheet\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>For anyone adding images to posts, pages, people profiles, or content blocks \u2014 here\u2019s a quick reference to help you choose the right size and keep everything looking great across the site.<\/p>\n\n\n\n<h2 id=\"recommended-image-sizes\" class=\"wp-block-heading\">Recommended Image Sizes<\/h2>\n\n\n\n\n<div class=\"w-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component not-contained not-prose\">\n    <h2 class=\"px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800\">\n        Table of Contents\n    <\/h2>\n    <div class=\"grid cu-scrollto cu-stackedlist--toc cu-stackedlist--1 md:grid-cols-1\">\n            <div class=\"space-y-1\">\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.\n                    <\/span>\n\n                    <a href=\"#banner-wide-image\" class=\"font-medium hover:underline\">\n                        Banner \/ Wide Image\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.\n                    <\/span>\n\n                    <a href=\"#featured-images-pages-posts-events-stories\" class=\"font-medium hover:underline\">\n                        Featured Images (Pages, Posts, Events, Stories)\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        3.\n                    <\/span>\n\n                    <a href=\"#featured-card-block\" class=\"font-medium hover:underline\">\n                        Featured Card Block\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        4.\n                    <\/span>\n\n                    <a href=\"#text-and-image-block\" class=\"font-medium hover:underline\">\n                        Text and Image Block\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        5.\n                    <\/span>\n\n                    <a href=\"#people-posts-bio-pics\" class=\"font-medium hover:underline\">\n                        People Posts &#8211; Bio Pics\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        6.\n                    <\/span>\n\n                    <a href=\"#in-the-media-bio-pics\" class=\"font-medium hover:underline\">\n                        In the Media &#8211; Bio Pics\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        7.\n                    <\/span>\n\n                    <a href=\"#quick-tip\" class=\"font-medium hover:underline\">\n                        Quick Tip\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        8.\n                    <\/span>\n\n                    <a href=\"#accessibility-notes\" class=\"font-medium hover:underline\">\n                        Accessibility Notes\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<h3 id=\"banner-wide-image\" class=\"wp-block-heading\">Banner \/ Wide Image<\/h3>\n\n\n\n<p><strong class=\"myprefix-text-bold\">1600 x 700 px<br><\/strong>Use this large, wide format for page banners. <\/p>\n\n\n\n<h3 id=\"featured-images-pages-posts-events-stories\" class=\"wp-block-heading\">Featured Images (Pages, Posts, Events, Stories)<\/h3>\n\n\n\n<p><strong class=\"myprefix-text-bold\">600 x 400 px<br><\/strong>This is your go-to size for featured images. It keeps things looking clean and consistent when you use a Card or Listing block.<\/p>\n\n\n\n<h3 id=\"featured-card-block\" class=\"wp-block-heading\">Featured Card Block<\/h3>\n\n\n\n<p><strong class=\"myprefix-text-bold\">600 x 400 px<br><\/strong>Even though the display is a smaller format, upload the same size as featured images! Keeps a nice, even look across cards. <\/p>\n\n\n\n<h3 id=\"text-and-image-block\" class=\"wp-block-heading\">Text and Image Block<\/h3>\n\n\n\n<p><strong class=\"myprefix-text-bold\">At least 768 px wide<br><\/strong>For best results, upload an image that\u2019s at least 768 pixels across so it stays sharp and clear.<\/p>\n\n\n\n<h3 id=\"people-posts-bio-pics\" class=\"wp-block-heading\">People Posts &#8211; Bio Pics<\/h3>\n\n\n\n<p><strong class=\"myprefix-text-bold\">400 x 400 px (square)<br><\/strong>Perfect for profile or team photos.<\/p>\n\n\n\n<h3 id=\"in-the-media-bio-pics\" class=\"wp-block-heading\">In the Media &#8211; Bio Pics<\/h3>\n\n\n\n<p><strong class=\"myprefix-text-bold\">400 x 400 px (square)<br><\/strong>The same square size works great here, too.<\/p>\n\n\n\n<h3 id=\"quick-tip\" class=\"wp-block-heading\">Quick Tip<\/h3>\n\n\n\n<p>If you\u2019re unsure, go a bit larger (keeping the same proportions). cuTheme will handle the resizing for you!<\/p>\n\n\n\n<h3 id=\"accessibility-notes\" class=\"wp-block-heading\">Accessibility Notes<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Always add clear, descriptive <a href=\"https:\/\/carleton.ca\/webaccessibility\/alt-text\/\">alt text <\/a>when uploading images.<\/li>\n\n\n\n<li>Avoid making text a part of images.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/webaccessibility\">Learn more: Web accessibility<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>For anyone adding images to posts, pages, people profiles, or content blocks \u2014 here\u2019s a quick reference to help you choose the right size and keep everything looking great across the site. Recommended Image Sizes Banner \/ Wide Image 1600 x 700 pxUse this large, wide format for page banners. Featured Images (Pages, Posts, Events, [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[25,37],"tags":[],"class_list":["post-4842","post","type-post","status-publish","format-standard","hentry","category-tips-tricks","category-working-with-images"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/posts\/4842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=4842"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/posts\/4842\/revisions"}],"predecessor-version":[{"id":4851,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/posts\/4842\/revisions\/4851"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=4842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/categories?post=4842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/tags?post=4842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}