0

enter image description hereenter image description hereI'm trying to reduce this image for an email design. But when i reduce the size for web, it get's blurry (I attached a screenshot of how blurry it is on my phone). This is the first time ever running into this problem. What am I doing wrong???

enter image description here

enter image description here

  • oh and I'm reducing it to 183 x 140 px. I heard ouse the Bicubic Sharper setting under Image size. but its still pretty blurry. – user26187 Nov 9 '15 at 21:03
0

Sorry but why would your reduce it to 183 x 140 px?

It's way too small, 180 px is about 6cm (at 72ppi), your images above have 15cm (equivalent to 425px at 72ppi), so, sure, when you have to enlarge an image 3 time you will get that blurry/pixelated result.

A somewhat "basic" email width is around 600px. Anything less that that will get blurry/distorted/pixelated in your email.

To test this, reduce your image to 600x459px and try it again and you will see the difference.

|improve this answer|||||
  • It's a basic email template that has 3 pictures next to each other. so that they all fit next to each other under the 600px length of the email. But yes, any image that small will be blurry no matter what. i think. I will attach an image of the email template – user26187 Nov 9 '15 at 21:40
  • 1
    @user26187 If the script has to enlarge the image, too much it will turn out that way, when shrinking it it's another story (a bit better) but still, too much will also distort the image. – Alin Nov 9 '15 at 21:46
  • 1
    @user26187 In the case of your template (after you updated the question) in order to not make it blurry at due to script resizing, check inside the script for the expected image size and resize it to exact that. It's the best way to go. – Alin Nov 9 '15 at 21:48
  • @user26187 Your comment here explains it. You're resizing the image to fit a grid of three images next to each other within 600 px; but in your phone screenshot, the template is changed: there's no grid, and each picture takes up the entire width, making it about three times as large as it was meant to be. – Janus Bahs Jacquet Nov 10 '15 at 8:10
  • @JanusBahsJacquet Yup, That's why I mentioned looking at the script expected size, it surely uses media queries for a responsive design :) – Alin Nov 10 '15 at 8:12
1

This is normal when reducing an image to a small size, it is called Pixelation. Try not reducing it to such a small size.

Work out how big you want the final image to be on screen (say 10cm wide), and then calculate how many pixels that will be, on a average screen (about 400px for 10cm). Then make sure you do not reduce the image to anything below that resolution.

|improve this answer|||||
  • gotcha. that's what I thought. I just wanted to be sure. Thanks everyone! – user26187 Nov 9 '15 at 22:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.