1

Pixel art of the sizes 16x16, 32x32, 64x64 px is too small in size (ranging from 100-500 Bytes). How do I display them properly scaled on a website? for ex: cryptopunks website has punks which are 24x24 px and size ~ 200 Bytes, yet on the webpage they are very well displayed. When I do "open image in new tab" or download image, the image opened/downloaded is ~200bytes in size and of 24x24 px.

Improve this question
0

2 Answers 2

Reset to default
0

I would say that you should upload your images as they are, let's say 64x64px, and rescale them using CSS.

<img src="face.png" class="scaleMe">

.scaleMe {width: 640px, height: 640px;}

Of course, this needs to be refined to be responsive. But that is the idea.

There are some CSS properties you can add, for example, use the image-rendering to decide if you want to smooth the edges. There is one pixelated... probably you should use that one.

https://developer.mozilla.org/docs/Web/CSS/image-rendering

But I am not sure if those properties are standard yet. https://caniuse.com/?search=image-rendering

enter image description here

I must say that this will only work if you have control over the website. If you are uploading it to a third-party webpage, you need to see the specification for the images. In that case, you probably need to resample them using nearest neibourg algorithm.

Improve this answer
3
  • 1
    This seems like a good solution as I won't have to upscale each image and it will apply automatically to all images, but then again, will this rescaling using CSS have any kind of delay while loading webpages or cause any visible performance issues?
    – Satyam Srivastava
    Sep 23, 2021 at 18:39
  • On the contrary. Loading a tiny png image is faster than a bigger image. The CSS instruction is also very lightweight.
    – Rafael
    Sep 23, 2021 at 19:32
  • 1
    Thank you so much @Rafael
    – Satyam Srivastava
    Sep 23, 2021 at 20:30
0

The images on the site you mentioned have been rescaled and resampled. You can use a raster image editor to do this.

In Photoshop do Image > Image Size, set resampling on, set to "Nearest neighbour", and enter a new larger size.

Or using GIMP (which is free), do Image > Scale Image, and set interpolation to "None", and enter a new size.

An example below using GIMP

Original 32x32px image on the left, rescaled to 200x200px image on the right.

enter image description here

Then you can export as a PNG image, and use it on your website

Example

enter image description here

Improve this answer
4
  • I have a doubt, as you said "The images on the site you mentioned have been rescaled and resampled", but when I do "open image in new tab" or download image, the image opened/downloaded is ~200bytes in size and of 24x24 px. So are these images really upscaled? And, can this upscaling be done using some batch operation?
    – Satyam Srivastava
    Sep 23, 2021 at 18:37
  • @SatyamSrivastava Sorry, I meant this graphic here which has been scaled. You're right, the individual ones seem to be rescaled in the browser. Automation is possible in Photoshop using actions, GIMP would need a script. Possible also using ImageMagick which is command line based. The example mushroom image above is still quite small at only 1.2kb, converting to Indexed Colour could help reduce it to around 880byes.
    – Billy Kerr
    Sep 23, 2021 at 19:24
  • Thank you for the insight @Billy Kerr
    – Satyam Srivastava
    Sep 23, 2021 at 20:30
  • @SatyamSrivastava Here's the css actually used in the site: .pixelated { image-rendering: -moz-crisp-edges; image-rendering: pixelated; }
    – Billy Kerr
    Sep 24, 2021 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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