To optimize images for web many tools and programs are available both free and paid. Photo editing software such as GIMP (free) or Photoshop (paid) etc allows you to do your own optimization. Tools such as Optimzilla (free) or kraken.io (free & paid version) etc do the work for you. With optimized images for web, one has to strike a balance between quality and compression. The higher the quality, the lower is the loading of images on the web because of the file size. Find out what works and what does not when it comes to vectors versus raster images. Optimize images for retina displays and learn about the different file formats JPG, PNG, GIF, etc. Compression is of two types. Lossy compression compresses data in the image file. Lossless compression removes data permanently. They allow you to choose the file format you would want to use for your image.
Contents
File Formats
Optimize images for web starts with a selection of the best file type. The different types of files which can be used are
PNG – Portable Network Graphics are higher quality images that have a larger file size that is created for a lossless image format but it can also be lossy.
GIF – Graphics interchange Format uses 256 colors and is the best choice for animated images using lossless compression.
JPEG – Joint Photographic Experts Group(.jpg) uses both lossy and lossless optimization and quality level can be adjusted for a good balance of file size and quality.
TIFF – Tagged Image File Format is a standard in the printing and publishing industry.
SVG (Scalable Vector Graphics) is a vector image file format drawn from mathematically stated curves and shapes, not pixels. SVG’s can be animated and support transparency given any combinations of colors or gradients.
Selecting the correct file formats.
The PNG format is suited when it comes to its use on the web requiring small file size to store iconic graphics, text and line drawings. PNG supports 8-bit color like GIF but also supports 24-bit color RGB, similar to what JPG does. JPG format stores photographs of a smaller size than a BMP (bitmap image file). A high pixel count delays the loading of web pages, so web images need compression using the jpeg format. JPEG files do not have transparency. The SVG is a lossless file format like GIF and PNG, and they are fairly large files when compared with other formats for the web. SVG image remains clear and crunchy at any resolution or size. BMP are both uncompressed and lossless which are always in full quality.
Optimize Images for Web: Compression Apps
They reduce file size of images without losing image quality. A low compression rate will yield the highest quality but larger file size and a very high compression rate, will produce a very low-quality image but smaller file size. The two types of compression are lossy and lossless. Lossy are filters that eliminate some data that degrade the image that reduce the file size to a greater extent. Lossless
GIMP
(A) GIMP (GNU Image Manipulation Program) is an image editor and publishing tool and its functions are similar to Photoshop. GIMP can create, modify, compress, and publish images for website use. Read more by clicking on GIMP.
Basic Optimization
a-Open the image you want to optimize for the Web in GIMP.
b-Click on Image and go to Flatten Image fig1 changing the image from RGBA indexing to RGB by removing the alpha channel as it is most likely not used for Web images. RGBA actually stands for (R)ed (G)reen (B)
c-Click on Image and go to Mode fig1 and select Indexed. In the maximum number of colors choose 256 to save space
d-Check the Generate optimum palette box on the Indexed Color Conversion menu fig2 and click Convert.
e-Click on File fig1 and select Save As to bring up the save dialog and save as
f-Open the .xcf file and click on select file type (by extension) to choose the format to PNG and select ‘export as’ under file dropdown menu to get the export dialogue box as shown in above fig3 and click on the Export tab.
g-The original PNG file is 2.9MB fig4.
h-As required to select the compression level value to get the compressed image which is 807.4KB shown in the above fig5.
i-To save as .jpg in (6) above select file type (by extension) and choose the file in JPG format.
j-Check the “Show preview in image window” box fig7 to bring up a preview image of your JPEG
k-Adjust the JPEG Quality slider to about 80 and the file size gets calculated (514.9 KB) fig8.
l-Click on the “Advanced Options” fig7 to open the additional JPG options and select optimize with other boxes unchecked.
m-Choose 4:4:4 (best quality) in the Subsampling box fig8 and when satisfied with the image preview, click on the ‘Export tab’ fig7 to export this JPEG file in the SAVE location
- Inkscape
- CorelDraw
- Adobe Indesign
- Illustrator
- Befunky
Optimize Images for Web: Optimzilla
(B) Optimzilla is an online tool for image optimizing, the interface supporting only 2 file formats viz JPEG and PNG that have the drag-and-drop option (up to 20 files) in the marked area. Select the individual file in the queue after uploading and use sliders to set optimization levels either more quality or less compression. Compare images to find the desired optimization before download files either in a ZIP or a standard format.
Common tools
- Compressor.io
- ImageOptim
- TinyJPG | TinyPNG
The ideal image resolution for the web is 72 pixels per inch and anything less can render the image pixelated. Resolution describes the purpose of the use of the image. Print works at 300 PPI. Web images are not suited for resizing and web graphics can never be accurate when compared to print. The compression process is essential for fast loading but degrades both color and detail.
The original image dimensions uploaded to your website has a bearing on how images display. Use images that are 1500 and 2500 pixels wide.
Raster versus Vector Graphics
Raster graphics are a common type of image file that consists of a grid of pixels where each pixel stands for an individual color within the image. Web graphics and digital photos are stored as raster graphics. Some raster image formats are uncompressed, but most use image compression. Examples of raster file formats are JPG, GIF, PNG, etc.
Vector graphics on the other hand make use of mathematical equations to outline designs. These mathematical equations are converted into points (vector paths) for connecting either lines or curves. These vector paths make up the different shapes that are rendered in vector graphic images. Hence vector graphics can be scaled to any size in small file sizes without image quality losses. Examples of vector file formats are .svg, .eps, .dxf, etc.
Retina Display Images
High pixel density retina images increase UX. Retina Images look sharp on retina displays but images not optimized look blurry. Use SVG images if possible to make your website retina ready. Raster image formats jpeg or gif look pixelated when stretched to render on larger screens as the bits per pixel are fixed. To create bitmap retina images the image taken should have two times the number of pixels displayed at 300×300 pixels to fill half of the space at 150×150 pixels. WordPress websites can use the WP Retina 2x plugin. For example, a retina image (image@2x.png) is double the normal image (image.png). The normal image and your retina image should reside within the same WordPress Media Library folder.
Use HTML for displaying images on web pages by specifying the width and height. Alternatively, HTML attributes to shrink images by 50% can also be used.
<img src="url(image@2x.png)" width="150" height="150" />
Use below CSS properties to shrink Image by 50%
{
image: url(image@2x.png);
height: 50%; width: 50%
}
Conclusion
When it comes to Image SEO, keywords relevancy matters for webpage ranking on search engines. Creating descriptive, keyword-rich file names is the key to image optimization. Search engines not only crawl the text on your webpage
