Images are an essential aspect (most of the time) to any website. They bring the website life and make it visually appealing. Plus, people love photos! But, a lot of times, the images they are using are too big or contain unnecessary transparent pixels.
How do I know if my image contains unnecessary pixels?
Generally, if the image on your website doesn’t look right or seems too large you might need to adjust it. For example, if you placed an image on your site and there is a lot of space around it, you might have transparent pixels surrounding your image—which can be removed.
OK, so how do I fix this?
In order to make sure the image you are using is the correct size (also important for speed factors) and doesn’t contain unnecessary pixels, we need to use a program like Adobe PhotoShop (there are other programs out there, but we prefer to use PhotoShop).
If you do not have Photoshop, you can purchase it or use it for free. Once you have it though, you will probably want to keep it as it is very useful.
The “fun” part
OK, so now the actual “fun” part. Once you have an image, drag it (or place/open it) in Photoshop. A simple way is to just have your image on your desktop and literally drag it into Photoshop. Once the image is in place, you can see that there is a large amount of space that is not needed (or transparent pixels).
Now there are a few ways to remove this. The way we are going to show you can be done in a few simple steps.
1. Move your mouse to the menu and hover over “image” and select “trim”.
2. A pop-up will display asking you what exactly you need to be trimmed. Select “transparent pixels” and the image should be set to its actual size (with no transparent pixels).
3. Press “OK” or hit Enter.
Now all you need to do is to save the file and you are good to go.
Using a program like PhotoShop can enhance your website’s images by decreasing their size and removing unneeded space. This can be accomplished by removing transparent pixels in a few simple and easy steps.