21 November 2016

Images for Websites: Optimization, Creative Commons, Copyright & Meta Tags

When publishing images or photos on the own website or blog, one has to pay attention to some technical characteristics like size, compression and color space. If images can be shared, usage rights can be given with the Creative Commons license. Metadata is not a must, but offers a good possibility to embed information about creator, origin and usage rights into the images. A useful element on websites is the alt tag for images.

There are many possibilities for accomplishing this, and many programs for publishing photos on the own site.

Here is my workflow with the open source software Gimp and ExifTool. Gimp comes along with the handy plugin „Save for Web“. The programs run on Linux, Windows and Mac.

Color converting with Gimp with a photo from the Oberbaum Bridge
Photos can be made fit for a website with the free image editor Gimp. Here the conversion from Adobe RGB to the sRGB color profile with a photo from the Oberbaum Bridge (Oberbaumbruecke) in Berlin.

1. Size, format, scaling, compressing, color profile

Editing with Gimp

The images should be made in best quality, that gives scope for editing. If the color space can be set with the camera to e.g. Adobe, then it is best to leave it during editing. The conversion into the right color space is always the last step.that

If photos can only be taken in JPG format, it is better to convert them into the lossless TIF format before editing.

 

Format: After editing, the image can be cropped. Common formats are 16:9 (longish, like the one above), 3:2 ('photo-feeling'), or square. Usual is also 2:1 or 4:3. Of course there is no need for typical formats. It is just pleasing the eyes to determine the a few aspect ratios and repeat them on the website.

 

Size: The size comes along in two units: the size in pixel and the 'weight', the size in kilobyte (kB).

 

Scaling - the size in pixel: The size in pixel can be calculated based on the largest display. E.g. this website has a maximum width of 2000px. If an image should be extended over the whole width, then it must have a width of 2000px, like the banner above. The blog texts in contrast take up 60% of the 'content' (at the maximum width), and the 'content' 5/6 of the page width (1/6 is the sidebar). 2000px x 0,6 x 5:6 makes 1000px image width; and 500px, if the image covers only half the space of the blog texts. If there is any text on the image it must be readable. You can leave the original file larger and link the image to the original file. Leave it also larger, if the image will be shown in a colorbox.

To scale the image, input the desired width in Gimp Image → Scale Image. The resolution below is unimportant, that is only for print. The Interpolation is cubic.

 

Color Space: Then the image will be converted into the right color space. For the web this is a sRGB color profile. There are different sRGB color profiles. I made good experiences with the ICC profile sRGB black scaled. Normally the color profiles should already exist. You can also download them from the site of the International Color Consortium. In Linux Mint, Ubuntu & Co the color profiles can be installed with

sudo apt-get install icc-profiles

After installing they are located in the folder /usr/share/color/icc.

In Gimp you can select the color profile in the dropdown menu under Image → Mode → Convert to Color Profile. The rendering is 'Relative Colorimetric' with 'Black Point Compensation'.

Save for Web

Gimp plugin Save for Web with a photo from the Oberbaum Bridge
The file size can often be compressed further more. Just controll compression and image quality with 100% or 200% zoom view. Don't forget to check 'Strip Exif'.

A useful Gimp plugin is 'Save for Web'. That can be downloaded from the plugin seite, or under Linux Mint, Ubuntu & Co you can install it with

sudo apt-get install gimp-plugin-registry

(some filters will be installed along with it).

You can call the plugin under File → Save for Web.

The format  JPEG is the right one for photos.

 

Compression - the size in kB:  The quality of compression can be set with a controller. The image size will be calculated and the image displayed. The compression quality is at 85% by default, but can even be further reduced without affecting the quality of the image too much.

The file size should be low, in favor of a fast loading page. It is best to serve different image sizes for different devices like desktops and smartphones. The size is also dependent wether the images are self hosted or served by a CDN, wether you have an own server or are on shared hosts / a web hosting package.

This site runs on a web hosting package without CDN. With photos I stay below a size of 200 kB. I try to compress the images around 50 kB, important ones around 150 kB. It is best to play with the values until a compromise between the desired file size and image quality is achieved.

 

