Maximize your online images
with these techniques!
If fuzzy logos and out of focus web banners
drive you nuts, read on.
Your visual assets, or images, include photos, logos, banners, charts, graphics, and social media headers. The quality of the images you post online says a lot about you, and you’ll want to make them look as good as they possibly can.
As a graphic designer, I’m always conscious of this when showing my work online, and have collected some knowledge and some good pointers.
It’s amazing to think that back in the 70’s, the internet was mostly text. But today, the web has become incredibly visual, and rich with different kinds of media— engaging, and immersive stories, animations, eBooks, streaming videos, movies, podcasts and music- potentially all on the same page at the same time. So now, web content takes 3 forms- text, sight, and sound.
And within these forms are choices in formats to make the final file for upload extremely viewable and useable.
Once you understand the characteristics of these file formats, you’ll be able to decide which one to use to create the best image possible for your audience.
But, even the very best format takes some refining and experimenting, because every image situation is different. In photoshop, using the “Save for Web” option reliably produces the most optimized images, and allows for easy iterations, with a 4-up view to compare options. The auto settings are usually the best choice.
If you don’t have photoshop, there are free online tools like Pixlr, PicMonkey or the evergreen GIMP. There are also free online tools to reduce your images, like TinyPNG (for both PNGs and JPEGs), and ImagOptim- a download for mac users.
If you’re wondering what the difference is, and how to pick between formats to make sharp crisp files, here are the basics for the 5 most popular formats:
JPEG stands for Joint Photographic Experts Group, the committee that first developed it in the early 1990’s.
The JPEG file format is at its best with realistic photographs or images with continuous, smooth color and tonal changes. It has always been the choice for professional photographers because the compression saves more of the data, at a fraction of the original size.
JPEGS have an unlimited color palette, retaining all the color information in an RGB image, by compressing it and blending pixels together and then, selectively discarding redundant data to reduce file sizes. JPEG files produce the image by a bitmap or a dot matrix network of pixels. This is known as lossy compression, which reduces a file size by permanently eliminating certain information, resulting in a loss of quality. When the file is uncompressed, only a part of the original information is still there. Using JPEG compression, you can decide how much loss to introduce and make a trade-off between file size and image quality.
This makes it really important to keep from resizing, or revising, as, each time, the quality is further reduced, forever.
Another important difference between GIF and JPG, is that JPGs do not preserve transparency in the background.
Here are examples of different JPEGS, using a photographic landscape:
In photoshop and most image editing programs you can specify how much compression/loss of quality you want.
Generally, if you choose the maximum quality option, your image will maintain the best quality. But you can also save your files with lower quality settings and still maintain reasonably good image for web use.
But the compression leads to some issues when it comes to contrasting edges, and can result in a shadowing effect inside photographic images.
Zooming in, the loss of quality is evident, and the shadowing is visible along the edge.
A GIF of the same image might well result in a higher quality output.
JPEGS can also be used in print files as well, although they need to be print resolution.
The JPEG format performance is lower for line graphics such as logos, letters, and it does not support animation. JPEGS are also not suitable for images that require high resolution, and a level of precision, such as scientific images, medical test images, and navigational charts.
With JPEGS, detail is lost every time a compression and decompression is performed, so best to keep from revising it.
JPEG allows 24-bits input per pixel, which enables a true color image when encoding.
Here are examples of different formats using an image with flat colors and hard edges:
Another consideration when deciding whether a JPG should be used versus a PNG, is whether the image is a photo or a man-made graphic.
A photo of a natural gradient contains much more data than a photoshop version, making the PNG format preferable, although larger.
• Well-adapted for photographic images, which compress well
• Great for photos
• File size usually smaller than PNG
• Compression levels are adjustable
•No transparency support
•Lossy compression (fidelity is degraded over multiple saves)
• Produces larger images than necessary for certain image types, such as line art.
• Not suitable for detail/precision
Here are examples of different formats using a detailed close up photograph:
PNG stands for Portable Network Graphic. PNG was created as an improved replacement for Graphics Interchange Format (GIF), and is a raster graphics file format that uses a lossless data compression, and are better for capturing lossless images.
It is the most widely used image compression format on the web, and supports the best capacity for transparency. This format gives designers the ability to incorporate low-resolution images that load quickly but also look great.
PNG supports 24 bit images, unlike a GIF file, and produces a transparent background without jagged edges, and also preserves transparency in grayscale and RGB images.
PNG format supports RGB, Indexed Color, Grayscale, and Bitmap mode images.
With a GIF, each pixel can be completely or no transparent, and in PNG you can have transparency between 0 and 100 percent. The transparency is created in one of two ways. One uses a single color defined as transparent, which doesn’t remove a color from the palette, and the other is to set an alpha channel, allowing multiple colors to be transparent, which is a much smoother method, and much better for blending colors. Using the alpha channel allows you to set the transparency at different levels in different regions of the image resulting in transparent areas adjusting naturally to whatever is behind the image (when not white or black) and producing a nice clean edge.
A PNG-8 file may have partially transparent pixels.
The GIF and the PNG-8 are fairly good quality, but a little bit jagged around the edges when saved with transparency. This can be avoided to a certain extent by setting a matte the same color as your background when saving.
The PNG-24 format produces an excellent quality image with very smooth lines, even when saved with transparency.
• Supports a full spectrum of colors
• Supports transparency
• Completely Lossless compression- (it doesn’t degrade over multiple saves like a JPEG does)
• Great for photos
• Great for hard-edge, flat color charts and graphs
• Larger file size than a JPEG for photographic images or gradient areas
• “Alpha” Transparency isn’t supported in older browsers without “work-arounds”
GIF stands for Graphics Interchange Format, and is one of the most popular file formats for photos and are the most widely-supported format for animated images.
GIFs are either transparent or opaque, and are compressed by forcing all the color in the image into a 256 color palette in order to reduce file sizes.
Because the colors are indexed, it will only display a maximum of 256 colors, and sometimes less.
GIF images do allow you to preserve transparency, which is a very important aspect of this file format.
Transparency allows you to place the gif icon over any color background or even photos, and you won’t see a border or background in the image. All you’ll see is the icon, as with a PNG.
The effects of GIF compression can become more noticeable, resulting in white spots or blotches of color instead of more complex areas, as any colors outside the 256 are substituted with the color closest to it.
One of these colors can be transparent. But choosing transparency limits the color palette even more, and result in round edges with a white backing versus the crisp edge of a PNG file.
For this reason, GIF is NOT a good format for saving certain photographic images, or graphics with gradients, but is a good format for creating low resolution files for the web, and especially good for saving images with solid areas of color such as logos or simple illustrations.
GIF files also support a feature called interlacing, which preloads the graphic. It starts out blurry and becomes focused and crisp when it is finished downloading. This makes the transition for your viewer easier, and they don’t have to wait as long to see logos or icons on your site.
Transparency Dither is a method to disperse pixels, so that a GIF can transition into its background easier. This was before PNG, which supports levels of opacity. You can choose to have no dither, Diffusion, Pattern, or Noise Transparency dither. Diffusion spreads out the edge pixels in order to let some of the background show through. Pattern does the same thing, but uses a repeating pattern around the edges. Noise is straightforward and uses noise around the edges to feather the edge pixels.
The GIF format works well on Twitter Headers.
• Supports transparency
• Great for crisp, clean line art, and also, flat, solid colors
• Supports animation
• Supports interlacing for faster loading
• Only supports 256 colors
•”Binary” transparency (a pixel is either transparent or it’s not)
• Produces jagged edges
BMP is the oldest, the original raster graphics image format, was invented by Microsoft as the native file format for Windows. It is lossless, and uncompressed, and the file sizes are usually quite large, because all the data is retained.
They don’t scale well, and do not allow for compression unless saved in another format. This makes them impractical for using on the web, especially since there are other ways to be lossless, with a lot smaller file size, such as a PNG.
• Does not degrade over multiple saves
• Supported by virtually every device
• Great for storing raw image data
• Uncompressed data means huge files
• Do not scale well
• No compression allowed
SVG stands for scalable vector graphics, a relatively new file format that allows you to create images based on paths and shapes, which are then turned into an image, based on that data. The shapes and paths are scaled up or down mathematically, to resize the image without any loss of quality or clarity.
You can also manipulate an SVG file to create animated logos, dynamically changing bar graphs and pie charts, without having to recreate the images every time the data changes.
SVG files can also be created in a regular text editor like Windows Notepad, although you’ll need an SVG viewer to see it. All major web browsers have the ability to render this format, and being scalable, they always are in focus.
SVG allows three types of graphic objects: vector graphics, raster graphics, and text, and is compatible with CSS.
Unfortunately, none of the Social Media sites accepts this file type, but if you’re working in WordPress, you’ll definitely want to use this format whenever possible with headers, logos and the like. You will see amazing results, guaranteed.
In illustrator, you can save our export your file as an SVG, and it will generate a code you can paste into your html. But if you’re working In WordPress, no pasting necessary, as the media library does accept SVG files, although it may give an error notice, it nonetheless uploads the file and you’re able to customize it in the Customizer dashboard, if needed, and apply it to your site.
Below is the SVG file I created in illustrator, exported as an SVG, and uploaded it to the WordPress media library. (I copied the code, but never had to use it.)
If you’re working in photoshop, you can save your file as an eps, and open it in illustrator, and then export it as an svg. Depending on the graphic, it may lose some formatting, and fonts may default, but it’s worth some experimenting, because of the super sharp, scalable nature of the end product.
And the animation capabilities are quite amazing and accessible.
You can also download a converter to convert to a variety of file types, including SVG and BMP, or, you can enter the url of the image you want to convert.
Here is a list of online converters:
Autotracer.org. Online raster image vectorizer using the AutoTrace library. BMP, GIF, JPEG, or PNG to DXF, EPS, PDF, or SVG. Upload limit: 1MB.
FileFormat.info – Converts SVG to PNG, JPEG, TIFF. Output resolution can be specified. No batch processing. Upload limit: 5MB.
Online-Convert – Converts to/from BMP, EPS, GIF, HDR, ICO, JPEG, PNG, SVG, TGA, TIFF, WBMP, WebP. No batch processing. The output (e. g. image size) is customizable; the conversion to SVG is handled by Potrace.
SVGConv – Converts SVG to JPEG, PNG, GIF, BMP, TGA, TIFF, PDF, PS, EPS. Allows the user to customize the output (like image size, background color) and has batch processing features (converting multiple files in a single step). Upload limit: 10MB
SVG2Android – Converts SVG to an Android VectorDrawable (introduced in API 21)
Free Online Converter – Converts most raster images to SVG via tracing. When converting from raster images such as PNG to SVG or JPG to SVG, converter will convert the forms and objects in black-and-white images in vector graphics form. The conversion to SVG is handled by Potrace.
I read about a fellow who built an entire website with SVG code only. The site had many images, though no images files were uploaded, only the svg code for them. Each time he made an svg file, he was copying the code it generated into the templates he was using.
A lot of work, but I bet it looks great!
• Very small files
• Scalable vector- always crisp and sharp. Great for logos, graphs
• Not universally accepted
• Not good for photos or complex images
• Not accepted on social media sites (yet). Only supported in modern browsers
So how do you choose which image format to use?
Consider your options listed above, and then, exactly where and how it will be viewed.
Each format has its own strengths and weaknesses, and depending on the context in which you’re presenting it, some experimentation is going to be critical for success.
So, start by picking the best file format, whether JPEG or PNG,
and use the “Save for Web” option in photoshop.
There, you can do a number of things to reduce the file size and optimize your image.
Basically, if you want to provide extremely high-quality photographs on a blog post or on a web page, save it once as a JPG file, using the techniques here, and embed it on your site.
Avoid multiple saves that degrade the quality.
The key is, the smaller the file size, the faster your pages load, and, this also gives you a good SEO boost.
Speed is everything. If a website doesn’t load after 3 seconds, your potential audience is likely abandoning, so optimize in every way you can without sacrificing too much fidelity.
If you’re displaying icons or images with sharp contrasting colors – like images with text for example – then go with PNG. Also, PNG is particularly valuable in web design when you want those nice flowing layouts with transparent images. Remember that PNG file sizes are usually larger than JPG, so plan accordingly. JPEGS are also not suitable for images that require high resolution, and a level of precision, such as scientific images, medical test images, and navigational charts.
Here is a cheat sheet you can download, or embed:
I hope this was helpful!
Since we’re all out there generating new images all the time, each one is a new opportunity to put that best foot forward. And, it’s no doubt we’ll find increasingly better ways to do this, with technology moving at the rate it is.
If you have suggestions, or advice, please chime in!