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 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.
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.
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.