Strip Exif: Check the option 'Strip Exif'. The Exif data will be edited later. 'Save for Web' deletes the metadata of the camera like the recording time or camera type. This is in most cases unnecessary ballast and privacy unfriendly. Information about color space and color depth will be kept.

 

File name: Save the image with a descriptive name, e.g. 'oberbaum-bridge.jpg'. Several words in the file name are separated by a dash. The file name should not contain special characters.

2. Copyright, copyright symbol, usage rights and Creative Commons licenses

Now the photo is ready for upload. Time to think about how others are permitted to use it, which rights on the image are shared and which ones aren't. Later these information can be written into the image file.

 

Copyright: The Copyright of an image or photo may be automatically given to the creator (which is in the normal case the one who made the photo), but the copyright laws vary from country to country. In many countries you hold the copyright over a work or a photo without doing anything about it, and also without marking it. However, you may enhance your rights by marking it with the copyright symbol following by the year of publishing and the name.

It is anyway no mistake to mark it, not only to because of juridical questions, but as a notice and information for others. Besides, copyright laws are subject to modifications.

 

Rights of use: These are the rights which can be transferred to others by licensing the photo. Rights of use imply e.g. to post the downloaded photo somewhere else in the internet; to print the photo; to print the photo on cups and shirts and sell them; to use the motive in a collage.

If the rights of use are not granted, then others are not permitted to do so. This can look like:

 

© 2016 Pepita Samplie, all rights reserved.

 

Different spellings are possible. The phrase 'all rights reserved' can be omitted. But in my opinion this phrase makes clear what is meant.

Creative Commons licenses

If the image can be shared, the rights of use can be granted quick and uncomplicated with the Creative Commons license. The advantage is the internationality of the license. There exist different types of the license, dependent whether a commercial use is allowed,whether the images can be altered, whether it has to be shared under equal conditions, e.g.:

 

©2016 Pepita Samplie, license: CC BY-ND 4.0

 

in the long form:

 

©2016 Pepita Samplie. This work is licensed under a Creative Commons Attribution-No Derivatives 4.0 International License (CC BY-ND 4.0) https://creativecommons.org/licenses/by-nd/4.0/

 

In this case the license implies the free use, even commercial, with giving credit. Also the work must not be altered.

There exist six Creative Commons 4.0 licenses, which are made of different modules:

 

  1. Attribution (CC BY)
  2. Attribution-Share-alike (CC BY-SA)
  3. Attribution-Non-commercial (CC BY-NC)
  4. Attribution-No Derivative (CC BY-ND)
  5. Attribution-Non-commercial-Share-alike (CC BY-NC-SA)
  6. Attribution-Non-commercial-No Derivative (CC BY-NC-ND)

 

The borders between commercial and non-commercial are blurred in practice. It does not need direct selling, just think of the blog of a freelancer or Google ads in the blog.

If the images can be used completely free, also without attribution, then they can be marked as 'Puplic Domain'. With that, the copyright-holder waives as many rights as possible.

The license and information about the rights of use may be published on the website. Another possibility is it to write the infomation in the metadata of the images ('embedded metadata'). With that the information stays with the images, even when they are posted elsewhere. It does not protect of misuse, but in the normal case it should provide a useful information to others.

3. Metadata and ExifTool

Embedded metadata for the use in the internet

Embedded metadata is part of the image file. It is like additional information written on the backside of a picture. It can be read by many image managing or -processing programs. There exist many different metadata tags. They are useful for image management (keywords, ratings), but can also later in the internet provide answers to others like:

- where does the image come from?

- who made it?

- what's it about?

- can I use it?

If the image is shared in the internet, these information can be read by others who e.g. find the image in a few years in the future somewhere in the web.

The Oberbaum Bridge with the city train in Berlin
The Oberbaum Bridge in square format. Exif- and XMP tags are written into the image file and can be read byimage editors.

To make things complicated, there are different metadata standards, like Exif, ITPC and XMP, with lapping schemata of information. Therefore it is good to figure out the purpose, what kind of information should be given.

ExifTool for editing metadata

Metadata can be written with many image editors, with varying support of standards. The program ExifTool is an extensive editor of metadata. The tool works on the command line. Since some information is consistent (who made it, where does it come from?), the advantage is that the command can be saved, and then, with only one Copy & Paste all metadata can be written into all images. There is no need to fill out single fields for single images.

