Images

How to

• Optimize images for the web

  Image File Type Options

  There are three main file types we’ll want to focus on for saving images, optimized for the web: GIF, JPG and PNG. Each file type has its own strengths and weaknesses and it is very important to know and keep these in mind when saving an image. Here are a few details:

  • GIFs are not for high-quality images, but you can use animated GIFs
  • JPGs can be optimized to a very small file size while keeping the high quality of an image
  • PNGs are typically used when a transparent background is needed

  Saving Images Properly

  Large images on a web page take longer to load. By “large”, we are referring to file size rather than the dimensions of an image, i.e. the value in KB, MB, GB etc. Users expect a webpage to load in under 2 seconds, and most will abandon a page that takes more than 3 seconds to load. It’s important that your images are small enough to ensure a speedy site. There are three things you can do to properly optimize your images for your web site:

  1. Make the image the proper proportions and dimensions
     You will need to determine what is the largest size your image will be in all responsive views (i.e. phone, tablet or desktop).
  2. Save the image “for the web”
     It is possible to reduce the size without reducing the quality of the image on a screen. This requires changing the image resolution down to 72 PPI without losing the proper final dimensions or proportions and then compressing the image.
  3. Compress the image
     You can do this with Photoshop or other online tools like www.tinyjpg.com, www.tinypng.com or https://pixlr.com/e/. The goal is to get large “hero” images under 100KB, and images smaller than 800px wide under 50KB. The smaller the file size, the less data people have to load on the browser.
  4. Recommended image dimensions
     • Fullscreen banner: 1900 px wide by 550 px high
     • Featured image of a blog or news post: 900 px wide by 400 px high
     • Image floated left or right within a content block: 400 px wide

  Images of Text

  Genuine text is much more flexible than images: It can be resized without losing clarity, and background and text colors can be modified to suit the reading preferences of users. Images are more likely to distort and pixelate when resized. In those rare situations where images of text must be used, the text alternative must contain the same text presented in the image.

  If you would like to have text float over a banner, please review how to create a blog slider.

• Editing images in Photoshop for the web

  In the example below, the image is 3.4MB in file size (that's huge!) and the dimensions are 5760px by 3840px.

  Cropping the image to the correct proportions:

  1. When you open the image in Photoshop, on the left you will see the tools available to you.
  2. Select the crop tool (green square shown in the image below). Your image will then show crop marks on the edges of the view finder, and you can set the crop ratio (or proportions) on the top bar (red oval shown in the image below). For this example, the ratio was set to 1100x450 because that is the final desired size of the image.
     
  3. You can then move the crop area around and select any area in the image.
  4. Hit enter, and the image is cropped.

  Save the image:

  1. Next, click ‘File > Export > Export As…’
     
  2. Now, you can optimize the web image by changing its dimensions (image size: blue box shown in the image below). In the example below the dimensions were changed from width 5760px and height 3840px to width 1100px and the height automatically adjusted to 450px. However, the file size is still a little large at 363KB.
     
  3. Bringing down the “Quality” of the image will help with this. On the right side of the window, you will see the “Quality” dropdown, click that and you will have the ability to alter the quality by sliding the little triangle to the left (blue oval). You will see the file size go down as the quality refreshes (red box). At 100% zoomed, make sure the image does not begin to look pixelated. In the example below, the image is reduced to 29% quality and 51.2KB without being too pixelated.
     
  4. Click ‘Export All’, use a name that is meaningful and save it.
• Editing images in Pixlr for the web

  Pixlr is a free online photo editing tool.

  Use the Editor Option:

  1. Do not make an account or save the image to an account
  2. This site will allow you 3 free downloads per day, per browser (clearing your cache may allow for more).

  Open image:

  1. Click the Open Image button and select the image that is stored on your device
     

  Crop the image:

  1. Click the crop tool  in the left side toolbar
     
  2. In the upper toolbar menu, click the Size button.
     
  3. Add the desired width in the W field and height in the H field.
     
  4. Adjust the crop box on the image to the desired crop by dragging the corners.
     
  5. Then click Apply or hit Enter on your keyboard.
     

  Save the image:

  1. Next, click File (top-left hand corner) and then Save from the drop-down menu
  2. Change the Quality of the image to the lowest setting without causing pixelation or losing definition by sliding the circle on the bar to the left. As this change is made, you will see the “size” number below the image change (12kb in the example below). It is also okay to increase the quality if the file size is small.
     
  3. Click Save as and save it to your device. (Click the X on the pop-up.)

How to

• Upload images to a library
  1. Click the Content navigation menu item and then select Images
  2. Click the Upload images button
     
  3. Drag and drop images or click the Upload images from your computer button to select images.
     
  4. Add alternative text. Alt text (alternative text) is a word or phrase that can be inserted as an attribute in an HTML (Hypertext Markup Language) document to tell website viewers the nature or contents of an image.
     
  5. Select the pencil icon to either select an existing gallery or create a new one.
     
  6. Click the Upload and Publish button when finished.

How to

• Add Image widget to a page

  Within the edit view of a page, you can add the image widget to a page.
  

  1. On the right side menu, click the Content tab, click the Content drop-down menu and find the Image widget. Click, hold and drag the Image widget onto the desired part of the page, and then release the image widget
     
• Add an image using the Image widget
  1. After you have added the image widget to a page, click the Edit button on the widget
     
  2. You can either upload an image from your computer or select a preloaded image. Review how to upload images to a gallery.
     • Upload an image from your computer
       1. Click the Upload image link in the upper-right-hand corner of the screen
          
       2. Click the Select image from your computer link to select a photo or simply drag and drop an image.
          
       3. Select where to store the uploaded image, add a meaningful title and alternative text and click the Upload button
          
       4. You can adjust the title and alternative text if needed. Do not adjust the image size on this screen. All cropping and image optimization should be done before it is uploaded to Sitefinity. Click the Save button when complete.