Guidelines for adding images to webpages.

Basic guidelines for a web image

  • Images should be .jpg or .png format
  • Use a high quality image (in focus, no glare, no distractions) that has a clear subject matter
  • Crop photo to highlight the subject matter
  • Maximum size should be 1200 pixels.
  • Make sure the quality setting (in Photoshop, Photos or other image program) is set to web quality and not print quality.
  • File size should be less that 500kb - most times less that 100 kb.
  • Use landscape (horizontal) instead of portrait (vertical) images
  • Use photographs (and in some cases diagrams or line drawings). Do not use images of flyers, brochure, or printed materials
  • Add a caption that describes the image and give credit where credit is due

Lead image

  • Add lead images whenever possible (if they are related to the content)
  • Minimum recommended image width is 600 pixels
  • Recommended maximum image width between 1000-1200 pixels
  • Recommended image dimension is 3:2. This equals and image: 1200 pixels wide X 800 pixels tall.

How to add a lead image

In the "edit" mode of a page, folder, news, or event, you will see a section called "Lead Image". Click the Browse button to navigate to the image on your computer. Once you select the image from your computer, Plone will upload it to the website for you. Add a caption that describes the image and give credit to the photographer if know.

Images added to the text block

Best practices tip: images located within the text area of a webpage should be sized before they are uploaded to Plone. Do not use Plone to re-size an image.

Step 1: Upload image to the Images folder

Images are uploaded to an images folder within your website, then added to the body text of a webpage. Every website should have its own images folder that is located at the root or top-level of the website (for example, if the website homepage is "agsci.psu.edu/communications" then the images folder would be "agsci.psu.edu/communications/images") .

add-image-to-folder.jpg

"Add image" window

  • add title and description (optional)
  • select the image (from your computer), by clicking the "Browse" button
  • once you select your image, click the Save button

add-image.jpg

Best Practices tip: When you add an image to the images folder, make sure to give it a title (adding a description is helpful)

Step 2: Add image to body text block

Put your cursor on the line where you want the image, then click the Image icon in text toolbar (last icon on the right - box with mountains and sun)

text-toolbar-image.jpg

Window that opens will be

add-image-text-block.jpg

In the breadcrumbs, select the root of your website (in example "Communications") and in the option box, select "images"

select-root.jpg

Start typing in the search box (plone5 was typed) and you will see images with your typed text. Select your image from listing (plone5-new.jpg was selected)

select-image-type.jpg

Once you select the image, you will see the following view.

selected-image.jpg

Next click the Insert button in the bottom right of page.

Do not change Size (keep at large 768x768) or Alignment (inline).

**image should be on it separate line from text.