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.
Related
I'm porting some CF 2.0 VB.Net apps to a newer version of a handset that has twice the screen resolution. So I have to double the dimensions of everything otherwise it all gets squished up into the top LH corner of the screen.
One screen had a bitmap which was 250K in size, and after I doubled the dimensions naturally it blew out to one MB. This isn't real good on a handheld, so I fired up irfanview and converted it to a .GIF. The .GIF was only 60KB in size, with no discernible change in the quality of the image.
To me, it seems a no-brainer : Convert all Bitmaps to Gif (or JPG) and get the same results for a fraction of the disk space (and probably quicker form loading times).
But does anyone know of a situation where you would use a bitmap in preference to a GIF/JPEG? I cannot find any.
I really can't think of any realistic example where you would prefer an bitmap to a GIF. Since GIF is a lossless format you loose no information when storing images. So after reading the file in your app you will have the same image data as if you have read a bitmap. And like you said: The file will be smaller and thus will probably will be read faster from disk.
JPEG is different because it's a lossy format, meaning you will lose information when storing images in it. You will need to decide if the loss of information is meaningful in your app.
Bitmaps would be preferable if and only if reading files from disk where faster than decompressing the file in memory.
And to be precise you would prefer bitmaps when storing images in main memory, so you can work easily on the data in your code. Which is actually what you most likely already have when you have loaded a file using an image library.
To cut a long story shorts, a BMP is stored as a series of pixels along with their colour. This is useful if you want to do such things as pattern recognition, movement detection and such like.
Bitmaps are typically used for their convenience - you can knock one up in paint without having specialist graphics software.
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.
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
My program save images from a camera in a rate about 30fps;
Moving these images or browsing them by windows explorer take a long time.
My questions is:
is storing them as a video file is a better approach? so moving files wouldn't take a lot of time. (if this is good, how to open a large video file and get a specified frame number fast? Is this approach faster?)
It's very unlikely that a video file will load or seek any faster than individual image files. Not to mention this is going to be a lot more difficult to handle than images, and probably introduce a bunch of extra, unnecessary dependencies to your application.
If you really need a way to speed up image browsing, you should look into generating separate thumbnail images. Thumbnails are exact duplicates of the original images, but with significant reductions in size and quality, suitable for display purposes only. This makes the resulting thumbnail images significantly smaller than the originals, which should speed up their loading and rendering substantially. This trick is used all over graphics packages and file managers. This approach allows you to delay the expensive process of loading the associated full image until after the user selects a particular thumbnail image to open.
I am working on an iPad application which has hundreds of photo-quality images. I would have naturally assumed to store these images as JPEGs so as to optimize the app file size. However, Apple's guidelines state:
Use the PNG format for images. The PNG format provides lossless image content, meaning that saving image data to a PNG format and then reading it back results in the exact same pixel values. PNG also has an optimized storage format designed for faster reading of the image data. It is the preferred image format for iOS.
However, if I store the same images as JPEGs at 100% quality, the size of them drops to about half that of the PNG lossless versions.
Is there really that much of a performance hit to use JPEG instead of PNG? If I am viewing these images in a carousel or gallery style, do I really need to worry about the performance and use PNGs instead?
Thanks!
Regarding the quality PNG is good for application kind of images, but JPEG is preferred for photos. Choose the lowest JPEG quality that gives good enough quality for your images.
Regarding speed, size also matters. I have no IPad to test with, but the smaller file size to read from flash or network might very well out weight any additional decompression cost. The only way to find out is to measure on your actual device.
There is a performance consideration but while PNG is preferred for quality, given your application, I'd suggest JPEG would be preferable.
Pure performance isn't the only factor of interest or concern; an iPad has only a finite space available to it, and filling that up with image data that most users are not going to need or want seems preferable to using more computational power for most cases.
One other thing to consider - on a gallery, you are strongly recommended to generate thumbnails which give you the best of both worlds: the smaller, more accessible image for general use and the full original image for 'best'.
If in doubt, benchmark with both and see how big the difference is in your application - and if the difference is something you can live with versus the space saving, go with JPEG.