Our Blog

6 Photo editing tips for website image optimization

The simple fact is that photos contribute a major part of the content on a web page, as you would not spend much time at a web site that offered little more than text. Unfortunately, the incredible impact that images contribute to website traffic is often discounted. Many people complain that too many images make the page load slowly. However, what they don’t realize is that by simply optimizing the images, you can fit more images into a smaller area, as well as make your page load or upload much quicker. It is not a matter to just resize the image, but you actually do a website image optimization for the best effect.

Although there are countless ways to create amazing photos with a camera, image optimization technique for a website can be a bit of a challenge. With so many different options available, photo-editing tips can be a tremendous benefit for beginnings and professional photographers alike, aiding them in shooting from the perfect perspectives. With enough practice, one can definitely create an outstanding portfolio to showcase to clients; both in print media as well as online format. It is a known fact that many E-Commerce sites require that the imagery meets a basic standard of 500-1500 pixels. Therefore the image quality is extremely important, to stay ahead of the game. Many website owners find these requirements difficult to meet, while still trying to develop a high quality image.

Due to the fact that millions of sellers use eCommerce sites like Amazon, and Ebay, the product images that one uses absolutely need to literally jump off the page. If the images on your web page are not optimized properly, you may actually lose thousands of web visitors and potential customers who visit your website, but leave just as quickly. When putting images up on the Web, it is critically important that the images “pop” out at you and hold your attention, so you stay on the web page longer. At the same time, you need to employ image resizing tips and image optimization to make sure that the page loads and reloads quickly. There is nothing more annoying, than a web page that takes forever to load. Most people get tired of waiting and move on to something else, or someone else’s web page. For anyone who has an eCommerce site or uses images on their website, you absolutely need to know how to do website image optimization. I am going to show it using the bellow image.

Original image

The following are 6 useful image optimization tips:

1) First, You should straighten the image in Photoshop

You can also adjust images that were taken when the camera was crooked or tilted, or if the photo was misaligned when scanned in with the Measure tool from Photoshop. So the first thing you would do is select the tool you wish to use, then click on the image and rotate it as you need to straighten it out, then click OK. Your image is now straight and canvas behind it will increase in size to fill the space needed.

Straightened the image

If you choose to use the Crop tool, you will find that this is actually quicker, as you have to crop the images and trim around the edges at any rate, before you are finished. This will also do both the cropping and straightening all at the same time.

2) Cropping the extra unused area

You can use the Photoshop software to crop the extra unwanted areas from your original image. It is seldom that you will find an image that does not need some type of editing or retouching.

One example would be if the image had too much area in one or more areas at the edges of the photo. You would want to crop the entire unwanted areas to put the image in proportion. So you would go to the toolbox, select the crop tool and then choose the area of the photo you wish to crop. The area will be highlighted when you release the mouse button. To crop the selected area, click enter on your keyboard. You may also use the marquee tool to select the area you wish to crop as well.

Croped the extra unused area

So after removing the extra unwanted area form the image, you would remove the background with all the unwanted elements and create a reflection shadow or a drop shadow in the image.

3) Now, you need to change the background of image by pen tool.

One of the most commonly used techniques for website image optimization, is to change the background or remove it from the image, by simply clipping path. Any objects or background that you do not wish to have in the photo can easily be removed by using image editing software. Most likely, your image has other unwanted objects that you want removed as well.

You will be surprised at how simple it is to use a hand drawn clipping path, and using the Pen tool to change or remove the background from the actual image.

Removed background by pen tool

Next, after you have removed the unwanted background material from the image, it is ready to go up on the web. Though other Photoshop tools that you may find useful for removing background are the Magic Wand Tool, the Magnetic Lasso Tool, and the Quick Selection Tool although many people have found that the Pen Tool is extremely simple to use when executing the clipping path, and it has become exceedingly popular in recent years.

4) Creating Reflection Shadow or a Drop Shadow

The Drop Shadow is a good image optimization technique to use when you wish to improve a photo for web use. For example, the use of shading gives the image incredible depth. When you add photo shading to a flat, uninteresting image, it literally brings it to life. Photography is influenced tremendously by filters, light and shading. Your images are made up of a combination of shading, lighting and dark areas. Your images are made up of varying degrees of light and dark, which create contrast that makes the image stand out.

