Design Post Update: image optimisation

Showing posts with label image optimisation. Show all posts

Thursday, October 6, 2016

Read Optimising Images for the web Now

Optimising an image in Photoshop

In this tutorial you will learn how to change the size by using the crop tool and how to optimise an image for the web in Photoshop. When an image is optimise it helps for a faster download when using the image on the web.

Step One:

In Photoshop, open up an image that you have saved by clicking on open and selecting the image you need.

Opening the image to be used in Photoshop

The image I am using the below image for the demo. I downloaded the image from google images. It is a non-copyright image,that means it’s free to use without having to pay any fees. I searched in the “Search Tools” area in google images and selected “Usage Rights” and selected “Labeled for reuse with modification”.

Selecting the usage rights on Google Images

Image used for the demo

Image used for cropping and optimising in Photoshop

Step Two:

If you would like to get rid of any unwanted area of the image, you can crop the image. You can use the crop tool as show below to get rid of unwanted areas.

Selecting the Crop Tool in Photoshop

Appearance of the Crop Tool on Photoshop

Selection area on the image once the Crop Tool is selected in Photoshop

Step Three:

To save this image to use for the web. Click on file and the selected “saving for the web”.

Selecting "Save for Web" in the file area on Photoshop

Step Four:

The “Save for web” window will appear. In this window, selected 4-Up, select png-24 for a faster download and for a greater number of colours of the image to be displayed when using it for on the web.

Pop up menu to help you to select the correct format for your image to use for the web

Then you can save your image as beach_opt.png.

Saving your optimized image

Read Restoring A Damaged Black & White Photograph Now

SmartGirl adobe photoshop , basics

Black and white photograph for restoring.

In this tutorial, you will learn how to restore a damaged Black and white photograph by using tools you would find in Photoshop.

Step 1

The photograph that was picked

I looked around for an old Photograph with as much damage to it as I could. I settled on this picture of a Man and Women on their wedding day.

Step 2

Touching up using the Clone stamp tool

Using the “Clone stamp tool”. I clicked ALT + left click on the area that had a bit of colour (Note. This should be as close to the rip and tear as possible) and once the colour was selected I stared clicking on the tears and rips, bringing the colour to them.

Step 3

Fixing the big tear.

I picked a part on the photo which was the most damaged, which was the two faces and I planned out what I would have to do and what tools I would have to use.

Step 4

Using the spot healing tool.

I zoomed in on the biggest part of the tear, which was the tear by the lady’s eye and I fixed it up using the spot healing tool and the clone stamp tool. The spot healing tool is for smaller rips and tears. While the spot healing tool is selected find the area you want to fix. Click several times around the rip and tear and the colour should be brought into the rip and tear.

Step 5

The lace shawl

I used the clone stamp on the tears and when I was finished I used the spot healing tool on the patch by the lace on her shawl.

Step 6

The roof of the car.

I then picked the tear up by the back window of the car and again I used the clone stamp and spot healing tool and I was able to get the tear to look like the roof again

Step 7

The bouquet of flowers

After that I moved down to the tear just by the bouquet of flowers and zoomed very close to the tear and spot healed it once more.

Step 8

The finished product.

I used a magnetic lasso which is a tool that automatically clicks around the edge of a colour/graphic. I used this tool to circle their faces and I used a noise reduction filter and this is the finished product.

BEFORE

Black and white photograph with rips and tears.

AFTER

Black and white photo after its restoration.

SEO For Images

SmartGirl google images , google ranking

Screenshot from the Google search results page

If your web graphics are optimized for Image search engines like Google they will help to generate an alternate source of traffic to your website. But unlike regular web search where we are more familiar with how search engines rank content, the rules associated with Image search rankings are very different and often based on assumptions.

Why do I say this ? Try a search for "Google" on Google Image Search. None of the top results show images from the actual Google websites or even associated websites. Now if you repeat the search for Amazon, none of the top 5 images displayed are from the official Amazon website. So how do individuals and small companies manage to stay ahead of corporate giants in Image search results? It's to do with image optimization techniques like the ones discussed below.

Regarding optimization, here are 6 simple things that you should keep in mind for getting good rankings in Google Images Search:

1. Image File Name

Use a descriptive image file name which includes keywords related to the content of the image. If your webpage has pictures of an old country farm house - use file names like 'old-country-farm-house.jpg' instead of the default camera file name like IMG_401.jpg. In this way you are providing relevant information about the image to Google rather than just a string of meaningless numbers or letters.

2. Alt and Title

Attach a 7-8 word description with both the ALT and TITLE attributes of the IMG tag. Make it a habit to use these attributes. An example could be...

<img src="old-country-house.jpg" alt="dilapidated old county farmhouse in countryside" title="country style farm house ageing and run down">

3. Discuss The Image

A short two line description of the image just beneath the graphic is the best way to describe an image. It can work wonders for your image search rankings as well. For a live example, read any news story on the BBC website. The HTML tags enclosing the image descriptions will also matter. A description alongside a heading enclosed in H3 or Bold tag will have more weight than the one with just a description enclosed in the paragraph tag.

4. Wrapping Text

If possible, try to wrap text around your images using the CSS code of "float", like the old country farmhouse image above. If you site design won't allow wrapping text or if the image is large in size, try to place the images near text that describes the context of your image. Web Photo Galleries which have no text on the page can make use of the Title and Meta tags to insert information about the images.

5. Image Position On Page

From personal observation Web Images placed at the top of the page are more likely to appear in search results than the ones which are at the bottom. They do not have to be at the very top of the page but certainly 'above the fold' images tend to perform better than those below the fold.

6. Image Size

Another personal observation is that images which are very large or very small tend not to do very well in the search results. Try to keep images at sizes which will be useful to others who may be looking for them. In my experience images around 600px x 400px tend to do well.

If you do decide to use some or all of these tips, please keep an eye on your image performance and let us know how you get on.

Design Post Update