Perfect Content Images in 5 Easy Steps
Perfect Content Images in 5 Easy Steps
From showcasing products, to providing visual support to the text on the page, images can maketh or breaketh a website*. As Andy Warhol famously said - "I never read, I just look at pictures", and we all know "a picture says a thousand words".
When it comes to selling products on-line, there are countless studies proving the benefit of images in relation to conversion rates and as a provider of platforms that have processed millions of on-line transactions dating back to the 1990's, we've learned that quality images are often the difference between making sales and not.
We actively encourage all clients using our iASP™ platform, which provides full control over all content published (text, images, movies, files etc.), to invest in production of quality, original images, which can then be adjusted to suit the layout of the area they are publishing.
Providing your photographer or designer with the final image specifications you require is always the perfect option, but if you have images that still need further manipulation we've put together our simple 5-step process to creating perfect content images.
Before you start you'll need image editing software. You can pay for professional level applications such as Adobe Photoshop (like we do), but there's cheaper and even free options available. Today we're going to use a free image editor that is available on-line called Pixlr Editor. It's similar to Adobe Photoshop, and it is very easy to use.
Step #1: Find the recommended image dimensions.
Your images will need to be made a specific width and height, depending
on how/where you want to use them. For example, an image used in the
banner of your website will need to be a lot wider than an image that is
used on an inner page.
For iASP™ Clients:
- Navigate to the page you plan to use the image on, and edit the record.
- The image field should have a recommended width and height either under the image label, or in a tool-tip alongside the image picker tool. If not, please just copy the address of the page you want to add the image into and e-mail it to us asking for optimum image dimensions
- If you are creating a new image for the banner of your website, then you can find the recommended dimensions in the Banner module of the CMS Control Panel.
Step #2: Open the original image.
Next you want to load the image into your image editing application.
- Open Pixlr Editor in your web browser (or you can use your usual image editing software).
- Click File in the menu at the top of the application, and then select Open Image
- Find the image on your computer and select it, press Open.
Step #3: Crop the Image
Now you want to crop out the part of the image that you want to use:
- Select the Crop tool
- In the tool options that appear under the menu, select Aspect Ratio from the Constraint options.
- Enter the recommended image width from Step 1 in the Width box
- Enter the recommended image height from Step 1 in the Height box.
-
In the image window, drag the mouse to create a crop box over the
image. Then use the mouse to drag the edges of the crop box to cover
the part of the image you want to keep.
- This is usually as large as you can make it, or enough to cover the subject of the image.
- When you are happy with your crop selection, crop the image by hitting enter, or double clicking inside of the crop box. The parts of the original image that were outside of the crop box should disappear.
Step #4: Resize the Image
If you are starting with a high resolution image, in most cases, your
newly cropped image will still be larger than the recommended image size
in step 1, so you need to resize the image down to the correct width and
height.
- Select Image from the top menu, and then select Image Size
- Tick the Constrain Proportions box.
- Enter the recommended image width from Step 1 in the Width box
- Enter the recommended image height from Step 1 in the Height box.
- Press Ok.
Step #5: Save the Image
- Select File from the top menu, and then select Save
- Select My Computer from the options in the left column
- Enter a name for the image file
-
Select the Format
- For photographs, always select JPEG
- For images that are graphics, or that require transparent areas, select PNG
-
For JPEG, adjust the quality slider until the size is around 100Kb,
increase the quality if the image looks pixelated or boxy.
- The smaller the file size, the faster the image will load.
- Select the location on your computer to save the image into and press Save.
And Viola (that's her name, don't wear it out), you now have an image perfect for your website.
Pro Tip: Before saving the image, have a look in the Adjustment menu at the top. Experiment with Colour Vibrance or Curves to change the colour balance of your images. You can also apply some automatic filters like Sepia or Old Photo to create different effects.
Resources:
How do you create your images? Got any little tips or
tricks that you'd like to share? Let us know on our iASP Central Facebook Page, or Get in Touch.
*A statement supported by this website: Be Seen In 2015.