Another advantage is that certain commands can be set with the prefix -mgw:. Then the content of the tag will be written in all standards (Exif, ITPC, and XMP), as far as technically possible. MWG (-mwg:) serves as a synchronization of the different standards.

The program can be downloaded from the ExifTool site. Ubuntu, Linux Mint & Co can install the tool with

sudo apt-get install libimage-exiftool-perl perl-doc 

Edit Metadata with ExifTool for publishing in the Internet

 

Creator

The command

exiftool -mwg:Creator="Pepita Samplie" -overwrite_original -ext jpg .

writes the creator in all jpg files (-ext jpg=extension JPG) in the current directory (.), without writing a backup (-overwrite_original). In this case two tags are written: the Exif tag artist, and the XMP Dublin Core Tag creator.

Instead of -ext jpg . you can write filename.jpg for single images, or use a wildcard *.jpg for all JPGs in the current directory, e.g.

exiftool -mwg:Creator="Pepita Samplie" -overwrite_original filename.jpg

or

exiftool -mwg:Creator="Pepita Samplie" -overwrite_original *.jpg
 

Date of publishing

exiftool -xmp:CreateDate="2016:08:31" -overwrite_original -ext jpg .

writes the date of publishing in the Internet into the metadata of the images. In this example only the XMP tag is written. Instead of -xmp: you can use also -mwg:, but then the format of the date is determined: "YYYY:mm:dd HH:MM:SS"

You are more flexible with XMP, the date can be written in more detail, with fractions of seconds or timezone, as well as simple in the format "YYYY:mm:dd" or "YYYY:mm".

In this example only the year of publishing is written:

exiftool -xmp:CreateDate="2016" -overwrite_original -ext jpg .
 

Information on rights of use, copyright and licenses

exiftool -mwg:copyright="©2016 Pepita Samplie, all rights reserved" -overwrite_original -ext jpg .

or

exiftool -mwg:copyright="©2016 Pepita Samplie, license: CC BY-ND 4.0" -overwrite_original -ext jpg .

For the Creative Commons license another XMP tag is recommended, in the long form with a link to the license

exiftool -xmp:usageterms="This work is licensed under a Creative Commons Attribution-No Derivatives 4.0 International License (CC BY-ND 4.0) https://creativecommons.org/licenses/by-nd/4.0/" -overwrite_original -ext jpg .

The Creative Commons initiative also recommends that in -mwg:copyright the same content is written as in -xmp:usageterms. But -mwg:copyright already writes the content two times (Exif tag and XMP tag). As a result I have an image which might be only of the size of 40 kB, but contains three times the link to the license. This is out of proportion. There are also special metatags for Creative Commons, the same applies to them: for normal user unnecessarily complicated.

 

Where does it come from - the domain

For the domain hosting the original image there is no special tag. The domain can be set with the tag publisher:

exiftool -xmp:publisher="http://www.domain.tld"
 

URL, description and keywords – changing metadata

Optionally you can add more meta tags: the URL of the site where the image is shown, description and keywords. This is a little bit more work, because the tags must be edited for single images. Besides, for search engines the embedded metadata does not play a role. They rather read the metadata of the website.

Nevertheless for the sake of completeness:

 

URL

exiftool -xmp:source="https://www.pepita-samplie.tld/path-to-the-site-where-the-image-is-shown" -overwrite_original -ext jpg .
 

Description

exiftool -mwg:Description="The Berlin sight Oberbaum Bridge in the evening" -overwrite_original -ext jpg .
 

Keywords

exiftool -sep ", " -mwg:keywords="Oberbaum Bridge, Berlin, sight" -overwrite_original -ext jpg .

The -sep ", " indicates that keywords are separated by comma and space.

 

Information about creator, rights of use and origin

The commands can be nicely combined - in this example only meta tags which do not change so fast.

