While working with Images in a website, there might always be a need to have transparent Images. Since most of the Images have a white background and if that Image used in a background which is not white, it would appear out of place. So the solution is to remove the white background. Photoshop has a way to do this.
A key point to note is that a white background cannot be removed for jpg images. It can only be removed for png and gif file types. So in order to remove the background one would have to follow these steps-
- Open the Image in Adobe Photoshop.
- Double click the Layers tab on the bottom right hand corner.
- Click “Ok” on the dialog box that appears.
- From the toolbox, pick the “Magic Wand Tool”. When used over a color, it removes it wherever it appears on the Image.
- On the Image use the Magic Wand tool to click on the white background.
- Save the file as .gif
Now you should see that the Image has become transparent and it does not have the white background anymore 🙂 .
If we are Inserting Images on the web we normally modify the size by applying the width and height attribute in the img src tag. We could make a large Image appear smaller by simply specifying the pixels for the height and width. This is well and good atleast from the display standpoint.
But one thing to note is that the Image still has the original shape wherever ever it is stored in the web server. And once the page loads, the whole Image loads and once it encounters the height and width attribute, the Image size reduces or increases. This is only visually, but in the back end the Image is actually the original size.
It would not help that we Intend to show a 100 kb Image but we always load a 1 MB file. This actually slows down the loading time for the web page. So it is always a good practice to resize the Image to your needs before adding it to the web page.
This can very well be done in Photoshop, the popular tool for editing pictures. All you have to do is open the Image in Photoshop. Goto the Image dropdown on the top, then scroll down and click Image Size. Enter the height and width of the Image you would like to have and save it.
Now Adobe Photoshop would have reduced the size of the Image to your specification.
One of the most popular products from Adobe is the Photoshop. It is widely used by many as their photo editing tool.
One of the main qualities of Adobe is that most of the basic operations can be done quite easily such as Changing the resolution of the image.
As we all know images have a standard format in which the resolution is defined : width x height. And generally the unit of measurement is pixels. For example 500x 720 would be 500 pixels width and 720 pixels height.
Let’s see how we can change the resolution of an Image. Changing the resolution is basically changing the height and width of the Image. So if the original Image had a resolution of 800 x 1200 , we could change it to 400 x 800.
1. Launch Adobe Photoshop.
2. On the panel at the top click on Image.
3. Scroll down the drop down and click on Image Size
4. Enter the new width and height of the Image
5. Uncheck Constrain Proportions.
And apply it. You would notice that your new changes have been applied.