Handling Photos for Your Posts and Pages
go.ncsu.edu/readext?1038462
en Español / em Português
El inglés es el idioma de control de esta página. En la medida en que haya algún conflicto entre la traducción al inglés y la traducción, el inglés prevalece.
Al hacer clic en el enlace de traducción se activa un servicio de traducción gratuito para convertir la página al español. Al igual que con cualquier traducción por Internet, la conversión no es sensible al contexto y puede que no traduzca el texto en su significado original. NC State Extension no garantiza la exactitud del texto traducido. Por favor, tenga en cuenta que algunas aplicaciones y/o servicios pueden no funcionar como se espera cuando se traducen.
Português
Inglês é o idioma de controle desta página. Na medida que haja algum conflito entre o texto original em Inglês e a tradução, o Inglês prevalece.
Ao clicar no link de tradução, um serviço gratuito de tradução será ativado para converter a página para o Português. Como em qualquer tradução pela internet, a conversão não é sensivel ao contexto e pode não ocorrer a tradução para o significado orginal. O serviço de Extensão da Carolina do Norte (NC State Extension) não garante a exatidão do texto traduzido. Por favor, observe que algumas funções ou serviços podem não funcionar como esperado após a tradução.
English
English is the controlling language of this page. To the extent there is any conflict between the English text and the translation, English controls.
Clicking on the translation link activates a free translation service to convert the page to Spanish. As with any Internet translation, the conversion is not context-sensitive and may not translate the text to its original meaning. NC State Extension does not guarantee the accuracy of the translated text. Please note that some applications and/or services may not function as expected when translated.
Collapse ▲While galleries and text-wrapped images can look nice with certain layouts, they don’t fit the current design of our sites. As such, there are a few guidelines you can follow to ensure that your content is readable, accessible and meets our content quality standards.
Use High-Quality Images
While you should use well-composed images, this specifically refers to photos that are high-quality in a technical sense. These high-quality images should follow these guidelines, they should:
- Be Large in Size
- Images are ideally at a 3:2 or 2:3 resolution
- Images should be at bare minimum 600 px in width
- Images should ideally be 1200px by 630px
- Have Good Contrast
- Make sure the image is “readable”, there should be a difference in the dark and light colors of the image.
- Stay away from filters on images that fully change the color profile (e.g. sepia tone filters)
- Be Relevant and Necessary
- Don’t Include images just to have an image on an article
- Make sure the image helps to build context for your content
Center-Align and Block Your Images
While a layout with text-wrapped images may look nice, in general, it’s not a good practice. Users with screens of different sizes may end up with wildly different experiences that you can’t control. By Center-aligning an image, you are giving the content its own space separate from the text. The image will scale down to fit the screen size but without affecting the text around it.
Give content room to breathe, it’s better to have more whitespace than less. This is doubly true when accessibility is kept in mind.
Caption or Provide Alternative Text (alt-text)
Captions or Alt-text are required. To stay in line with accessibility requirements, you must include text that can replace any images in your posts and pages. This text is required, with the only exception being that the image is decorative only. If the image does not provide context to the article, or if the content of the image is replicated in the body of the post or page you do not need to provide captions or alt-text.
This text can be added in one of two ways, captions and alternative text.
Captions
Much like in textbooks, captions are text provided alongside, or in our case, below, an image. This text is visible to sighted users and is great when providing additional context alongside images. Captions are great for giving more information about a graph, they can also be used to list the individuals in a group photograph.
Alt-Text
Alternative text is not included alongside the image for sighted users. Traditionally it has only been displayed if the image resource is not available, though now it is more commonly used by e-readers to describe to users the context of the image in the article. The A11y collective has a great resource on generating quality Alt-text.