Transform: scale pixalisate my images

dear forum members,

I’m trying to make bigger an image, well I’m using a wordpress theme for this, and unfortunately within the HTML structure of the theme it’s not possible to make bigger the image naturally itself.

Ok, I tried to use "transform: scale(1, 1);" but it makes my image pixalization. Complete frustration.

Hm. Maybe there is still a hope. I’m using image size 607px × 455px and in PNG. Will it reduce pixalization if I double the size and save image as JPG?
This is my headache page:

I appreciate your advice.
thank you,

Pixalization happens because you’re trying to make the image bigger, precisely. It has nothing to do with the Wordpress Theme, it has to do with the image itself.
You have to create the image using the largest dimensions that you will use, not medium or smallest. Making a image small and still looking sharpt is easy but making it bigger means that the computer needs to fill in the information it lacks and therefore it will look pixelized.

I don’t know if I’ve been clear.

Having said this, do be careful and study the people that visit your sites, if you have access to your logs.
It would be cruel to force someone to download a large image when accessing your site from a mobile phone, as an example.

PNG (like JPG and GIF) are bitmap images (where each pixel has its own colour information). You cannot directly enlarge a bitmap image without it losing quality because enlarged bitmap images have new pixels inserted into them in order to stretch the image to the specified size (with the new pixels being given colours on a best-guess basis), which is why you see a blur.

In order to enlarge a bitmap image, you’ll need to convert it into a vector image, and then enlarge that. The following website should do just that:

EDIT: Or you can do what @molona said - create the image as large as possible, and then scale it down to the required dimensions.

Thank you very much for the advises @molona and @tpunt !I’ll try both solutions. And thank you for the bitmap explanation, it’s clear now :smile:

1 Like