An image may have little shading and insufficient contrast, which occurs when there is not enough light or the camera is of poor quality. Other factors that may cause little to no shading or limited contrast can be something as simple as dirt on your lens. A dirty lens has often been the cause of poor quality photos, but fortunately, is a flaw that is easily corrected. You can also alter or improve upon the appearance of your photo by adding special shading effects to the image. This could include a reflection at a particular angle, a natural shadow, or what is known as a drop shadow. You would use a Feather tool on the image to add monochromatic shading to a particular area, or specific shape. Maybe you would choose to add the shading inside of a specific area like circular or elliptical for instance. Next you would enhance the length of the stroke, the balance and increase the sharpness. An image that displays the correct amount of shading is both attractive and eye catching. The result is a beautiful, well designed image, that you can be proud to display.

After created the shadow of the image

5) Resizing the image for web use

Although cropping the image does reduce the dimensions, it is not exactly the same as resizing the image. Although your camera takes high resolution photos, you generally want to “down-size“ the images. This is because many websites won’t take large images and also if you make the images smaller, it improves their appearance. For example, if you need 600×600 pixels for the website, and the size is actually 1200×1200 pixels, then you can resize the images in Photoshop.

First you would open the image in Photoshop, then you need to reduce the size of the image to lower the resolution. In order to do this, you would want to go to Image->Image Size and then type in the target pixel size in the width input with the word pixels chosen next to it. When you type in the width, you will notice that the height begins to adjust to a lower number. Now the image is smaller in size than before. You will also notice that the noise may be gone as well. The next step is to sharpen the image further, which is the last step before moving it to the web. The last and final step is to move the image to the web.

Resizing the image in photoshop

The secret to resizing photos is to make sure that you only resize the image once, as doing it several times may cause the image to become blurry. You also need to insure that the image is set in RGB color mode prior to doing anything.

6) Saving the images in “Save for Web & Device” format

The other advantage to saving the image in “Save for Web & Device” format decreases the size of the file, thereby making it easier for the web page to load. First you would save your image in standard format, (Photoshop has a “Save for Web & Device” feature already built in for convenience). This optimizes the dimensions of your image, making it fit perfectly onto the web page, with an enhanced appearance, for a clear, sharp picture. Again, reducing the size will make the page load much faster. So when you are ready to move your image to the website, just open your Photoshop program, click on “Save for Web & Device” from the file menuand you simply move your web site ready image to the web.

Saving the image by save for web and device format

Showing the final image bellow.

Final image after used 6 photo editing tips

The main difference between user experience and high quality work is sometimes a problem, unless you have experience and know what you are doing. If you have a lot of images on your website, it is important that they are all high quality. Your images should be sharp, have good color, luminescence and excellent contrast and your photos should speak for themselves, you want the pictures on your website to enhance your products for the highest number of sales and return visits from your customers. So the colors, textures and tones of your images are an important part of your presentation.

Regardless of when or where the photo was taken, if you plan to use it for your web page, then you know that it should be your very best shot. Although website optimization has improved a great deal over the last few years, it is still vitally important that the images look as sharp, and crystal clear as you possibly can. You may spend considerable time on the content of your web page, but the images and photos are just as important. You need to make sure that your images are of the highest quality as well to make a favorable impression on your customers and visitors.

If you follow these helpful tips, you can be fairly sure to have a web page to be proud of in every way.

About the auther 

Rokaiya is a creative graphic designer, Internet marketer, and a blogger. She joined the team of clippingpathspecialist.com is a brand of Outsource Experts Ltd on 2010 as a head of it’s marketing department, and she's been working with the tool ever since! She likes to share tips and tricks on photo editing and graphic design!

    Find more about me on:
  • facebook
  • googleplus
  • linkedin
  • pinterest
  • skype
  • twitter
  • youtube
Tags: , , , , , , , , , ,

Show Comments (14)

This is a unique website which will require a more modern browser to work! Please upgrade today!