Large images added to a webpage can have a detrimental effect to your site.

Transcription

1 1. Photo Resizing Large images added to a webpage can have a detrimental effect to your site. Large images are slow to load and can frustrate users of your site who may leave your site rather than wait for the image to display. There are a number of methods of photo resizing that can be used to resize images for use on webpages. Microsoft Office Picture Manager can be used to resize images prior to loading into Episerver. Episerver can be used to resize files once the image has been loaded. Having your images sized correctly prior to adding to EpiServer will save a considerable amount of time. Recommended EpiServer Image Sizes Banner right 550 x 155 Banner whole 960 x 155 Photo gallery Thumbnail 100 x 65 Large image 800 x 480 or 800 x 600 (Landscape) or 450 x 600 (portrait) HTML slider News rotator Image slider Background 900x360 or 660x x x360 (full width control panel); 660x264 (content panel); 200x168 (child sponsorship) or 200x267 (logos) 1920x1020 with the core element aligned to the left Standard image in an article (content page template) Small 220 x 165 Medium 300 x 225 Large 660 x 495 Landing page 210 x 150 The Salvation Army 2012 Page 1

2 2. Microsoft Office Picture Manager Using this program allows the user to edit / resize / compress / crop images prior to loading them into EpiServer. Program Location: Windows XP machines Start / All Programs / Microsoft Office / Microsoft Office Tools / Microsoft Office Picture Manager. Window 7 machines Start / All Programs / Microsoft Office / Microsoft Office Tools / Microsoft Office Picture Manager. Accessing Images With Microsoft Office Picture Manager open: The Picture Shortcuts area will be displayed. Navigate to the image using the displayed shortcuts; Alternatively, Add Picture Shortcut link; Navigate to the folder (Where image is stored); Select the folder; Add Additionally, the file can be navigated to first, and then opened with Microsoft Office Picture Manager. This process uses a right mouse click. Page 2 The Salvation Army 2012

3 The selected folder will now be able for selection from the Picture Shortcuts menu. shortcut link; The images in the folder will be displayed. Double Click the image to fully display. The image will be fully displayed. The Edit Pictures panel will be displayed. The Salvation Army 2012 Page 3

4 Image Compression When an image is compressed both the file size (i.e. 2mb) and picture dimensions (i.e. w2362 x h1575) are reduced. Images can be compressed for use in documents, web pages and messages. Compress Pictures option; Web pages option; OK The picture will be resized to a width and height of 448 x 336. The file size will be reduced from 1.95 MB to a compressed 57.1 KB. The picture will be compressed and resized and can now be saved as a reduced file. Use the Save As option if you wish to preserve the original file. Picture Dimensions Compression Settings The following options will reduce the image to the following dimensions (Width x Height) Document 1024/765 Web pages 448/335 messages 160/120 Page 4 The Salvation Army 2012

5 3. EpiServer Large images can be loaded into EpiServer and then be resized using some default size settings within EpiServer. Loading Images With EpiServer opened in Edit Mode File Management icon; The File Management Action Window will be opened. Add New File icon; The Salvation Army 2012 Page 5

6 The Add File window will now be displayed. Navigate to the required folder; Select the required file; open The selected file will be listed next to the Browse button. Enter the Description; Enter the Image title; Page 6 The Salvation Army 2012

7 The image can now be edited. Right Click on the image file; Select the Edit option; The Image Editor will be opened with the selected file displayed. Notice the Width and Height of the file (2362 x 1575). The file can now be resized. The Salvation Army 2012 Page 7

8 The Resize options will now be displayed. The Preset options can be selected from the drop down list. Preset drop down list arrow; Select the required option; The selected option will resize the actual image on screen (to the selected size), and displays the preset width and height. Page 8 The Salvation Army 2012

9 The resized image can now be set. The image will be set to the selected size and can now be saved. Save button to overwrite the existing file; Save As button to save the file with another name; Close The file has been saved. The file size has been reduced from 1.95mb to 14kb. The Salvation Army 2012 Page 9