A PHP Error was encountered

Severity: Notice

Message: Undefined index: page_type

Filename: models/pageinfo.php

Line Number: 115

A PHP Error was encountered

Severity: Notice

Message: Undefined index: page_url

Filename: models/pageinfo.php

Line Number: 121

How to configure Website Images


How to configure Website Images

 

HOW TO SIZE AN IMAGE

1. Introduction

2. Float or Fill

3. Using Lightroom

4. Using Photoshop

5. Other applications

6. Worked example

 

 

1. INTRODUCTION

1.1 There are some situations where an image must be formatted to a certain size or quality in order to be published. Web pages being a typical example.

 

1.2 While size is related to quality, this article is principally concerned with sizing.

 

1.3 Start by checking if the image has to fill the given size or whether it can float within the given size. If the specification calls for 1920px x 1080px, then you should fill that area. If it requires that the longest side must not be greater than 1920px x 1080px, then it assumes that the longest side matches at least one dimension. If you supply a non-standard image it will either stretch to fit the longest size or distort to fit both dimensions.

 

1.4 Basically if you exceed a set size, the image may be rejected or if it is smaller, either its quality will be degraded or it will appear as a thumbnail in a large panel.

 

1.5 The unit of measurement is a Pixel. Described as width by height.

Eg.   1920 px x 1080 px      

 

2. FLOAT OR FILL

2.1 Depending on the specification, you may wish to have the image float or fill the available area.

 

Image 1

 

 

 

 

3. USING LIGHTROOM (4x)

3.1 CHECK THE DIMENSION OF YOUR ORIGINAL IMAGE.

3.1.1 In the Library Module, Select the image and in the Metadata check the dimensions.

Image 2

 

 

3.2 TO FLOAT THE LARGEST DIMENSION

3.2.1 It is easiest to describe how to adjust the image so that at least the longest edge complies. This can be done at the export stage, which leaves the original as whatever size you work to but exports in a different format.

3.2.2. File  >  Export

3.2.3. Image sizing.

         Check Resize to fit

         Set Width & Height to specified dimensions.  Eg 1920 x 1080 pixels

         Resolution 72 pixels/inch for website and around 240 for other.

 

3.2.3. Set File settings to. 

         Image format  Normally JPG

         Quality Normally 60% for websites  100% for other

         Colour space.  sRGB for website RGB for other.

         Check Limit file size and insert whatever is required.


Image 3

 3

 

 

3.2.4.  If you wish to save the settings as a Preset for future use.  Under Preset Click Add and follow instructions.

 

3.2.5. To check the image look at the thumbnail on the desktop to see that the longest dimension meets the requested specification.

Image 4

 4

or On a Mac select the image on the Desktop and use.  File  >  Get Info and under More info see the Dimensions.

 

Image 5

5

 

 

 

3.3 TO RE-DIMENSION TO FILL.

3.3.1. If the length to width ratio of the image are not the same as the specification this will require cropping to suit.

 

3.3.2. First determine if you want to alter the length to width ratio of your original image. If you are happy to change the ratios, jump to  ….

 

3.3.3. If you wish to preserve the original image, make a copy that can be redimensioned.  Photo  >  Create virtual copy.

 

3.3.4. To alter the dimensions. In the Develop mode, check the Crop Overlay tool.  Click the Resize option to the left of the Padlock (normally set at Original) and then click “Enter custom”.  Enter the pixels you wish to achieve. Then OK

Image 6

6

 

3.3.5. Then use the Crop Frame Tool ( to the left of Aspect) to drag the required selection onto the image.

Image 7

7

 

3.3.6.  Click Close to accept the changes.

3.3.7. By completing the above steps it means that the RATIOS are correct, but you still have to Export and resize the image to the required DIMENSIONS using the image sizing system (above). 

3.3.8. Once the image is exported to the desktop the dimensions can be checked

 

 

 


4. USING PHOTOSHOP

4.1 CHECK THE DIMENSION OF YOUR ORIGINAL IMAGE.

4.1.1 Use pull-down menu.  Image  >  Image Size and read dimensions.


Image 8

8

 

 

4.2 TO FLOAT THE LARGEST DIMENSION

4.2.1 Use pull-down menu.  Image  >  Image Size.

4.2.2 With Constrain Proportions checked

4.2.3 Under longest dimension into the “Pixel Dimensions” and cross check that the remain dimension does not exceed allowed size. If need be try the other dimension.

4.2.4 See also Resize using Save for web & devices 4.4

 


4.3 TO REDIMENSION TO FILL.

4.3.1 Use the crop tool, and fill in the refine selection fields to specify the Width and height of the required dimension, then drag on image.

4.3.2 Note Resolution can also be changed at the same time.

 Image 9

 

9

 

 

4.4 RESIZE USING SAVE FOR WEB & DEVICES

4.4.1 This enables the original file to remain untouched and the resizing to take place during the Save.

4.4.2. Pull down menu File . Save for web & devices.  Input dimension for the longest side.  For more info

 

 

 

 

6 OTHER APPLICATIONS

If your application is not covered. Please feel free to submit an addition to this article. 

Picasa

 Picasa will resize the longest edge.

 

If your image is square: you’ll need to resize to 1080.

If your image is landscape: you’ll need to resize to 1920.

If your image is portrait: you’ll need to resize to 1080.

However, there's a catch…

You may have a high landscape image approaching a square format. Resizing to 1920, may result in the height exceeding 1080, but you won’t know. Now use the Picasa resize screen:

 

 

 

 

 

7.  TYPICAL EXAMPLE BASED ON THE PROFILE IMAGE

Assume the starting image has the wrong width to height ratio and is larger than required. This image is 1626 x 979px and will need to be reduced to 150 x 120px

Start

 

 

To change the size ratio. 1 Select the Crop tool. 2. Enter the dimensions  W 150px  H 120px  (3) Set the resolution to 72dpi     (3).  Drag the crop tool to select the area required.

Size

 

 

 

After the crop the image will have the correct width to height ratio, but will require scaling to the correct size.

Post

 

 

 

To scale use the Pull down menu FILE > SAVE FOR WEB & DEVICE. Do not use the regular "Save" or "Save as" option.  This is where most people go wrong so make sure you use "Save for web & device".

Size

 

 

 

 

This screen will open allowing you to enter the following:

 

Save for devices

 

 

 

1. Set to JPG, Medium, Quality - 50%

2. Leave PROGRESSIVE unchecked, Blur at "0",  Check OPTIMISED, MATTE unchecked and EMBED COLOUR PROFILE unchecked.

3. Convert to "sRGB".  PREVIEW unchecked and METADATA set at "Copyright and Contact Info" (assuming you wish to retain copyright.)

4. This is where image resizing takes place to adjust to the desired size on the website. Refer to website requirement for exact dimensions.  Px is short for Pixel a unit of length.

The Percent remains at 100 and Quality Bicubic.

5. Press save.  The preferred save as for CPF is Date in format yymmdd, photographers name, short title.  Eg "121106 R Winstone Beach".

 

2. Photoshop pre CS5.

2.1 Resize using Image menu > Image Size.

a. Make sure that you check - Scale Styles, Constrain Image and Resample Bicubic.

b. Use Pixel Dimensions to set required width and height.

c. NOTE: If the required size ratio cannot be achieved see 3 below.

3. Resize image size ratio. Sometimes the defined size required on say the4 internet, calls for a different length to height ration than your current image. To alter this use the Crop tool.