Image file types for the web
The goal of this article is to give a practical overview of the three image file formats JPEG, PNG, and SVG, mainly to enable you to decide which format is preferable for a given image. The application examples are focused on webcomics.
Advice in this article is about online publication of images. For your own archives you should keep images in a format which preserves as much information as possible, in case you need to edit them again later. In case of doubt keep them in the native format of the graphics program you use. Interchange formats to transfer graphics from one editing application to another are a different topic.
JPEG
For JPEG compression an image is approximated by the sum of a number of sine wave functions of different frequencies and directions. It’s like waves in the ocean. The file size is reduced by omitting the weaker waves. This means the image is not preserved in every detail, but the difference isn’t really noticeable, if you don’t reduce the filesize too much.
This compression method works very well when the color values vary smoothly across the image area. Approximating edges with sine waves does not work well. You can’t have a huge almost vertical wave front without getting lots of tiny ripples around it. This visible noise around edges is known as the Gibbs phenomenon. It is one kind of compression artifacts found in JPEGs. They’re not all that noticable if you don’t zoom in on the image. If the image, aside from edges, is of a rather wavy nature (smooth variations), JPEG compression works well even though it doesn’t deal well with the edges.
JPEG is the format of choice for
Since sharp borders are problematic for JPEG compression, the filesize might be smaller when edges are blurred a little bit. When you save an image as JPEG in GIMP, there’s a parameter called “smoothing” in the advanced options. Experiment with it while preview is on, and see how it affects the look of the image and the filesize.
PNG
PNG compression works by first assuming that the color values of each pixel can be deduced from the previous pixels left and above of the current pixel using a function called “filter” in PNG terminology, and then only saving the difference of the actual values to the predicted ones. In a second step the result is compressed with the deflate compression algorithm, which is the same compression method used in gzib.
PNG provides best compression for images which use few colors which fill large areas uniformly.
PNG is the format of choice for
PNG images can use different filter types. Knowing which one is better for which type of input image wouldn’t help much, because image editors typically don’t even give you the option to choose. Most of them only provide the option to choose the deflate compression level. You should always run OptiPNG on any PNG image before uploading it to the internet. OptiPNG is a program which reads an existing PNG image and finds the best settings to recompress it.
Beside the different filter types, there are other ways to optimize the compression of PNGs.
Use the right color space. PNG can save color values in four dimensions: Red, green, blue, and transparency (called alpha in computer graphics). If your image is fully opaque, you don’t need an alpha channel. The alpha channel is optional in PNG. If your image is grayscale, you can use the grayscale variant of PNG, which saves only one value instead of three for red, green, and blue. OptiPNG will fix these automatically, when applicable. In GIMP you can choose in the image menu, under mode either RGB or grayscale, and in the layer menu, under transparency there are entries add alpha channel or remove alpha channel depending on whether the image has an alpha channel.
You can further simplify your image by using only a small palette of colors. If you draw an image in a paint program only using “hard” brushes (with no semi-transparency towards the border) then your image will not have many colors. An image with no more than 256 colors can be saved as a paletted PNG.
If the image has more than 256 unique colors, you can try reducing it to a paletted image. You can also reduce it to a smaller palette if it already has 256 colors or fewer. In GIMP you would do that from the image menu, under mode by selecting indexed and then setting the parameters in the indexed color conversion dialogue. The setting “generate optimum palette” might not work well for drawings. It’s typical for approximation that extrema are not preserved, which means black and white will not be exactly reproduced, and neither will other key colors. For high contrast black and white drawings, a custom palette will do better. For colored drawings a better palette optimization algorithm should be invented. I haven’t heard of an implementation of such an algorithm yet.
SVG
This is a vector graphics format, which means images are not saved as color values for each pixel, but instead an SVG file contains parameters for curves to draw and shapes to paint. Filesizes of vector graphics are typically much smaller than those of pixel graphics, and vector graphics can be scaled without loss of quality. Converting a pixel graphic to a raster graphic is not easy, but if you already draw your comics in a vector drawing program like Inkscape, you should put them online as SVG. Most concurrent vector drawing programs can export to SVG.
There are tools to automatically convert pixel graphics to vector graphics, but the result typically needs some manual corrections. If you don’t have a good reason, I don’t think converting your raster images to vector graphics is worthwhile.
SVGs can also contain raster graphics in the formats JPEG and PNG. SVG can be used to position these images relative to each other and then add vector graphic elements like text balloons and text. Composing a photo comic this way gets around the weaknesses of JPEG compression while making good use of its strengths.
SVG is the format of choice for
Inkscape and Sodipodi use SVG as their native format, but they also store additional information in the files which is not necessary to display them, so you should export to “plain SVG” from these editors when you have finished a document and are going to publish it, and then you should still run a clean-up program like Scour.
You can also save your vector graphics as compressed SVG, which have the extension .svgz, to further reduce the filesize. But you have to make sure that your server is configured to send the correct Content-encoding header for SVGZ files.
There are currently some drawbacks to SVG. Pictures are typically embedded in web pages with the <img> tag. For SVGs this doesn’t work in all browsers. SVGs should be embedded with the <object> tag. Therefore, handling SVG is not just a matter of adding another file type to an ini file, but adding SVG support to a website requires some coding. If your comic is hosted at a dedicated webcomic hosting site, then they probably won’t deal with SVG yet. A lot of content management systems might also still lack easy handling of SVG files.
Here is some basic sample code for embedding an SVG in (X)HTML.
Note that in this example the width of the <object> is set to a percent value, so it will scale relative to the browser window. The height is not set, so it will adjust according to the aspect ratio of the image. For this to work, the SVG needs to have a viewBox, and no fixed width or height. Vector graphics editors usually don’t write SVGs like that, but clean-up programs like Scour can fix that.
The above code will not work well with Microsoft Internet Explorer though. The following code should work, but for MSIE you don’t get around specifying the height.
If you use a percent value for height, it is interpreted relative to the window height, while a percent width is interpreted relative to the window width. To have the image still scale relative to the window, you can use an educated guess about the aspect ratio of the user’s screen, or you can use Javascript to set the height automatically. For the script approach you just need my IEfixObjectTags javascript.
To solve the problem without script, we need the graphic’s aspect ratio and an estimate of the window’s aspect ratio. Let w be the image’s width, and h the height. For example, if the viewBox attribute of the SVGs root element has a value of “-15 -10 521 711”, then w = 521 and h = 711. For the window the best guess is that it’s maximized and that the screen has a 4/3 aspect ratio. There will be window decoration and menus at the top and a status bar and taskbar at the bottom taking up space, so the aspect ratio of the viewing area will be slightly larger than 4/3. You can make a better guess, but we only need a rough estimate. For now let’s assume a window aspect ratio of r = 4/3. Then one percent of the width equals estimated r percent of the height. So when we set the width to, for example, 100%, the height should be 100 (h/w) percent of the window width or
100 r (h/w)
percent of the window height, which in our case equals 100 (4/3) (711/521) % ≈ 182%. With 80% width, this estimation would yield about 146% height.
This method gives only rough estimates. There will be some margin horizontally or vertically, depending on how the guess of the window aspect ratio is off, but it’s good enough.
The sample code for MSIE is for using the old fashioned Adobe SVG Viewer plugin. As a more convenient way to support MSIE you could use SVG Web. See SVG Web’s quick start guide for sample code.
Advice in this article is about online publication of images. For your own archives you should keep images in a format which preserves as much information as possible, in case you need to edit them again later. In case of doubt keep them in the native format of the graphics program you use. Interchange formats to transfer graphics from one editing application to another are a different topic.
JPEG
For JPEG compression an image is approximated by the sum of a number of sine wave functions of different frequencies and directions. It’s like waves in the ocean. The file size is reduced by omitting the weaker waves. This means the image is not preserved in every detail, but the difference isn’t really noticeable, if you don’t reduce the filesize too much.
This compression method works very well when the color values vary smoothly across the image area. Approximating edges with sine waves does not work well. You can’t have a huge almost vertical wave front without getting lots of tiny ripples around it. This visible noise around edges is known as the Gibbs phenomenon. It is one kind of compression artifacts found in JPEGs. They’re not all that noticable if you don’t zoom in on the image. If the image, aside from edges, is of a rather wavy nature (smooth variations), JPEG compression works well even though it doesn’t deal well with the edges.
JPEG is the format of choice for
- photographs (that’s what the format was specifically developed for)
- photorealistic rendered graphics
- pencil drawings
- crayon drawings
- water color paintings
- comics with smooth shading
- blurred images (also when you use a motion blur effect)
Since sharp borders are problematic for JPEG compression, the filesize might be smaller when edges are blurred a little bit. When you save an image as JPEG in GIMP, there’s a parameter called “smoothing” in the advanced options. Experiment with it while preview is on, and see how it affects the look of the image and the filesize.
PNG
PNG compression works by first assuming that the color values of each pixel can be deduced from the previous pixels left and above of the current pixel using a function called “filter” in PNG terminology, and then only saving the difference of the actual values to the predicted ones. In a second step the result is compressed with the deflate compression algorithm, which is the same compression method used in gzib.
PNG provides best compression for images which use few colors which fill large areas uniformly.
PNG is the format of choice for
- sprite comics
- inked comics with no shading (colored or not)
- comics with flat shading
PNG images can use different filter types. Knowing which one is better for which type of input image wouldn’t help much, because image editors typically don’t even give you the option to choose. Most of them only provide the option to choose the deflate compression level. You should always run OptiPNG on any PNG image before uploading it to the internet. OptiPNG is a program which reads an existing PNG image and finds the best settings to recompress it.
Beside the different filter types, there are other ways to optimize the compression of PNGs.
Use the right color space. PNG can save color values in four dimensions: Red, green, blue, and transparency (called alpha in computer graphics). If your image is fully opaque, you don’t need an alpha channel. The alpha channel is optional in PNG. If your image is grayscale, you can use the grayscale variant of PNG, which saves only one value instead of three for red, green, and blue. OptiPNG will fix these automatically, when applicable. In GIMP you can choose in the image menu, under mode either RGB or grayscale, and in the layer menu, under transparency there are entries add alpha channel or remove alpha channel depending on whether the image has an alpha channel.
You can further simplify your image by using only a small palette of colors. If you draw an image in a paint program only using “hard” brushes (with no semi-transparency towards the border) then your image will not have many colors. An image with no more than 256 colors can be saved as a paletted PNG.
If the image has more than 256 unique colors, you can try reducing it to a paletted image. You can also reduce it to a smaller palette if it already has 256 colors or fewer. In GIMP you would do that from the image menu, under mode by selecting indexed and then setting the parameters in the indexed color conversion dialogue. The setting “generate optimum palette” might not work well for drawings. It’s typical for approximation that extrema are not preserved, which means black and white will not be exactly reproduced, and neither will other key colors. For high contrast black and white drawings, a custom palette will do better. For colored drawings a better palette optimization algorithm should be invented. I haven’t heard of an implementation of such an algorithm yet.
SVG
This is a vector graphics format, which means images are not saved as color values for each pixel, but instead an SVG file contains parameters for curves to draw and shapes to paint. Filesizes of vector graphics are typically much smaller than those of pixel graphics, and vector graphics can be scaled without loss of quality. Converting a pixel graphic to a raster graphic is not easy, but if you already draw your comics in a vector drawing program like Inkscape, you should put them online as SVG. Most concurrent vector drawing programs can export to SVG.
There are tools to automatically convert pixel graphics to vector graphics, but the result typically needs some manual corrections. If you don’t have a good reason, I don’t think converting your raster images to vector graphics is worthwhile.
SVGs can also contain raster graphics in the formats JPEG and PNG. SVG can be used to position these images relative to each other and then add vector graphic elements like text balloons and text. Composing a photo comic this way gets around the weaknesses of JPEG compression while making good use of its strengths.
SVG is the format of choice for
- anything you draw in a vector drawing program
- photo webcomics
Inkscape and Sodipodi use SVG as their native format, but they also store additional information in the files which is not necessary to display them, so you should export to “plain SVG” from these editors when you have finished a document and are going to publish it, and then you should still run a clean-up program like Scour.
You can also save your vector graphics as compressed SVG, which have the extension .svgz, to further reduce the filesize. But you have to make sure that your server is configured to send the correct Content-encoding header for SVGZ files.
There are currently some drawbacks to SVG. Pictures are typically embedded in web pages with the <img> tag. For SVGs this doesn’t work in all browsers. SVGs should be embedded with the <object> tag. Therefore, handling SVG is not just a matter of adding another file type to an ini file, but adding SVG support to a website requires some coding. If your comic is hosted at a dedicated webcomic hosting site, then they probably won’t deal with SVG yet. A lot of content management systems might also still lack easy handling of SVG files.
Here is some basic sample code for embedding an SVG in (X)HTML.
<object type="image/svg+xml" data="images/image1.svg" width="80%">
<!-- fallback content for older browsers: -->
<p>You need an SVG enabled browser to view this document.
Here is a rendered version of the graphic:</p>
<img src="images/image1.png" alt="image 1" />
</object>Note that in this example the width of the <object> is set to a percent value, so it will scale relative to the browser window. The height is not set, so it will adjust according to the aspect ratio of the image. For this to work, the SVG needs to have a viewBox, and no fixed width or height. Vector graphics editors usually don’t write SVGs like that, but clean-up programs like Scour can fix that.
The above code will not work well with Microsoft Internet Explorer though. The following code should work, but for MSIE you don’t get around specifying the height.
<!--[if !IE]><!-->
<object type="image/svg+xml" data="images/image1.svg" width="80%">
<!--<![endif]-->
<!--[if IE]><object classid="clsid: 78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2" codebase="http://download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en...;
width="80%" data="images/image1.svg" type="image/svg+xml"
height="146%"><![endif]-->
<param name="src" value="images/image1.svg" />
<param name="wmode" value="transparent" />
<!-- fallback content for older browsers: -->
<p>You need an SVG enabled browser to view this document.
Here is a rendered version of the graphic:</p>
<img src="images/image1.png" alt="image 1" />
</object>If you use a percent value for height, it is interpreted relative to the window height, while a percent width is interpreted relative to the window width. To have the image still scale relative to the window, you can use an educated guess about the aspect ratio of the user’s screen, or you can use Javascript to set the height automatically. For the script approach you just need my IEfixObjectTags javascript.
To solve the problem without script, we need the graphic’s aspect ratio and an estimate of the window’s aspect ratio. Let w be the image’s width, and h the height. For example, if the viewBox attribute of the SVGs root element has a value of “-15 -10 521 711”, then w = 521 and h = 711. For the window the best guess is that it’s maximized and that the screen has a 4/3 aspect ratio. There will be window decoration and menus at the top and a status bar and taskbar at the bottom taking up space, so the aspect ratio of the viewing area will be slightly larger than 4/3. You can make a better guess, but we only need a rough estimate. For now let’s assume a window aspect ratio of r = 4/3. Then one percent of the width equals estimated r percent of the height. So when we set the width to, for example, 100%, the height should be 100 (h/w) percent of the window width or
100 r (h/w)
percent of the window height, which in our case equals 100 (4/3) (711/521) % ≈ 182%. With 80% width, this estimation would yield about 146% height.
This method gives only rough estimates. There will be some margin horizontally or vertically, depending on how the guess of the window aspect ratio is off, but it’s good enough.
The sample code for MSIE is for using the old fashioned Adobe SVG Viewer plugin. As a more convenient way to support MSIE you could use SVG Web. See SVG Web’s quick start guide for sample code.
Tags: article, jpeg, knowledge base, png, svg
Comment
About
Badge
© 2009 Created by Thomas The Innkeeper on Ning. Create a Ning Network!
You need to be a member of Webcomics Inc to add comments!
Join this Ning Network