Optimizing images for the web

Images

The most common web-based image file types are JPEGs, PNGs, GIFs, and SVG. In most photo editing tools, such as Photoshop, you will find these and various settings when you use the save as or export as options e.g., “Save for Web.” If you want to learn more about these specific image types and more, we recommend you review Mozilla Web Docs Image file type and format guide.

Reduce File Size by Compressing Images

Generally speaking, dominKnow | ONE does not change your images when you upload, so we recommend you use compression and/or resizing to optimize your images before uploading. 

Height and Width Considerations

Default height and width of images is often quite large and excessive for most designs. To determine the optimal height and width you should consider the placement of your image and make the height and width appropriate for the planned use. Simply put, if the image is placed at 300x200 that is the appropriate height and width you should resize it prior to upload. An image from my camera which defaulted to 6000 by 4000 was 16 MB and then when I resized it to 300x200 it was reduced to 128 kb! It is safe to say if you are using images straight from a phone or camera they will need to be optimized. When resizing make sure you maintain “aspect ratio”. This will force the image to be resized proportionally and prevent you from having a distorted or stretched look and feel. Careful use of cropping and fixed aspect ratio when resizing can help you achieve the desired outcome.

What if you don’t have image editing software?

If you use a Mac: The Preview software included with your computer, will allow you to adjust the size of an image and the DPI (dots per inch) to get a smaller file size.

If you use Windows: Paint comes with your computer and can be used for resizing.

Some commonly used image compression tools.

There are many highly rated image compression tools for Windows and Mac that may be found with an internet search.

What sizes should I make my images?

An image file’s size is determined by the resolution and the height and width of the image. The standard image resolution for web use is 72 dots per inch (dpi) or pixels per inch (ppi). It is most important to determine your own image optimization policy so that you may standardize the image optimization across your organization. A general rule for webpages is to try to get to 50-70KB or less for the total size of the page. That means less for each image. For full width images or background images it is good if you can get 200KB or less. PNGs and SVGs should be in the 5 – 15 KB range but could be larger depending on the graphics size. The images below look the same but, on the left, the image is optimized for the web. The image on the right will likely take more time to fully appear even if you have a solid internet connection.

In the example below, the image on the left has been resized to be 100% of the Height and Width needed (1109 x 800 @ 72 dpi) so that it is optimized to provide better performance. The image on the right has not been optimized, so it may take longer to appear to learners who have a slow internet connection.

Image Types

JPEG/JPG

JPEG images allow for a higher-quality image with a smaller file size and are usually best for images taken with a camera or phone (photography). This file type will probably work for most high-quality images you want to use.  JPEG is a “lossy” format, which means that some images are going to get blurry with compression, like images with fine lines, contrast, Black and White, and more.

When using a JPEG image, consider exporting it as “Progressive” to allow the browser to instantly load a simple version of the image as it is loading the full resolution image. Also, be careful not to over compress JPEGs. If you have seen blurry or pixilated images, this is caused by setting the compression level too high. The higher the compression, the lower the quality. To get the best out of JPEG it is good to size them for the use and pick the smallest compression that retains the desired level of visual quality.   What is the difference between JPEG and JPG? There is no difference. If you are interested in more of an explanation you can read the article, Difference between JPG and JPEG.

PNGs

PNGs can be used for complex and simple images. Many are using PNG for all images today though you may find that you prefer using JPEGs for specific images. Overall, JPEGs are still known for responding well to image compression and creating a smaller file size. Unlike JPEG (“lossy”), PNG is a “lossless” file type which can make it perform better for certain images.

Logos and icons are good examples of images that would use the PNG file format, especially if you reduce colors and/or need transparency. Simple graphics with a few colors can be saved as PNG files to create high quality images with low file sizes that are perfect for use on a website. In fact, the PNG format was developed to be used for the internet or digital. PNG also tends to be more scalable. If you need to size an image slightly larger PNG tends to perform better than JPEG. Experimenting and testing what works best for your situation is the best way to find out.

PNG-8	PNG-24	PNG-32
256 Colors	up to 16 Million Colors	16 Million Colors or more

PNGs have been replacing GIFs and JPEGs for a variety of uses like logos, icons, buttons, and interface elements as well as full color images that might have contrast, lines, a screenshot, or photo realism. PNG-24 can optimize a complex color image better than JPEG in many cases, providing a higher quality, but not always a smaller file size. If you want to have a portion of your image transparent, PNG is the best option over GIF as well. You should be able to export or save as PNG-24 (up to 16 million colors) or PNG-8 (256 colors) to experiment with quality and size. PNG-32 (16 million or more colors) is not recommended for optimal web use, but it is an option. If you do not have a variety of color in your image, PNG is preferred for superior quality and tiny file size. Mouseovers, button presses, and other mouse movements can cause unwanted shifting in the user experience (UX), so it is recommended that you be precise in your PNG image dimensions.

Both PNG-8 and GIF are limited to 256 colors to render an image.

GIFs

A GIF is a format for image files that supports both animated and static images. It was the standard for 8-bit color images (icons and buttons) on the internet until PNG became a viable alternative. GIFs support transparency but PNG's handle transparency more efficiently and with better results than GIF.

We recommend the best use of GIFs is for short animations (Animated GIFs) or to create a retro look or effect. Animated GIFs are several images or frames combined into a single file. To optimize GIFs, you must consider how long the animation is, if it is looping, and work out how best to be judicious about their use.

Scalable Vector Graphics (SVG)

SVG uses code or tags to read and display the colors and paths (vectors) and/or pixels (raster) in the browser. The article, Comparing SVG and PNG File Sizes, can help you understand more about the results you can expect.

You do not need to understand all the technical stuff to use SVG. The number of vectors in an SVG can make it larger than a PNG. If your content uses a variety of two-dimensional illustrations or technical diagrams you might want to consider SVG graphics. Experimenting for your use is always the best way to decide. SVGs can be scaled up or down with no loss of quality, allowing for quick response zoom on the web or diagrams. SVGs can be animated which might help you to inform or educate better with your example. The most common software for generating SVG is Adobe Illustrator, and you may need to optimize SVGs exported from Illustrator. SVG is a WC3 web standard, and you can find more advanced information at the WC3 SVG section of their website.

SVG “How to” in the dominKnow | ONE Community

SVG Graphics Tips and Sizing

Images “How to” in the dominKnow | ONE Community

Optimization for Images
Override the automatic resizing of high-resolution images
Working with Image Elements - You can transform and use images in a variety of ways (Options, Styles, Effects, Markers, Hotspots, and more) with our built-in editing features. There is a robust image editing feature bult in to dominKnow | ONE you will find in this community article.
Working with Sections with Image Backgrounds