exiftool \
-mwg:Creator="Pepita Samplie" \
-xmp:CreateDate="2016" \
-xmp:publisher="https://www.pepita-samplie.tld" \
-mwg:copyright="©2016 Pepita Samplie, license: CC BY-ND 4.0" \
-xmp:usageterms="This work is licensed under a Creative Commons Attribution-No Derivatives 4.0 International License (CC BY-ND 4.0) https://creativecommons.org/licenses/by-nd/4.0/" \
-overwrite_original \
-ext jpg .

Maybe the line breaks do not function under windows. Then put the commands just one after the other, separated by a space, without enter. That should function on all platforms.

With

exiftool -ext jpg .

the meta tags are listed and the result can be reviewed.

Here is a list with all mwg supported tags. For the ExifTool commands there is a site with common examples. Who does not like it that date saving will find many more tags on the ExifTool site.

Even though the meta tags of the images can be overwritten by others intentionally, in the normal case, just with posting the image on another site, the information about origin, rights holder and licenses should be contained. Just be careful with social platforms, they sometimes overwrite metadata or delete them with downloading, as a test shows.

At the beginning dealing with metadata is annoying and time-consuming. But once it is clear what should happen, then it is done with a saved command and copy & paste, and the effort is practically zero. After saving the images with Save for Web, I open the file manager with the integrated shell, copy he command into it, and that was it.

4. Website tags and robots

Alt tag and title tag

After uploading the images on the website the most CMS like Wordpress and Drupal offer alt tag and title tag fields to fill in.

These tags (attributes of HTML tags) belong to the website. They won't be written into the image files like the tags above, but stand next to the images in the source code of the website.

Especially the alt tag is advisable. It will be shown whenever the image fails to load, is read by screen readers, and search engine robots read it as well. The title tag is optional.


The published photo:

 

The Berlin sight Oberbaum Bridge
The Oberbaum Bridge in the format 3:2. The origin and licenses of the photo can be read by using the meta
tags; and Google can feed on the file name and alt tag.

In this way the tags could be read by image editors and robots:

 

File name: oberbaum-bridge.jpg

Alt tag: The Berlin sight Oberbaum Bridge in the evening

Titel tag: Oberbaum Bridge

 

Meta tags:

Creator: Pepita Samplie

CreateDate: 2016

Publisher: https://www.pepita-samplie.tld

Copyright: ©2016 Pepita Samplie, license: CC BY-ND 4.0

Usage terms: This work is licensed under a Creative Commons Attribution-No Derivatives 4.0 International License (CC BY-ND 4.0) https://creativecommons.org/licenses/by-nd/4.0/

 

Optional:

Subject (Keywords): Oberbaum Bridge, Berlin, sight

Robots

Since robots cannot identify images, the content of the image will be classified from text: the file name, alt tag, caption, the text which surrounds the image, and so on. The embedded metadata is not interesting for search engines. Maybe it is used when there is no other information.

As a test just imagine the image completely in black and then answer the question, what is shown. Auxiliaries are the file name, caption and alt tag, blog article and metadata (and the rest of the website we know as well:)) ---

 

Search results: I don't think that the image with the tags is important for the (image-) ranking. The requisites to get into the image search at all, is, of course, to be able to assign keywords to the image.

Important for the assignment is the file name, alt tag, caption, and the article (with the titles) surrounding the image. Also, if the combination of the text snippets makes sense. In my opinion the ranking of the article is deciding for the ranking of the image in the image search.


Note about distinct forms of metadata: There is not only metadata for images, but also metadata for whole websites. These metadata for websites is enclosed on top in the source code in the 'head', and it follows similar schemata. It is written directly in HTML, or edited with a plugin or module in CMS like Wordpress etc. These meta tags are read by search engines. If an image is downloaded from a website, these meta tags are not downloaded but stay on the website.

 

Note about embedding Creative Commons content: If other contents with a Creative Commons license shall be embedded into the own website or blog, then you should pay attention to giving the correct attribution. The correct attribution differ from Creative Commons version to version. It could be a link to the original file, to the site of the rights holder, to the license, or naming the rights holder, or the title of the work or both and so on. If the attribution is not correct this is an infringement of the copyright law (at least in Germany).

 

Note about copyright law and rights of use: This article is a general information and cannot be a substitute for legal or professional advice. The copyright law is very complex in the details and vary from country to country as well as in the individual case.

Add new comment