Jump to content

No blur image resizing?


MrFish
 Share

Recommended Posts

I have an image that is supposed to be pixelated (it's pixel art). I want to resize it to 200% and keep the hard pixelated corners but they automatically blur slightly when I resize it. Is there anyway to get html to resize images without smudging the edges?

Link to comment
Share on other sites

No - the resizing is handled by whatever algorithm the browser has, and if that algorithm blurs the edges, there is nothing you can do about it. You could resize it server-side, where you have more control.

Link to comment
Share on other sites

I have an image that is supposed to be pixelated (it's pixel art). I want to resize it to 200% and keep the hard pixelated corners but they automatically blur slightly when I resize it. Is there anyway to get html to resize images without smudging the edges?
1) What program are you using to resize it? Most have an option to turn anti-aliasing on or off, which is probably what's causing the blurring. 2) As Synook mentioned, doing the scaling on the server-side with something like gd or ImageMagick will allow you to resize without the blurring. If you server has either of those installed then it would be relatively easy to do it that way.
Link to comment
Share on other sites

1) What program are you using to resize it? Most have an option to turn anti-aliasing on or off, which is probably what's causing the blurring.

This is just html so I guess Chrome, like Synook was saying. I don't believe Byethost has ImageMagick or any equivalent so I'm asking on the forums. If it doesn't can I do it with php?Edit: Oh wait- looking into GD now.

Edited by MrFish
Link to comment
Share on other sites

I could, which I have done in photoshop. But I'm making a browser game that utilizes ajax for a combat system that closely resembles Kongia on Kongregate.com (if you have seen it). The character will be able to walk around a tiled world with their sprite-character but in combat will go to a turn -based strategy system. I don't want to create a separate image for EVERYTHING that is scaled 300%, So instead will just use php to scale up the users character every time they add some equipment. I thought I was going to need to use css/javascript to float equipment over the base image (which would be a pain) but now I can just use PHP's GD! It's a wonderful world after all :)basehuman.pngIt's supposed to be pixelated. I don't want it to blur when I scale it up with html. Thanks for your help guys!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...