Pretty much with every Pagespeed test I do for all my website I get the comment "Optimize images by lossless compressing image X" which often increases my page rank a lot.
I already save EVERY image with 'save for web' with Photoshop, but I was wondering how I could "Optimize images by compressing lossless" even more. As far as I know I'm already doing everything I can.
Really wondering..
Off-topic, but I noticed that Google's PageSpeed uses a Retina device to check, since all my Retina images got loaded instead of the regular ones. Since these are larger than the area I got a 1/100 score on the mobile segment. Haha.
This was a real issue with many of my sites, however I use the free version of kraken to 'loosely compress' all of my images and this passes the Google Test, thus boosting rankings!
https://kraken.io/web-interface
I must have used this for well over 10,000 images already!
The images you create in programs like Photoshop and Illustrator look amazing but often the file sizes are very large. This is because the images are made in a format that makes them easier to manipulate in different ways. If you put these files on your website it would be very slow to load. Optimizing your images for the web means saving or compiling your images in a web-friendly format depending on what the image contains.
How does it work?
There are two forms of compression that we need to understand, Lossy and Lossless.
Images saved in a lossy format will look slightly different than the original image when uncompressed. Keep in mind that this is only visible at a very close look. Lossy compression is good for web, because images use a small amount of memory, but can be sufficiently like the original image.
Images saved in lossless format retain all the information needed to produce the original image. For this reason, these images carry a lot more data and in return are a much large file size.
We also can optimize images for the web by saving them as the appropriate dimensions. Resizing the image on the webpage itself using CSS is helpful but the issue is the web browser will still download the entire original file, then resize it and display it.
Can you imagine taking a poster size image and using it as a thumbnail? The little 20px by 20px image would take as long to load as the original poster when we could just be loading a 20px image the whole time.
How to Optimize Images?
In simple terms optimizing your image works by removing all the unnecessary data that is saved within the image to reduce the file size of the image based on where it is being used in your website. Optimizing images for the web can reduce your total page load size by up to 80%.
Full optimization of images can be quite an art to perfect as there are such a wide variety of images you might be dealing with. Here are the most common ways to optimize your images for the web.
Reduce the white space around images – some developers use whitespace for padding which is a big no-no. Crop your images to remove any whitespace around the image and use CSS to provide padding.
Use proper file formats. If you have icons, bullets, or any graphics that don’t have too many colors use a format such as GIF and save the file with lower amounts of colors. If you have more detailed graphics then use JPG file format to save your images and reduce the quality.
Save your images in the proper dimensions. If you are having to use HTML or CSS to resize your images, stop right there. Save the image in the desired size to reduce the file size.
To resize your images you will have to use some form of program. For basic compression, you can use a simple editing program such as GIMP. For more advanced optimization you will have to save specific files in Photoshop, Illustrator, or Fireworks.
I have a client who insists on "crisp" images on his Web pages. One image he gave me was 2592 pixels wide, but the page is only 940 pixels wide. No problem, I just resize the images using Photoshop but there is a noticeable drop in quality, lots of jagged edges. I expect a loss of quality when resizing to one-third the size, but I thought I could do better. So what I did is take the original image and have the browser (Chrome) resize it to 940 pixels wide. Yes, I understand this is the absolute worst thing to do but I was just experimenting. It turns out the browser does a much better job of resizing than Photoshop -- I don't get the jagged edges and the picture looks fairly close to the original in quality.
So what's the deal here? Why is Photoshop not as good as resizing as Chrome (IE8 and Firefox do just as good a job too)? I've tried tweaking Photoshop's resampling options but have seen no real difference.
There are a couple of different things to take into account when scaling images in photoshop:
1.) File type+compression
You're going to want to make sure that if you use a filetype with lossy compression (i.e. JPEG) that you set the quality >8, or you will see a noticeable drop on quality.
2.) Resample method
Photoshop provides a few different resampling methods which effect how pixels are combined when scaling down. Below are links to some images that illustrate where you can modify this when scaling.
Image->Image Size...
http://cl.ly/3W3M0b3W3H0G1Y452L15
There is a drop-down on the bottom of this window:
http://cl.ly/0o463J2J0e2L1u0C1U26
Likely what you're experiencing is that your image is resampling using "Nearest Neighbor" or Bilinear".
Give it a go.
You can try using a browser-based script such as TimThumb: http://code.google.com/p/timthumb/
You really do need to resize the image instead of shrinking a huge image just to display. This script will create copies of your image in different sizes and if I remember correctly, it even supports some sort of caching.
Ive had it resize pretty large images for me to very small thumbnails and it always looked sharp.
Photoshop and web browsers handle resizing differently. I don't use Photoshop, so I can't help you with that..
However, if you want that the picture looks like resized by a web browser, then resize it with a web browser! Take a screenshot and cut the resized picture, creating another one which you can really use on the site.
I would like to know which image format inside PDF's is rendered fastest. I tested mupdf code and I figured out that image decoding takes an important part in rendering time. So I would like to know if there are image formats that would not impact very much on cpu load.
I dont think this is really a question of what is best simply within PDFs, however:
As a general rule, I have always found that pre-rendering the image's size to the actual size you wish to present on screen is the best way to get both size and rendering speed to what you want them to be. Simply dragging an image into a document doesnt bring the pixel count (thus size) down as most document types simply put a display size tag around the full image. This causes the display program to have to real-time resize the image for display. The less the display program has to real-time resize the image the faster it will display.
As for file types:
Bitmaps are generally considered the fastest to display as they (for the most part) are copy and paste the color for each pixel onto the screen pixel. They are generally considered the biggest file. Depending on your images, if they aren't noisy (have a lot of solid runs of the same color) then they can be RLE encoded. I have seen many RLE encoded images that are indeed even smaller than JPEG images, but it is very situational.
JPEGs tend to be the smallest for transfer and also generally display decently quick. As an opinion they are also the lowest quality images (look close, if you started with a perfectly clean image, JPEG compression will add noise to it unless using lossless compression)
PNGs tend to be my favorite. They can be lossless compressed, can be fairly small if using flattened PNGs (i.e. NOT ADOBE FIREWORKS PNGs) and do produce crisp images that render fairly quickly.
So to sum up: I would probably recommend flattened PNGs that have been pre-sized and saved to the size you wish to display on screen.
I have a small script that I use to resize all of the images in a directory. I run this script in cygwin and it uses "convert" to do the image resizing. The images change their resolution just fine, but I am having problems with file sizes after the script is run.
I typically use this script to resize images dumped out from a Powerpoint presentation to use in a little web presentation app that I wrote. When I dump out gif's and run the script, the files more than double in size (ex. 8KB to 18KB; 14KB to 50KB)
The pertinent lines of the script are as follows:
/usr/bin/convert $holdfile -thumbnail x480 temp.GIF
mv temp.GIF $i
Is there a switch to prevent the file sizes from growing so much? I know that the file sizes are not huge, but when I have a good number of people connecting to a presentation or the unavoidable dialup users, I just want to make their experience as nice as possible.
Edit: I should have specified that the files start at a 960px x 720px resolution and are being resized to 640px x 480px.
Well, this can happen if convert compresses worse than the input files. Since the exact same compression scheme might yield different results depending how good the compressing code is this can happen.
Another, more likely option here would probably be that you are resizing the images which will probably be done with bicubic resizing. This causes the edges of text or drawings to become a little bit blurry. This means they use up more colors and compress worse.
Also likely would be that your original images use an optimized color palette, maybe just with a few colors and after resizing they need the full 256 colors which are supported by a single GIF frame, due to smoothing done by the resizing.
In any case, you probably should see better performance using PNG instead of GIF. PNG was designed as a modern replacement for GIF and no (graphical) browser in use today has problems displaying PNGs (without an alpha channel). PNG compresses much better than GIF, and allows more colors at the same time. Also there are tools like optipng which will compress PNG images even further.
Convert automatically optimizes the palette however the palette might be growing due to colors being blended during resize. You should be able to inspect the source and resultant images in a graphics program and see the number of colors.
GIF only supports LZW compression but due to patent restraints that have since expired (the last was 2004) it was once necessary to manually enable LZW compression. I'm not sure if that is still the case however it's worth looking into.
If LZW compression is specified but
LZW compression has not been enabled,
the image data is written in an
uncompressed LZW format that can be
read by LZW decoders. This may result
in larger-than-expected GIF files.
- imagemagick.org
Consider an application handling uploading of potentially very large PNG files.
All uploaded files must be stored to disk for later retrieval. However, the PNG files can be up to 30 MB in size, but disk storage limitations gives a maximum per file size of 1 MB.
The problem is to take an input PNG of file size up to 30 MB and produce an output PNG of file size below 1 MB.
This operation will obviously be lossy - and reduction in image quality, colors, etc is not a problem. However, one thing that must not be changed is the image dimension. Hence, an input file of dimension 800x600 must produce an output file of dimension 800x600.
The above requirements outlined above are strict and cannot be changed.
Using ImageMagick (or some other open source tool) how would you go about reducing the file size of input PNG-files of size ~30 MB to a maximum of 1 MB per file, without changing image dimensions?
PNG is not a lossy image format, so you would likely need to convert the image into another format-- most likely JPEG. JPEG has a settable "quality" factor-- you could simply keep reducing the quality factor until you got an image that was small enough. All of this can be done without changing the image resolution.
Obviously, depending on the image, the loss of visual quality may be substantial. JPEG does best for "true life" images, such as pictures from cameras. It does not do as well for logos, screen shots, or other images with "sharp" transitions from light to dark. (PNG, on the other hand, has the opposite behavior-- it's best for logos, etc.)
However, at 800x600, it likely will be very easy to get a JPEG down under 1MB. (I would be very surprised to see a 30MB file at those smallish dimensions.) In fact, even uncompressed, the image would only be around 1.4MB:
800 pixels * 600 pixels * 3 Bytes / color = 1,440,000 Bytes = 1.4MB
Therefore, you only need a 1.4:1 compression ratio to get the image down to 1MB. Depending on the type of image, the PNG compression may very well provide that level of compression. If not, JPEG almost certainly could-- JPEG compression ratios on the order of 10:1 are not uncommon. Again, the quality / size of the output will depend on the type of image.
Finally, while I have not used ImageMagick in a little while, I'm almost certain there are options to re-compress an image using a specific quality factor. Read through the docs, and start experimenting!
EDIT: Looks like it should, indeed, be pretty easy with ImageMagick. From the docs:
$magick> convert input.png -quality 75 output.jpg
Just keep playing with the quality value until you get a suitable output.
Your example is troublesome because a 30MB image at 800x600 resolution is storing 500 bits per pixel. Clearly wildly unrealistic. Please give us real numbers.
Meanwhile, the "cheap and cheerful" approach I would try would be as follows: scale the image down by a factor of 6, then scale it back up by a factor of 6, then run it through PNG compression. If you get lucky, you'll reduce image size by a factor of 36. If you get unlucky the savings will be more like 6.
pngtopng big.png | pnmscale -reduce 6 | pnmscale 6 | pnmtopng > big.png
If that's not enough you can toss a ppmquant in the middle (on the small image) to reduce the number of colors. (The examples are netpbm/pbmplus, which I have always found easier to understand than ImageMagick.)
To know whether such a solution is reasonable, we have to know the true numbers of your problem.
Also, if you are really going to throw away the information permanently, you are almost certainly better off using JPEG compression, which is designed to lose information reasonably gracefully. Is there some reason JPEG is not appropriate for your application?
Since the size of an image file is directly related to the image dimensions and the number of colours, you seem to have only one choice: reduce the number of colours.
And ~30MB down to 1MB is a very large reduction.
It would be difficult to achieve this ratio with a conversion to monochrome.
It depends a lot on what you want at the end, I often like to reduce the number of colors while perserving the size. In many many cases the reduced colors does not matter. Here is an example of reducing the colors to 254.
convert -colors 254 in.png out.png
You can try the pngquant utility. It is very simple to install and to use. And it can compress your PNGs a lot without visible quality loss.
Once you install it try something like this:
pngquant yourfile.png
pngquant --quality=0-70 yourfile.png
For my demo image (generated by imagemagick) the first command reduces 350KB to 110KB, and the second one reduces it to 65KB.
Step 1: Decrease the image to 1/16 of its original size.
Step 2: Decrease the amount of colors.
Step 3: Increase the size of the image back to its original size.
I know you want to preserve the pixel size, but can you reduce the pixel size and adjust the DPI stored with the image so that the display size is preserved? It depends on what client you'll be using to view the images, but most should observe it. If you are using the images on the web, then you can just set the pixel size of the <img> tag.
It depends on they type of image, is it a real life picture or computer generated image,
for real life images png will do very little it might even not compress at all, use jpg for those images, it the image has a limited number of different colors (it can have a 24 bit image depth but the number of unique images will be low) png can compress quite nicely.
png is basicly an implementation of zip for images so if a lot of pixels are the same you can have a rather nice compression ratio, if you need lossless compression don't do resizing.
use optipng it reduce size without loss
http://optipng.sourceforge.net/
Try ImageOptim https://imageoptim.com/mac it is free and open source
If you want to modify the image size in ubuntu, you can try "gimp".
I have tried couple of image editing apps in ubuntu and this seemed to be the best among them.
Installation:
Open terminal
Type: sudo apt install gimp-plugin-registry
Give admin password. You'll need net connection for this.
Once installed, open the image with GIMP image editor. Then go to: File > Export as > Click on 'Export' button
You will get a small window, where check box on "Show preview in image window". Once you check this option, you will get to see the current size of the file along with Quality level.
Adjust the quality level to increase/decrease the file size.
Once adjusting is done, click on 'Export' button finally to save the file.
Right click on the image. Select open with paint. Click on resize. Click on pixel and change the horizontal to 250 or 200.
That's the only thing. It is the fastest way for those who are using Windows XP or Windows 7.