28 Nov 2016
Guide to Publishing Images on the Web
This article is intended for those who administer and publish visual material online, but do not necessarily have experience in web design or development.
The article contains advice for non-developers and non-technological personnel on how to choose, format and upload images to their websites.
Longer load times and unnecessarily large images lead to visitors leaving the site prematurely, and might also incur extra costs for visitors on mobile data plans. Successfully using images on the web is not as simple as downloading a picture from google and hit publish.
Finding the Right Material
Images on the web are not free for all to use everywhere. If you want to use an image that you do not own the rights or license to, start by asking the owner for permission. If permission is denied, you can buy images and the licenses to use them from a multitude of stock image providers offering a wide range of art and photography images.
There are also a few free resources offering open source licensed images. Try Wikipedia commons, unsplash or use the filtering options on flickr to find images that are free to use. The site ”I Am CC” lists images released under creative commons license on Instagram.
Height, Width and Density
Visitors browse your site using a wide variety of devices – smartphones, tablets, laptops, desktops and even TV screens. An image that works well on a very small screen might need to be enlarged to have the same impact on a larger screen. However, serving all devices the same large image leads to having mobile and tablet users download unnecessary data since a large image often also is heavier in terms of byte size.
A common solution to this problem is to serve users different images based on the width or proportion of their screens. This is part of having a responsive website, which means the website will adapt its layout to suit different screen sizes.
Apart from size, screens also have a resolution. High definition screens, or “retina screens” as Apple calls their high definition screens, contain more pixels per inch than normal screens. The result is clearer, crisper graphics.
Since the number of pixels per inch is increased, the image quality also has to be increased to take advantage of the extra pixel density. Just as specific images are served to specific screen sizes, we can serve higher quality (essentially larger) images to high definition screens.
As technology develops, the number of pixels per inch in high definition screens has increased. Some screens have three times or more pixels compared to the number of pixels in a non-high definition screen. Increasing the image sizes to cater for resolutions this high is not recommended since the images needed simply will be too heavy due to their large format. One solution for this problem is using the vector based image format SVG (Scalable Vector Graphics) for simpler images. More about this and other image file types in the next section.
SVG images are typically used for simple imagery like logotypes and icons. An SVG consists of code for the shapes and paths that make up the image. Therefore, images like photographs or complex illustrations with shadows cannot be converted to SVG.
SVG is a vector based image format that will have the same appearance no matter of the screen definition, because it consists of code describing its contents in a way that definition does not affect it.
Since the SVG images consist of code, they are also used (together with JS, CSS and HTML) for creating animations on the web.
SVG images do not work in Internet Explorer 8 or previous versions of Internet Explorer. SVG images will not show up, and in some cases also make the page render erroneously. If you need to support Internet Explorer 8, you will need to have a system to replace SVG images with fallback images in another file format.
Use this format for photographs or other images that have a lot of different colors, shades and do not need to have transparency (to be see-through) in places*. This is often the lightest weight format for images such as photographs. If you use a more advanced image editing program, you will be able to set the quality of the image when saving. Try to use as low quality as you can while still maintaining an acceptable image, since that will produce the lowest file size.
*Transparent areas gets filled in with white
Use this format for images that need to be of high quality, have a smaller range of colors or have transparency in places. Generally, PNG files are larger in file size compared to the same image saved as JPEGs, however they are generally also better in quality.
The GIF image format is mostly used for small and simple images with fewer colors instead of SVG, and for introducing animations in the simplest possible way. Looping minivideos with blinking memes on the Internet often come in the form of animated GIFs. Even if GIF images allow for transparency, they do not handle semi-opacity.
WebP is a relatively new image format developed by Google specifically for web images. WebP images are smaller compared to JPEGs, and they also allow for transparency just like PNGs. The drawback is that the format is not supported in all major browsers. As for now, the format is only supported in Chrome, Opera and Android browsers. If or when the format reaches a wider browser support, it could be the go-to format for images on the web.
To be able to use webP images in production today, you will need to have a fallback system in place to serve other file formats to the browsers that do not support webP.
Obesity Makes Websites Slow
Even if you’re not a developer you still are responsible for the material you publish. Feeding your website images that are larger and heavier than they have to be, is going to punish your website visitors by making the website load unnecessarily slow.
For users who are on mobile payment plans where they pay for every bit of data they use, your site might incur considerable costs to use. As consequence, having a site that costs more to visit compared to other sites will act as a hinder for some of your visitors. To get at grasp on how much your site costs to visit using mobile payment plans in different countries, visit the site “What does my website cost”.
See the Light – Make Your Images More Performant
There are multiple ways of creating “light” versions of your heavy weight images. The first and obvious step is to decide how large in terms of pixels your image really has to be. Feeding a website an image that is twice or even three times as wide and tall as the real estate it occupies on screen is asking for trouble in terms of longer load times and increased visitor bounce rate**.
If you upload extra large images to provide high definition screens with the sharpest images possibly, there should also be a responsive image solution in place to guarantee users with normal screens do not have to download extra data.
When such a solution is in place, chances are good you have the possibility to upload large images that are cut, scaled and authomatically inserted in the pre-defined responsive image solution. This solution should also take into account screen resolutions, which means uploading a really large image might even be required to create all of the different image assets needed.
But even if you have a nice responsive image solution built into your CMS, there is always a good idea to make sure your images are compressed before uploading them. This can in some cases be done automatically by plugins in your CMS, or manually before the images are uploaded.
**When things take time, people tire and leave.
Compressed Images are Slimmer
When an image is compressed, image data is altered to gain a smaller file size. Some compression techniques sacrifice image quality, while other techniques optimizes the image data without altering how the image will look to the human eye.
A lot of technical stuff is happening under the hood of these optimization tools***, and the goal is to produce an image that is considerably lighter in file size, but still looks good.
***Different types of compression rates and types will affect the image quality in different amounts
There are many tools available for image compression. Some free options are:
- Compressor.io – online image compressor that supports JPEG, PNG, GIF and SVG. Offers two types of compression: lossless (unaltered picture quality) or lossy (picture quality reduction). Batch uploads currently not available.
- TinyPNG.com – online image compressor that supports PNG and JPEG. Batch uploads are restricted to 20 images, with a max size of 5 MB each. Offers lossy compression.
- Optimizilla.com – online image compressor that supports PNG and JPEG. Batch uploads are restricted to 20 images.
- Kraken.io – commercial online image compressor that also offers a free web version. The free version has a file size limit of 1 MB.
- PNG Gauntlet – software available for Windows, Mac and Linux. Supports PNG, and can also convert other file formats to PNG.
- FILEminimizer Pictures – software available for Windows. Supports JPEG, GIF, PNG but also BMP, TIFF and EMF file formats. Has a reputation for being especially good at compressing JPEG files.
- Imageoptim – software available for Mac. Supports GIF, JPEG, and PNG.
– Checklist –
for Publishing Images on the Web
- Make sure you have the right to use the image.
- Choose the appropriate image size. Adjust the image size to how much space it will occupy on your website.
- Choose the appropriate image format based on the motif of your image.
- Compress your image before publishing it on the web.