6 photo editing tips for website image optimization

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.

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.

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.
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.
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.
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 600x600 pixels for the website, and the size is
actually 1200x1200 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.

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 menu and you simply move your web site ready image to the web.

Showing the final image bellow.
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.
Article published on http://www.clippingpathspecialist.com/tutorial/6-photo-editing-
tips-for-website-image-optimization/
About the author: Rokaiya Yeasmin Munni
Graphic Designer, SEO Specialist and Deputy Manager (Marketing Division)
At Outsource Experts Ltd, which is the mother company of
http://www.clippingpathspecialist.com

6 photo editing tips for website image optimization

Related slideshows

More Related Content

6 photo editing tips for website image optimization