I am trying to batch resize several hundreds of images in Photoshop but I encounter a strange problem: The smaller images have a larger file size.
I am using File -> Scripts -> Image Processor with quality setting set to 8.
For example one original file was 300x300 and 5,41 kb and the new resized image is 200x200 pixels and 17.9 kb!
How is this possible? is it related to the amount of Pixels per Inch? Resolution? The color blend palette and the number of colors used? Or something else entirely? I don't know much about these subjects so please try to help me with a constructive answer.
What is the best way to make sure they are actually smaller in file size also? (I am optimizing a websites page speed)
Thank you in advance!
In most cases, the file size of a picture with a lower resolution is bigger than it's comparison an ICC profile is embedded. Most websites (developer) ignore color management to achieve smaller file size. To find the optimal file format, you should use "Export for web" to get a preview.
I understand the use of thumbnail in network applications but assuming all the image are in the application itself (photo application), in this case do we still need thumbnail images for performance reasons or is it just fine for the device to resize the actual image on run time?
Since the question is too opinion based I am going to ask more quantitively.
The images are 500x500, about 200-300kb size jpg.
There will be about 200 images.
It is targeted for iphone4 and higher, so that would be the minimum hardware specs users will have.
The maximum memory used should not pass 20% of the devices capacity.
Will the application in this case need separate thumbnail images?
It depends on your application. Just test performance and memory usage on device.
If you show a lot of images and/or they change very quickly (like when you are scrolling UITableView with a lot of images) you will probably have to use thumbnails.
UPDATE:
When image is shown it takes width * height * 3 (width * height * 4 for images with ALPHA channel) bytes of memory. 10 photos 2592 x 1936 stored in memory will require 200Mb of RAM. It is too much. You definitely have to use thumbnails.
Your question is a bit lacking on detail but I assume you're asking if, for say a photo album app, can you just throw around full size UIImages and let a UIImageView resize them to fit on the screen, or do you need to resize?
You absolutely need to resize.
An image taken by an iPhone camera will be several megabytes in compressed file size, more in actual bytes used to represent pixels. The dimensions of the image will be far greater than the screen dimensions of the device. The memory use is very high, particularly if you're thinking of showing multiple "thumbnails". It's not so much a CPU issue (once the image has been rendered it doesn't need re-rendering) but a memory one, and you're severely memory constrained on a mobile device.
Each doubling in size of an image (e.g. from a 100x100 to a 200x200) represents a four-fold increase in the memory needed to hold it.
I'm trying to optimize a page which loads a lot of images from S3 and which needs to run on mobile devices, too.
Images are available in S,M,L,XL resolutions, so on a smartphone I'm usually pulling Size M for the grid thumbnail images. These pictures measure: 194x230px and usually "weigh" around 20k, which I think is far too much.
Question:
If I use Irfan and the RIOT plugin, I can easily shave off 10k from the filesize with the image still looking ok. I'm wondering if there are any guidelines regarding optimal image filesize in relation to image dimensions or is this purely a trial and error process? As a side question, is there any server-side tool, which also uses the RIOT plugin?
Thanks!
What is the best way to store images for web-sites?
What size I should not exceed?
Now, I save all interface-files in png (mostly in sprites) and usual images in jpg's. Some images are about 100-150Kb.
What quality and compression should I choose while saving images?
Preparing Images
To prepare images for presentation on
the Web, follow these steps:
Begin a new file. If it’s a photo or original artwork, use 300 dpi as
the resolution. If you are creating
something simple, set the resolution
to 72 dpi.
Use the drawing, text, shape and other tools provided in the graphics
program to create your image.
Save your file in the native file format (a file type meant for editing
that is specific to the image editing
program) of the program you are using.
For example, a Photoshop document
creates files with a ".psd" extension.
If you need to make a change or edit
later, do it in this file rather than
on the Web.
If necessary, lower the resolution of the image to 72 dpi.
If necessary, resize the image to the height and width in pixels
specifications desired.
Save the file in a Web-ready file format, usually a GIF (most programs
give you several choices for file
types), finding a balance between the
way the file looks and an appropriate
file size. Some image programs will
let you preview the final file output,
whie in others, you have to save it
and load it in the browser to see the
final effect.
Preparing Photographs
To prepare photographs for
presentation on the web, follow these
steps:
Download the photo from your digital
camera or scan in the photograph. The
process for this varies depending on
the software bundled with your scanner
or camera. The image will probably end
up in "Your Photos" on Windows, or the
"Photos" folder on a Mac, unless you
chose some other folder as the default
destination.
Use the color correction, drawing, text, shape, and other tools provided
in the graphics program to alter and
improve your image.
Save a copy of your file in the native file format of the program you
are using. Make later changes or edits
in this file rather than on the web.
With photographs, save an untouched
version of the photo in case you want
to use it again for another purpose.
If necessary, lower the resolution of the image to 72dpi.
If necessary, resize the image to the height and width in pixels
specifications desired.
Save the file in a web-ready format, usually a JPEG, finding a
balance between the way the file looks
and an appropriate file size.
Making images web-ready is all about
compromise. In general, the better
your image looks, the larger the file
size will be. The larger the file
size, the longer it will take to
download. Your job is to find a
compromise between quality and file
size. Some things to consider are:
Is this image conveying crucial information? If so, go for higher
quality.
Is the image on a page with a lot of other images? If so, make the file
size smaller.
Will your web visitor be able to detect that the quality of a photo or
image isn’t very good?
Make images of people fairly high quality because visual acuity is
strongest with people’s faces.
(Source)
For your images, here is a tip:
Do not scale images in HTML
Web page designers sometimes set image
dimensions by using the width and
height attributes of the HTML image
element. Avoid doing this since it can
result in images being larger than
needed. For example, if your page
requires image myimg.jpg which has
dimensions 240x720 but displays it
with dimensions 120x360 using the
width and height attributes, then the
browser will download an image that is
larger than necessary.
(Source, see another tip)
This all depends on what the image is for. If you're generally adhering to a web-safe palette, gifs will come out smaller and clearer than a jpeg. Jpeg's are for photos. For jpegs to handle websafe colors well, you need to save at 88%+ quality, which increases file size. Png's generally have the best quality, and in some cases (when you don't need transparency) can come out smaller than jpgs, and comparable to gif. So, for jpeg photos, 80 quality, (sometimes even 75 for smaller images) will get you decent results and small filesize. Use gifs / png for site imagery generally. As far as images on a page, I try not to exceed 30kb total, assuming the page isn't something that is focused on photos / imagery. Hope this helps.
It depends on what your image is of, and what the quality needs to be, whether you choose quality over page loading etc.
I personally save all mine in .png but IE has a problem rendering the colour correctly in .png so if you are using them for aestetical purposes I would save .jpg
As to the size of the image, like said it depends really on the quality you want your image and how it affects performance if it is a large file.
i usually use save for web mode that exists in photoshop. obviously the lower size is best. The sizes that you talking about (100-150) are good or not in relation to the dimension of the image. Anyway i advice you to use sprites and when possible in jpeg format.
something like 75-80% quality are good enought to a good quality of image
And please pay attention to the cmyk mode, that cause problems in some browsers
Is there a file format limit to the PNG pixel size?
I am trying to visualize a 30.000x30.000 pixels PNG image with Firefox, but I get an error. The image opens correcly in Preview.app, although very slowly. The file size is not big, just around 3 MiB (1 bit black/white image). I am wondering if there's a technical file-format reason for this.
A naive implementation of resizing would require the image to be blown up to 2.7GB in size before it is displayed. This would clearly be too large for a normal 32-bit program to handle.
The PNG specification doesn't appear to place any limits on the width and height of an image; these are 4 byte unsigned integers, which could be up to 4294967295. http://www.libpng.org/pub/png/spec/iso/index-object.html#11IHDR
That is an odd image, but I am sure there is a reason to have such a huge image.
I can't really address the size limit, but I can address a way to get around it. Create a set of tiles of some size, and then as the user scrolls, bring tiles into view using CSS to position them correctly. You might even be able to get away with bringing up all the tiles at once, with a slew of smaller images.
But I am curious, what is the application that needs such a huge image displayed without scaling out?
Erick