Why are the edges on these images so different?

Question

I am currently making some web images and am getting very riggid lines. Exhisting images on the website seem to differ (these images are pre me so I do not know how they created them so differently).

Does anybody know why they are so different? The image on the left has very smooth edges, whilst the other is blurry and jagged!

The image I am working on is also appearing very jagged but from looking at the properties of the 2 images shown, there does not seem to be a difference!

The images I am working on need to be 150x150 pixels which is not helping the matter as the individual pixels are so visible.

Any tips on how to create a softer edge of improve the quality of the image on the right would be a huge help!

---

EDIT

This is one of the images I am using. Originally it is 900 x 650 pixel JPEG. IS this too large to try and rezuse to such a small image? Or is there a better format to use than JPEG? Thank you for your help!!!

Answer 1

The previous person took small images and increased the size, or over-sharpened them. probably both.

The best option for the image is to make a layer mask or clipping path to make the edge clean. For the other pieces, you'll probably have to re-draw them.

Answer 2

If you are taking photos and then clipping out the background, then you may have better results using a higher pixel count image and then resizing after clipping.

The thought process here is: when you have fewer pixels to work with, your selections have fewer pixels to choose from to "snap to," and when they do snap to the pixel grid, the error left-to-right and up-to-down is larger with respect to the scale of the image.

So, if you have to provide 150px square images, experiment with an original that is 300px or 450px square. Clean it up, then export at 150px square.

If your finals include the red banner and text, you might want to clip the product, export smaller, and then place that export into the final with text.

Note your text will look better (the white-on-red especially) in a PNG-24 or non JPEG format.

Answer 3

The images with the rigid lines were probably resized from a smaller size image to a bigger image.

Unfortunately, you can't really re-save these images again and make them look better if you don't have them in their original size but you can improve the edges by using a layer mask and hide that rigid edge with a brush; a brush with a hardness that isn't at 100% but something like 85%.

It's still not the perfect solution since you will need to also work on that overlapping item with the white outer glow, and a layer mask won't fix this unless you take that item away from the background item, add a layer mask to it as well and then incorporate it again with the other item and adding a glow to it..! It would be way easier if you could simply get the original pictures and do that montage again yourself, in high quality, and then "save for web" them to a smaller size.

Regarding the illustrations, you'll probably need to draw them again or find a better quality image. It will probably take longer to try to improve that wavelength illustration than simply doing it from scratch or buying a stock image with a similar graphic. The best (and easiest) software to use to make that kind of illustration will be Adobe Illustrator.

See how to use a layer mask here.

To save images or graphics with sharp edges or lineart or texts, you don't always need to use a PNG; sometimes the JPG compression is still good enough, and less heavy than a PNG. You'll need to make some tests for yourself and see what's acceptable. PNG usually ofter the best quality for web for rasterized images but they're also heavier for images that have a lot of colors or big sizes images. See what's the best fit for your needs!

When you use the "save for web" in Photoshop, you can resize your image there by changing the size values. You can also see a preview of your image at 100% depending on the compression and the file format you select. On the bottom left, you can see how many kb your image will be once saved. The same can be done with Illustrator "save for web." Additionally, you can use SVG file format with Illustrator.