{"id":14642,"date":"2025-10-27T12:23:19","date_gmt":"2025-10-27T16:23:19","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=14642"},"modified":"2026-03-18T09:02:31","modified_gmt":"2026-03-18T13:02:31","slug":"how-to-add-an-image","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/media\/images\/how-to-add-an-image\/","title":{"rendered":"How To Add an Image"},"content":{"rendered":"<p>Images can enhance your content and help convey information visually. This page explains how to add, align, and resize images, as well as ensure they meet <strong>required accessibility standards<\/strong>. While the examples focus on adding images to pages, the same process applies to other content types such as news posts, events, and directory profiles.<\/p>\n<p>In WordPress, all images are stored in the <strong>Media Library<\/strong>. You can upload images directly to the Media Library or add them while editing a page, post, or event. Either method automatically saves the image to the Media Library, allowing it to be reused anywhere on your site. For instructions on deleting, or bulk uploading images, see the <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/media\/how-to-add-media-files\/\">How to Add Media Files<\/a> documentation.<\/p>\n<h2>Covered In This Tutorial<\/h2>\n<ul class=\"condensed\">\n<li><a href=\"#best-practices\">Best Practices<\/a><\/li>\n<li><a href=\"#add-image\">How to Add an Image<\/a><\/li>\n<li><a href=\"#resize-image\">Resizing an Image After It\u2019s Placed on the Page<\/a><\/li>\n<li><a href=\"#alt-text\">Alt Text<\/a><\/li>\n<li><a href=\"#linked-images\">Linked Images<\/a><\/li>\n<li><a href=\"#examples\">Alt Text Improvement Example<\/a><\/li>\n<li><a href=\"#no-alt-text\">When Images Don\u2019t Need Alt Text<\/a><\/li>\n<li><a href=\"#images-with-text\">Images With Text<\/a><\/li>\n<li><a href=\"#complex-images\">Complex Images<\/a><\/li>\n<li><a href=\"#ai\">Using AI to Generate Alt Text<\/a><\/li>\n<li><a href=\"#image-seo\">Image Search Engine Optimization<\/a><\/li>\n<li><a href=\"#related-training\">Training Videos<\/a><\/li>\n<li><a href=\"#resources\">Resources<\/a><\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2 style=\"color: #333333;\"><a id=\"best-practices\"><\/a>Best Practices<\/h2>\n<ul>\n<li>Supported image file types include<strong>\u00a0.jpg, .gif and .png<\/strong>.<\/li>\n<li><strong>Crop and resize images before uploading<\/strong> them to minimize file size. Smaller files make pages load more quickly and improve search engine optimization (SEO).<\/li>\n<li><strong>Image sizing<\/strong>:\n<ul>\n<li>Images in <strong>full-width sections<\/strong>: <strong>2,000 \u2013 3,000 pixels wide<\/strong> and <strong>under 800 KB<\/strong>.<\/li>\n<li>Images in the <strong>body content<\/strong> area: <strong>under 900 pixels wide<\/strong> and <strong>300 KB or less<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Rename images<\/strong> before uploading. Use clear, descriptive <strong>file names<\/strong> (e.g., anatomy-lab-2025.jpg instead of IMG_1234.jpg) to improve SEO.<\/li>\n<li><strong>Include alt text<\/strong>. All meaningful images (almost all images) must have alternative text that describes the image\u2019s purpose or content.<\/li>\n<li><strong>Re-use existing images<\/strong> from the Media Library whenever possible instead of uploading duplicates.<\/li>\n<li><strong>Avoid images that contain text<\/strong>, since screen readers and search engines can\u2019t interpret text embedded in graphics.<\/li>\n<li>When <strong>linking images<\/strong>, make sure the link destination is clearly described in the alt text.<\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"add-image\"><\/a>How to Add an Image<\/h2>\n<ol>\n<li>Place your cursor where you want the image to appear.<\/li>\n<li>In the editor toolbar, click the <strong>Add Media<\/strong> button.<\/li>\n<\/ol>\n<p><span class=\"imgBorderMed\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14671\" style=\"margin-left: 50px;\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/add-media.png\" alt=\"Screenshot of the WordPress editor interface with the Add Media button highlighted. \" width=\"329\" height=\"115\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/add-media.png 329w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/add-media-300x105.png 300w\" sizes=\"auto, (max-width: 329px) 100vw, 329px\" \/><\/span><\/p>\n<ol start=\"3\">\n<li>The <strong>Insert Media<\/strong> window will open. From here, you have two options:\n<ul>\n<li><strong>Option 1: Select an Existing Image<\/strong> (already in the Media Library).\n<ul>\n<li><span class=\"imgBorderMed\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-14664 alignright\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/add-media-tabs.png\" alt=\"Screenshot of the Add Media interface highlighting the Upload Files and Media Library tabs.\" width=\"217\" height=\"88\" \/>Click the <strong>Media Library<\/strong> tab at the top of the window (if not already selected).<\/span><\/li>\n<li>Browse or use the search bar to find the desired image.<\/li>\n<li>Click the image thumbnail to select it.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Option 2: Upload a New Image<\/strong>\n<ul>\n<li>Click the <strong>Upload Files<\/strong> tab.<\/li>\n<li>Drag and drop your image into the upload area, or click <strong>Select Files<\/strong> to browse your computer.<\/li>\n<li>Once uploaded, the image will automatically appear selected in the Media Library.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-8 col-md-7 col-xs-12 col-sm-7 oscitas-bootstrap-container\">\n<ol start=\"4\">\n<li>With the image selected, review the\u00a0<strong>Attachment Details<\/strong>\u00a0panel on the right and complete the following fields as needed:\n<ul>\n<li><a href=\"#alt-text\"><strong>Alt Text<\/strong><\/a>\u00a0\u2013 Describes the image\u2019s content and purpose.\u00a0<strong>This is almost always required<\/strong>.<\/li>\n<li><a href=\"#captions\"><strong>Caption<\/strong><\/a>\u00a0\u2013 Optional text that displays below the image.<\/li>\n<li><strong>Alignment<\/strong>\u00a0&#8211; Choose how the image aligns with surrounding text (None, Left, Center, or Right).<\/li>\n<li><a href=\"#linked-images\"><strong>Link To<\/strong><\/a> &#8211; Choose whether or not the image links to something. Additional alt text must be provided that explains the link destination.<\/li>\n<li><a href=\"#resize-image\"><strong>Size<\/strong><\/a>\u00a0&#8211; Chose from predefined sizes. We recommend leaving this at\u00a0<strong>Full Size<\/strong> and resizing it after it&#8217;s placed on the page (see Resizing an Image below).<\/li>\n<\/ul>\n<\/li>\n<li>Click\u00a0<strong>Insert into Page<\/strong>.<\/li>\n<\/ol>\n<\/div>\n<div class=\"col-lg-4 col-md-5 col-xs-12 col-sm-5 oscitas-bootstrap-container\">\n<p><span class=\"imgBorderMed\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-14673 alignnone\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/attachment-details.png\" alt=\"Partial screenshot of the Attachment Details for a selected image.\" width=\"281\" height=\"426\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/attachment-details.png 281w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/attachment-details-198x300.png 198w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><\/span><\/p>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"resize-image\"><\/a>Resizing an Image After It\u2019s Placed on the Page<\/h2>\n<p>Once an image has been added to a page, it can be resized to any custom dimensions, not just the predefined sizes. This feature is only available after the image has been added to the page, not during initial insertion.<\/p>\n<ol start=\"1\">\n<li>Click on the image to select it.<\/li>\n<li><span class=\"imgBorderMed\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-14680 alignright\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/edit-image.png\" alt=\"Screenshot of the edit option that appears when an image is selected. \" width=\"213\" height=\"75\" \/>Click the <strong>Edit<\/strong> (pencil) icon that appears when the image is selected.<\/span><\/li>\n<li>In the <strong>Image Details<\/strong> popup, set the <strong>Size<\/strong> field to <strong>Custom Size<\/strong>.<\/li>\n<li>Enter the desired <strong>width<\/strong> or <strong>height<\/strong>. The system will automatically adjust the other dimension to maintain image proportions.<\/li>\n<li>Click <strong>Update<\/strong> to apply changes.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<som-cell cell-info=\"{&quot;ID&quot;:14654,&quot;post_author&quot;:&quot;3206&quot;,&quot;post_date&quot;:&quot;2025-10-22 11:07:05&quot;,&quot;post_date_gmt&quot;:&quot;2025-10-22 15:07:05&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Image Accessibility 2&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;image-accessibility-2&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2025-10-22 11:07:05&quot;,&quot;post_modified_gmt&quot;:&quot;2025-10-22 15:07:05&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;https:\\\/\\\/www.med.unc.edu\\\/webguide\\\/cell\\\/image-accessibility-2\\\/&quot;,&quot;menu_order&quot;:0,&quot;post_type&quot;:&quot;somcell&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;}\" cell-meta=\"{&quot;_upd_sortorder&quot;:[&quot;1&quot;],&quot;layout&quot;:[&quot;SingleCellBlocks&quot;],&quot;cellInformation&quot;:[&quot;{\\&quot;singleCellBlocks\\&quot;:{\\&quot;imagePercent\\&quot;:\\&quot;40\\&quot;,\\&quot;imageMinHeight\\&quot;:350,\\&quot;mediaType\\&quot;:\\&quot;image\\&quot;,\\&quot;textAlignment\\&quot;:\\&quot;center\\&quot;,\\&quot;titleAccent\\&quot;:1,\\&quot;cellHeader\\&quot;:\\&quot;Approximately 12 million people 40 years and over in the United States have vision impairment, including 1 million who are blind, 3 million who have vision impairment after correction, and 8 million who have vision impairment due to uncorrected refractive error.\\&quot;,\\&quot;blockImage\\&quot;:\\&quot;https:\\\/\\\/www.med.unc.edu\\\/webguide\\\/wp-content\\\/uploads\\\/sites\\\/419\\\/2021\\\/02\\\/blind-man-with-seeing-eye-dog.jpg\\&quot;,\\&quot;backgroundImageAlignmentX\\&quot;:\\&quot;center\\&quot;,\\&quot;backgroundImageAlignmentY\\&quot;:\\&quot;center\\&quot;,\\&quot;layoutImageRight\\&quot;:\\&quot;true\\&quot;,\\&quot;backgroundColor\\&quot;:\\&quot;mediumBlue\\&quot;},\\&quot;repeatableBoxes\\&quot;:[],\\&quot;blockType\\&quot;:\\&quot;imageBlocks\\&quot;,\\&quot;blockStyle\\&quot;:\\&quot;halfImage\\&quot;}&quot;],&quot;apiCallInformation&quot;:[&quot;{}&quot;]}\"><\/som-cell>\n<p>&nbsp;<\/p>\n<h2><a id=\"alt-text\"><\/a>Alt Text<\/h2>\n<figure id=\"attachment_13094\" class=\"thumbnail wp-caption alignright\" style=\"width: 260px\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-13094\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2023\/03\/alt-text.png\" alt=\"\" width=\"250\" height=\"183\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2023\/03\/alt-text.png 390w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2023\/03\/alt-text-300x219.png 300w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><figcaption class=\"caption wp-caption-text\">Alt text displays when an image fails to load.<\/figcaption><\/figure>\n<p>Alt text (alternative text) describes the <strong>context<\/strong> and <strong>purpose<\/strong> of an image for people who cannot see it. It is <strong>required for all meaningful images<\/strong>.<\/p>\n<p>When images can\u2019t be displayed, such as when users disable images or have a slow internet connection, the alt text appears in their place. Including accurate, descriptive alt text ensures that everyone, regardless of visual ability, can still understand your content.<\/p>\n<p>Alt text also helps search engines understand what an image represents, improving both <strong>accessibility<\/strong> and <strong>SEO<\/strong>.<\/p>\n<h3>Meaningful vs. Decorative Images<\/h3>\n<p><strong>Meaningful images<\/strong> convey information, illustrate a concept, or support nearby text. These images <strong>always<\/strong> need alt text.<\/p>\n<ul>\n<li><strong>Example Image<\/strong>: A photo of medical students in a lab that supports a story about hands-on learning.<\/li>\n<li><strong>Example Alt Text<\/strong>:\u00a0Students practicing clinical skills during a UNC School of Medicine lab session.<\/li>\n<\/ul>\n<p><strong>Decorative images<\/strong> are purely visual, adding aesthetic appeal but no new information. These do not need alt text.<\/p>\n<ul>\n<li><strong>Example<\/strong>: A decorative divider graphic or a background texture that doesn\u2019t contribute meaning.<\/li>\n<\/ul>\n<h3>Guidelines<\/h3>\n<ul>\n<li>Alt text should convey the <strong>context\u00a0<\/strong>and<strong>\u00a0function<\/strong> of the image. This is explained in further detail below.<\/li>\n<li>Be concise. Keep it under <strong>150 characters<\/strong> when possible, without sacrificing the meaning or intent of the image.<\/li>\n<li>Don\u2019t include \u201cImage of\u201d or \u201cPhoto of.\u201d This is redundant because screen readers will announce it as an image.<\/li>\n<li>Start alt text with a capitol letter and end with a period; this ensures the screen reader pauses after reading the alt text.<\/li>\n<li><a href=\"#linked-images\"><strong>Linked images<\/strong><\/a> must always include alt text that <strong>describes the link&#8217;s destination<\/strong>.<\/li>\n<li><a href=\"#images-with-text\"><strong>Images with text<\/strong><\/a>:\n<ul>\n<li>If the image contains a <strong>short<\/strong> amount of text, include it in the alt text.<\/li>\n<li>If the image contains a <strong>large<\/strong> amount of text, provide that text in the page content area near the image. The alt text should note that the full text can be found in the content of the page near the image.<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#complex-images\"><strong>Complex images<\/strong><\/a>, like charts, graphs, posters or flyers, should have a summary of the image in the page text surrounding the image. The image\u2019s alt text should direct users to that description.<\/li>\n<\/ul>\n<h3>Context<\/h3>\n<p>The meaning of an image depends on its <strong>context<\/strong>. Alt text should reflect the image\u2019s purpose on the page and not describe everything visible in the image.<\/p>\n<p>For example, a photo of a doctor examining a patient would need different alt text depending on where it appears:<\/p>\n<ul>\n<li>On a <span class=\"s1\"><b>patient care<\/b><\/span> page: <i>\u201cPhysician listening to a patient\u2019s heartbeat during an exam.\u201d<\/i><i><\/i><\/li>\n<li>On a <span class=\"s1\"><b>medical education<\/b><\/span> page: <i>\u201cMedical student observing a physician perform a patient exam.\u201d<\/i><i><\/i><\/li>\n<li>On a <span class=\"s1\"><b>research<\/b><\/span> page: <i>\u201cUNC researcher [name] conducting a clinical study on heart health.\u201d<\/i><\/li>\n<\/ul>\n<p>Describe only what\u2019s relevant to the page\u2019s content and purpose. Focus on what helps users understand the surrounding information.<\/p>\n<h3>Other Examples<\/h3>\n<table class=\"table table-condensed table-bordered\">\n<thead>\n<tr>\n<th><b>Page Context<\/b><\/th>\n<th><b>Image<\/b><\/th>\n<th><b>Appropriate Alt Text<\/b><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Campus overview page<\/td>\n<td>Aerial view of the medical school<\/td>\n<td>\u201cAerial view of the UNC School of Medicine campus in Chapel Hill.\u201d<\/td>\n<\/tr>\n<tr>\n<td>Research news article<\/td>\n<td>Scientist working with lab equipment<\/td>\n<td>\u201cDr. Smith prepares tissue samples for cancer research study.\u201d<\/td>\n<\/tr>\n<tr>\n<td>Student recruitment page<\/td>\n<td>Students studying in a lounge<\/td>\n<td>\u201cFirst-year medical students collaborating in a study area.\u201d<\/td>\n<\/tr>\n<tr>\n<td>Event recap post<\/td>\n<td>Speaker at a podium<\/td>\n<td>\u201cDean Burks addressing attendees at the 2025 Research Symposium.\u201d<\/td>\n<\/tr>\n<tr>\n<td>Faculty profile page<\/td>\n<td>Portrait of Dr. Garcia<\/td>\n<td>\u201cDr. Elena Garcia, Associate Professor of Neurology.\u201d<\/td>\n<\/tr>\n<tr>\n<td>Fundraising announcement<\/td>\n<td>Donor and student shaking hands<\/td>\n<td>\u201cAlumni donor Michael Lee congratulates scholarship recipient Jasmine Carter.\u201d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>External Examples<\/h4>\n<p>The following websites provide some great alt text examples:<\/p>\n<ul>\n<li><a href=\"https:\/\/accessibility.huit.harvard.edu\/describe-content-images\">Harvard\u2019s Digital Accessibility<\/a><\/li>\n<li><a href=\"https:\/\/it.wisc.edu\/news\/how-to-write-effective-alt-text-for-web-images\/\">IT at UW-Madison<\/a><\/li>\n<li><a href=\"https:\/\/webaim.org\/techniques\/alttext\/#context\">WebAIM<\/a><\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"linked-images\"><\/a>Linked Images<\/h2>\n<p>Images can also serve as links. For example, a logo that links to a website&#8217;s homepage or to a partner&#8217;s website.<\/p>\n<ul>\n<li>When an image functions as a link, its alt text becomes the link text for screen readers.<\/li>\n<li>Every linked image must have alt text that explains the link destination.<\/li>\n<li>Describing the destination is the priority over context, because that\u2019s what screen reader users need to decide whether to follow the link.<\/li>\n<li>Add context if it adds meaningful information.<\/li>\n<\/ul>\n<h4>Examples<\/h4>\n<table class=\"table table-condensed table-bordered\">\n<thead>\n<tr>\n<th><b>Image Context<\/b><\/th>\n<th><b>Purpose of Link<\/b><\/th>\n<th><b>Recommended Alt Text<\/b><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>UNC School of Medicine logo<\/td>\n<td>Returns users to the homepage<\/td>\n<td>UNC School of Medicine homepage.<\/td>\n<\/tr>\n<tr>\n<td>Event flyer image<\/td>\n<td>Opens the event details page<\/td>\n<td>Learn more about the 2025 Research Symposium.<\/td>\n<\/tr>\n<tr>\n<td>Faculty headshot<\/td>\n<td>Opens that person\u2019s biography page<\/td>\n<td>Dr. Lisa Smith, view her faculty profile.<\/td>\n<\/tr>\n<tr>\n<td>Thumbnail of a lab photo<\/td>\n<td>Opens a larger version of the same image<\/td>\n<td>View full-size photo of the Biochemistry Lab.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"examples\"><\/a>Alt Text Improvement Example<\/h2>\n<p>Consider what good alt text would look like for the image below of medical students before their White Coat Ceremony.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15571\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/med-students-2.jpeg\" alt=\"Group of smiling medical students holding white coats with classmates gathered behind them before the White Coat Ceremony.\" width=\"500\" height=\"334\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/med-students-2.jpeg 998w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/med-students-2-300x200.jpeg 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/med-students-2-768x512.jpeg 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/med-students-2-600x400.jpeg 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/med-students-2-560x374.jpeg 560w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<h3>Poor Alt Text (Too Generic)<\/h3>\n<p>Problem: these alt text examples are too generic and do\u00a0not communicate the purpose or context of the image.<\/p>\n<ul>\n<li>Medical students<\/li>\n<li>Group of medical students standing outside.<\/li>\n<\/ul>\n<h3>Poor Alt Text (Describes the image, but ignores context)<\/h3>\n<p>Improvement: alt text describes what is visible in the image, but still lacks context.<\/p>\n<ul>\n<li>Group of smiling medical students holding white coats with classmates gathered behind them.<\/li>\n<\/ul>\n<h3>Best Alt Text (Describes the Image + Context)<\/h3>\n<ul>\n<li>Group of smiling medical students holding white coats with classmates gathered behind them before their White Coat Ceremony.<\/li>\n<\/ul>\n<p>Why this works:<\/p>\n<ul>\n<li>Identifies the subjects (medical students)<\/li>\n<li>Includes the meaningful event context (White Coat Ceremony)<\/li>\n<\/ul>\n<h3>Context Is Everything<\/h3>\n<p>The same image (as above) is being used on the <a href=\"https:\/\/www.med.unc.edu\/md\/curriculum\/\">MD Curriculum<\/a> website. However, it&#8217;s not used to represent a White Coat Ceremony. Instead, it&#8217;s being used as a generic image that links to the Foundation Phase curriculum section.<\/p>\n<p><span class=\"imgBorderMed\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15573\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/tec-2.0.png\" alt=\"Example screenshot from the MD Curriculum website.\" width=\"600\" height=\"481\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/tec-2.0.png 1223w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/tec-2.0-300x240.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/tec-2.0-1024x821.png 1024w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/tec-2.0-768x615.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/tec-2.0-600x481.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/03\/tec-2.0-560x449.png 560w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/span><\/p>\n<p>Because the image functions as a link, the alt text should describe the destination \u2014 that&#8217;s what screen reader users need to decide whether to follow it. The photo&#8217;s visual content becomes secondary to the link&#8217;s purpose.<\/p>\n<p>Appropriate alt text in this context could be:<\/p>\n<ul>\n<li>&#8220;Learn about the Foundation Phase curriculum.&#8221;<\/li>\n<li>&#8220;Foundation Phase \u2014 UNC School of Medicine curriculum overview.&#8221;<\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"no-alt-text\"><\/a>When Images Don\u2019t Need Alt Text<\/h2>\n<p>Almost all images on a website require alt text because they convey information, context, or meaning that users need to understand.<\/p>\n<p>An exception is for <strong>purely decorative images<\/strong>. For example, when it adds visual interest but doesn\u2019t communicate any information or have a functional purpose. In those cases, leave the Alt Text field blank.<\/p>\n<p>Examples of decorative images include background images, ornamental borders, and custom bullet icons.<\/p>\n<h3><a id=\"captions\"><\/a>Caption vs. Alt Text<\/h3>\n<p>If your image includes a caption, it may not need alt text &#8211; <strong>as long as the caption fully conveys the image\u2019s purpose<\/strong>. If the caption is too brief or missing key information, that information should be added to the alt text.<\/p>\n<p>Attribution details like image source, photographer credit, or copyright belong in the <strong>caption<\/strong>, not the alt text.<\/p>\n<p>&nbsp;<\/p>\n<som-cell cell-info=\"{&quot;ID&quot;:14653,&quot;post_author&quot;:&quot;3206&quot;,&quot;post_date&quot;:&quot;2025-10-22 11:05:06&quot;,&quot;post_date_gmt&quot;:&quot;2025-10-22 15:05:06&quot;,&quot;post_content&quot;:&quot;&quot;,&quot;post_title&quot;:&quot;Image Accessibility 1&quot;,&quot;post_excerpt&quot;:&quot;&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;comment_status&quot;:&quot;closed&quot;,&quot;ping_status&quot;:&quot;closed&quot;,&quot;post_password&quot;:&quot;&quot;,&quot;post_name&quot;:&quot;image-accessibility-1&quot;,&quot;to_ping&quot;:&quot;&quot;,&quot;pinged&quot;:&quot;&quot;,&quot;post_modified&quot;:&quot;2025-10-22 11:07:19&quot;,&quot;post_modified_gmt&quot;:&quot;2025-10-22 15:07:19&quot;,&quot;post_content_filtered&quot;:&quot;&quot;,&quot;post_parent&quot;:0,&quot;guid&quot;:&quot;https:\\\/\\\/www.med.unc.edu\\\/webguide\\\/cell\\\/image-accessibility-1\\\/&quot;,&quot;menu_order&quot;:0,&quot;post_type&quot;:&quot;somcell&quot;,&quot;post_mime_type&quot;:&quot;&quot;,&quot;comment_count&quot;:&quot;0&quot;,&quot;filter&quot;:&quot;raw&quot;}\" cell-meta=\"{&quot;_upd_sortorder&quot;:[&quot;1&quot;],&quot;layout&quot;:[&quot;SingleCellBlocks&quot;],&quot;cellInformation&quot;:[&quot;{\\&quot;singleCellBlocks\\&quot;:{\\&quot;imagePercent\\&quot;:\\&quot;40\\&quot;,\\&quot;imageMinHeight\\&quot;:350,\\&quot;mediaType\\&quot;:\\&quot;image\\&quot;,\\&quot;textAlignment\\&quot;:\\&quot;center\\&quot;,\\&quot;titleAccent\\&quot;:0,\\&quot;cellHeader\\&quot;:\\&quot;Vision disability is one of the top 10 disabilities among adults 18 years and older and one of the most prevalent disabling conditions among children.\\&quot;,\\&quot;blockImage\\&quot;:\\&quot;https:\\\/\\\/www.med.unc.edu\\\/webguide\\\/wp-content\\\/uploads\\\/sites\\\/419\\\/2021\\\/02\\\/boy-with-eye-patch.jpg\\&quot;,\\&quot;backgroundImageAlignmentX\\&quot;:\\&quot;right\\&quot;,\\&quot;backgroundImageAlignmentY\\&quot;:\\&quot;center\\&quot;,\\&quot;backgroundColor\\&quot;:\\&quot;mediumBlue\\&quot;},\\&quot;repeatableBoxes\\&quot;:[],\\&quot;blockType\\&quot;:\\&quot;imageBlocks\\&quot;,\\&quot;blockStyle\\&quot;:\\&quot;halfImage\\&quot;}&quot;],&quot;apiCallInformation&quot;:[&quot;{}&quot;]}\"><\/som-cell>\n<p>&nbsp;<\/p>\n<h2><a id=\"images-with-text\"><\/a>Images With Text<\/h2>\n<p>Avoid using images that contain text whenever possible. Text inside an image is not readable by screen readers or search engines, cannot be translated, and often becomes blurry or distorted when resized on different devices. Whenever possible, use real text on the page instead of text in an image.<\/p>\n<p>If you must use an image that contains text:<\/p>\n<ul>\n<li>If it&#8217;s a <strong>short<\/strong> amount of text, include the full text in the alt attribute.<\/li>\n<li>If the image contains a <strong>large<\/strong> amount of text, provide that text in the page content area near the image. The alt text should note that the full text can be found in the content of the page near the image.<\/li>\n<\/ul>\n<h3>Examples<\/h3>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-14648\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/image-with-text-2.png\" alt=\"First example of an image with text.\" width=\"350\" height=\"129\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/image-with-text-2.png 433w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/image-with-text-2-300x110.png 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/p>\n<p style=\"text-align: center;\">Alt text: Questions? Email TEACCH.<\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14649 aligncenter\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/image-with-text-3.png\" alt=\"Second example of an image with text.\" width=\"350\" height=\"130\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/image-with-text-3.png 428w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/image-with-text-3-300x111.png 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/p>\n<p style=\"text-align: center;\">Alt text: Join our training news email list.<\/p>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"complex-images\"><\/a>Complex Images<\/h2>\n<p>Some images, such as charts, graphs, or posters, contain too much information to describe fully in alt text. In these cases, the full text or a summary must be provided within the page content, located immediately below or near the image.<\/p>\n<ul>\n<li>The image\u2019s <strong>alt text<\/strong> should give a brief overview of what the image represents and tell users where to find the summary.<\/li>\n<li>The <strong>summary<\/strong> should describe the key points, trends, or takeaways from the visual, not every single data point.<\/li>\n<\/ul>\n<h3>Example Alt Text<\/h3>\n<ul>\n<li><strong>Example 1 &#8211; Departmental Organizational Chart<\/strong>\n<ul>\n<li><strong>Alt text:<\/strong>\u00a0Department of Psychiatry organizational chart. Full leadership structure and division listings appear in the section below.<\/li>\n<li><strong>Summary<\/strong>:\u00a0The Department of Psychiatry is led by Dr. Jane Smith, Chair. Three Associate Chairs\u2014Dr. Aaron Patel (Clinical Services), Dr. Maria Gomez (Research), and Dr. Kevin Liu (Education)\u2014oversee the department\u2019s main divisions. Each division, including Adult Psychiatry, Child and Adolescent Psychiatry, and Behavioral Medicine, reports to the corresponding Associate Chair.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Example 2 &#8211; Research Graph<\/strong>\n<ul>\n<li><strong>Alt text<\/strong>:\u00a0Line graph showing decline in average blood glucose levels after 12-week nutrition program. Detailed results provided below.<\/li>\n<li><strong>Summary<\/strong>:\u00a0The 12-week intervention reduced average blood glucose levels from 160 mg\/dL at baseline to 120 mg\/dL by week 12. The most significant drop occurred between weeks 4 and 8, coinciding with the introduction of weekly dietitian consultations.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Example 3 &#8211; Infographic<\/strong>\n<ul>\n<li><strong>Alt text<\/strong>: Infographic showing infection-rate reduction and prevention measures at UNC Hospitals. Summary provided in the paragraph below.<\/li>\n<li><strong>Summary<\/strong>: Between 2023 and 2025, UNC Hospitals reduced hospital-acquired infections by 40%. Key prevention measures included enhanced hand hygiene training, improved sterilization procedures, and expanded staff education programs.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Resources and Other Examples<\/h3>\n<ol>\n<li>Arizona State University provides a detailed <a title=\"Accessible images: complex image guidelines\" href=\"https:\/\/accessibility.asu.edu\/articles\/complex-images\" data-entity-substitution=\"canonical\" data-entity-type=\"node\" data-entity-uuid=\"685a22b4-9f6b-4453-87bc-938bfc9261eb\">Accessible Complex Image Guide<\/a>.<\/li>\n<li><a href=\"https:\/\/accessibility.huit.harvard.edu\/data-viz-charts-graphs\">Harvard&#8217;s Data Visualizations, Charts, and Graphs page<\/a> explains how to ensure data visualizations are accessible to everyone by being mindful of color, labels, descriptions, and design.<\/li>\n<li>PennState demonstrates <a href=\"https:\/\/accessibility.psu.edu\/images\/flowcharts\/\">how to describe Flowcharts &amp; Concept Maps<\/a>.<\/li>\n<li>See how <a href=\"https:\/\/library.unc.edu\/about\/orgchart\/\">University Libraries<\/a> displays both a graphical organization chart as well as a text version.<\/li>\n<li><a href=\"https:\/\/chancellor.unc.edu\/organizational-chart\/\">UNC Office of the Chancellor<\/a> opted for a text outline for their org. chart.<\/li>\n<li>The <a href=\"https:\/\/ung.edu\/about\/structure\/ung-overall.php\">University of North Georgia<\/a> provides both a text outline of their organizational structure as well as a graphical representation in a pdf (link at top of page).<\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/complex\/\">W3C&#8217;s Guide on Complex Images<\/a><\/li>\n<\/ol>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2 style=\"color: #333333;\"><a id=\"ai\"><\/a>Using AI to Generate Alt Text<\/h2>\n<p>AI tools can help generate alt text quickly, but they should be used as a starting point, not the final result. Human review is still necessary to ensure the alt text is accurate, meaningful, and appropriate for the page context.<\/p>\n<p>When prompting AI to generate alt text, include:<\/p>\n<ul>\n<li>The context or purpose of the image on the page<\/li>\n<li>A 150-character limit<\/li>\n<li>The tone and topic of the surrounding content<\/li>\n<li>Whether the image links to something and what it links to<\/li>\n<\/ul>\n<h3 style=\"color: #333333;\">Example Prompts<\/h3>\n<ul>\n<li>This image is on the MD program website and is a clickable link to a page about the Foundation Phase curriculum at UNC School of Medicine. Write alt text in 150 characters or less.<\/li>\n<li>Write alt text for this image in 150 characters or less. The person pictured is Dr. Jane Smith, UNC faculty, and the image appears alongside her biography on a faculty page.<\/li>\n<li>Generate alt text in 150 characters or less for this photo of Roper Hall used on a curriculum page to represent where medical education takes place.<\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"image-seo\"><\/a>Image Search Engine Optimization<\/h2>\n<p>While accessibility is the primary purpose of alt text, it also provides valuable SEO benefits. Search engines rely on alt text to understand what an image represents and how it relates to the surrounding content. Well-written alt text helps search engines:<\/p>\n<ul>\n<li>Better understand what your page is about<\/li>\n<li>Correctly index your images<\/li>\n<li>Improve your chances of appearing in image search results<\/li>\n<\/ul>\n<p><a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/google-images#include-descriptive-titles,-captions,-filenames,-and-text-for-images\">Google<\/a> places strong importance on descriptive alt text. It uses both the alt text and text surrounding the image to determine how relevant an image is to a user\u2019s search.<\/p>\n<p>Don&#8217;t use excessive or irrelevant keywords in alt text for the purpose of improving SEO. This will hurt both accessibility and SEO ranking. Instead, write natural, meaningful alt text that accurately describes the image and its purpose. This will benefit users and search engines with improved SEO being a welcome side effect.<\/p>\n<p><a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/accessibility-and-seo\/\">Learn more about accessibility and SEO<\/a>.<\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"related-training\"><\/a>Training Videos<\/h2>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/CizNbSuRRew\" title=\"Improving Image Accessibility with Alt Text\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" 0=\"allowfullscreen\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\n<h3 style=\"text-align: center;\">Improving Image Accessibility with Alt Text<\/h3>\n<p style=\"text-align: center;\">Learn what alt text is and when to use or omit it.<br \/>\n4 min. 20 sec.<\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/iyzPK-Mz_CY\" title=\"Writing Effective and Accessible Alt Text\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" 0=\"allowfullscreen\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\n<h3 style=\"text-align: center;\">Writing Effective and Accessible Alt Text<\/h3>\n<p style=\"text-align: center;\">Learn how to write alt text for more complex images.<br \/>\n4 min. 12 sec.<\/p>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"resources\"><\/a>Resources<\/h2>\n<ul>\n<li><a href=\"https:\/\/axesslab.com\/alt-texts\/\">Alt-texts: The Ultimate Guide<\/a> &#8211; learn from a vision impaired web developer the best practices for alt text.<\/li>\n<li><a href=\"https:\/\/webaim.org\/techniques\/alttext\/\">WebAIM&#8217;s Tips for Writing Alt Text<\/a> &#8211; Guidance and tips on how to write effective alternative text.<\/li>\n<li><a href=\"http:\/\/webaim.org\/techniques\/images\/\">WebAIM\u2019s Tutorial on Creating Accessible Images<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/WAI\/tutorials\/images\/\">W3C Image Concepts<\/a> &#8211; documentation on how to provide appropriate text alternatives for images.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Images can enhance your content and help convey information visually. This page explains how to add, align, and resize images, as well as ensure they meet required accessibility standards. While the examples focus on adding images to pages, the same process applies to other content types such as news posts, events, and directory profiles. In &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/media\/images\/how-to-add-an-image\/\" aria-label=\"Read more about How To Add an Image\">Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":14703,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-14642","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/14642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=14642"}],"version-history":[{"count":50,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/14642\/revisions"}],"predecessor-version":[{"id":15585,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/14642\/revisions\/15585"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/14703"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=14642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}