0

I have an image that is: 24 x 11 pixels. In photoshop I have saved it as optimised for the web as .png

The size of the image is 1.05kb Is this normal? Is there any way to reduce this size as it seems high?

The reason is I want to be able to layer lots of these on top of each other and I am trying to cut down on the size. What would the best way to get around this problem be?

2

You could post it as a gif image as that could be smaller, but it could be lower quality. The image you have is already pretty small but if you really want to experiment to make it smaller this could work.

You can also tell it to be a certain file size here

1

As stated, 1.05kb is very small. However, there are ways to reduse the size of any image further in photoshop at the expense of image quality.

In the 'save for web' Dialogue you have various settings to accomplish this.

Got to your 'Save for Web' settings.

Save for web

you can adjust the size of your image prior to saving via the 'Image Size' dialogue. Notice the size of of the file that will be saved (highlighted 'PNG-24 63.26k in the example's case)

Image size

enter image description here

enter image description here

if you don't require that your images have transparency as in transparent backgrounds, then saving your files as a JPEG instead of a PNG will also result in a smaller file size for the same given image dimensions. In addition you can vary the size of the image to further reduce size by selecting 'Low, Medium, High,Very High or Maximum .

JPEG Dialogue

Image format select

Something to consider with image for websites is the speed at which they will be loaded when first visiting a webpage.

Photoshop helps with this by providing information for a given image size when combined with a network's speed.

Click 'Select download speed' drop down menu to view image loading speed for a given network speed.

Download speed

enter image description here

Download speed menu

drop down menu close-up

Hope this helps

Rob :-)

  • I do this, and then I also run my files through [kraken.io] (kraken.io/web-interface). It reduces the file size even further, and usually doesn't sacrifice much quality. But you have to keep your eye on the before and after results. – Kurtis Beavers Feb 2 '15 at 14:51
  • This isn't necessarily correct. JPG doesn't give you a smaller file size than PNG in genera. It all depends on the actual image and compression settings. Reducing the pixel dimensions helps, of course, but isn't relevant to the question (as they already have a defined pixel dimension size). – DA01 Feb 2 '15 at 16:31
  • For the same given dimensions (10 x 8 inches for example) of any given image, JPEG will be smaller in terms of file size. PNG is a lossless, compression file format while JPEG is a Lossy format therefore the Lossy format will tend to be always smaller given the same dimensions. PNG files are more colour accurate than JPEG and also offer transparency as opposed to JPEG. Hope this clarifies :-) – Rob Radix Bailey Feb 16 '15 at 10:33
1

Most of these answers are stating that if you save it in a different file format, you can reduce the size.

This is incorrect. Different file formats may make your image smaller, of course, but it all depends on the image itself as well as the particular compression and optimization settings you are using for each image.

So, yes, certainly try saving your image as a JPG or GIF and see if it helps, but it's no guarantee it will be any smaller.

As for your current image being 1k, note that that is already really small. There are also limits to how small an image can get that are somewhat out of your control:

  • minimum hard drive sector size. The image the size is reported at on your hard drive may actually be bigger than the image itself. This is due to the fact that the larger the hard drive, the larger the minimum sector size is. For really small files, you'll note that moving them to a smaller sized hard drive actually will report a smaller file size. This isn't relevant to internet bandwidth, of course
  • file meta data. Most all files have meta data. This is data not directly related to the image's look, but is ancillary data that the browser or file system may or may not use (such as a file icon). You can use software to modify or strip this meta data away.

As for your concern, that's not entirely clear. Are these all separate images, or just one image? If it's just one image, then in terms of bandwidth, it's moot, as only one copy of the image needs to be downloaded from the server for total bandwidth usage of 1k.

If these are all different images, then you're likely better off using sprites. This is where you take all of your individual small images and place them into one large image. You then use CSS to 'crop' each individual image out of the sprite on the browser-side.

While this may not reduce the total amount of files size, it drastically reduces the amount of server requests which can greatly reduce download speeds.

-1

Unless you need it to be transparent, save as a jpg. They are much smaller. Also make sure you resolution is set to 72, many designers have 300 resolution for the web and it is unnecessary.

  • But the compression in jpeg is not lossless. – Mensch Feb 2 '15 at 10:52
  • Yes, it is a trade off. But it does reduce the file size. This article explains it pretty well whatis.techtarget.com/definition/lossless-and-lossy-compression – Paige Feb 2 '15 at 15:51
  • This is not true. It may be much smaller. It may not be. All depends on the image and compression settings of each format. Also, your 'resolution' setting in photoshop is meaningless online. – DA01 Feb 2 '15 at 16:32

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.