Images for the Web

Images for the web

Image Types and Copyrights

There are tons of Images on Google.
Can I use them?

Google will scan the web and brings all related images, regardless of copyright rules.

What is Copyright?

Whenever you create something, you have the rights to its autorship. It is granted in the US constitution.

What does it cover?

Sound Recordings.
Architectural works.
Literary works.
Musical/Dramatic works.
Pantomimes and Choreographic works.
Pictorial (images, paintings, drawings, photographs)

For how long?

Copyright covers both published and unpublished works.
It covers it through the life of the author plus 70 years after their death.

What are the rights of the copyright owner?

Reproduce and copy the work.
Create/Prepare derivative works based upon the work.
Distribute copies of the work to the public by selling, leasing, renting or lending.
Perform or Display the work publicly either live or as an audio or vide transmission.
Authorize others to exercise the previously mentioned rights..

How do I know if an image is copyrighted?

Look for credits in the image (caption, embedded in the photo).
Look for a Watermark.
Check for the image Metadata. Metadata2Go
Do an image reverse search in TinEye

Things that cannot be Copyrighted

Non-fixed works: It needs to be fixed in a tangible medium of expression.
Ideas or Concepts.
Facts: Works with no original information.
U.S. Government Works

Other Works

Recipes.
Fashion Designs.
titles and slogans
Domain Names
Band Names

Some of these even if they cannot be Copyrighted, can be Trademarked.

The public domain and 5 things not covered by copyright

Trademarks vs. copyrights: Which one is right for you?

Trademark vs. Copyright: Everything You Need to Know

Creative Commons

A global non-profit organization that enables sharing and reuse of creativity and knowledge through the provision of free legal tools. They offer different licenses:

Attribution

You must give credit and link to the source, provide a link to the license and indicate if changes were made.
Creative Commons License
ShareAlike

If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.
Creative Commons License

NonCommercial

You must give credit, link to the license and indicate if changes were made. You might NOT use the work for commercial purposes
Creative Commons License
NoDerivatives

You must give credit, link to the license and indicate if changes were made. If you remix, change or edit the original work you may NOT distribute the modified version.
Creative Commons License

What about AI generated images?

This topic is still not clearly defined. While there is an effort from artists to have their work out the AI source data models, it is till a work in progress. But we can draw some basic guidelines.

AI generated images cannnot be Copyrighted (as of Aug 2023).
You should always label your images as AI Generated.
When Generating AI images, avoid using "in the style of" to respect the intellectual property of the artists.
Several months ago, an MIT Technology Review article wrote that Greg Rutkowski's name was used at least 93,000 times to produce images using Stable Diffusion.
This artist is dominating AI-generated art. And he’s not happy about it.

How do I give Credit for the Images?

After you download the image, you need to give credit on your page.

The most appropriate tag for this is the figure/figurecaption combination, but depending on your design, it might not be the best one.

Other alternatives are including it on the alt text, or creating a page where you credit all the images used on your website.

                 <figure>
                  <img src="images/myImage.png" alt="image description here">
                  <figcaption>
                    <p>I can add a caption if I have one </p>
                    <cite>Photo by Patricia Sarmiento </cite>
                  </figcaption>
                </figure>

If you created the images or purchased the stock rights, you don;t need to give attribution, but it's always good to check.

Where do I Find Images?

Free Images

Purchasing an image license

Even if you pay for an image, it does not mean you can use it anywhere.
iStockPhoto
Adobe Stock
Getty Images
Different Licenses.
Typical agreement
Editorial Images cannot be used to sell o promote a product or business. They can only be used on news-related content.

Image Basics

Raster Images

Made up using a collection of pixels referred to as a bitmap
They occupy more space
They don't scale up well
Formats: jpg, gif, png, tif

Vector Images

Vector Images use mathematical statements to store information
Lines and Shapes
Scalable
Formats: svg, eps, pdf, ai

Vector vs. Raster

Vector images are lighter.
Vector images can be scaled without losing sharpness.
Raster images can display better range of colors blends.
They are compatible with all web browsers.

Web Images

JPG

A compressed image format standardized by the Joint Photographic Experts Group (JPEG).
Uses Lossy compression, discarding not noticeable information
It significantly reduces the file size of images
Good for photographs
Some information is lost in the process

GIF

GIF Stands for Graphics Interchange Format
Does not degrade the image quality
Can include a maximum of 256 colors
Better suited for buttons and banners that do not require a lot of colors.

PNG

Image file stored in the Portable Network Graphic (PNG) format
Commonly used to store web graphics, digital photographs.
Support Transparency
Uses Lossless compression and does not degrade the image quality
Bigger image size than jpg

Web Images

SVG

SVG stands for Scalable Vector Graphics
Used to define vector-based graphics for the Web
Images are scalable
Graphics do NOT lose any quality if they are zoomed or resized

WebP

The WebP format was developed by Google to overcome the limitations of JPEG
It supports lossless compression and transparency
It achieves 15% to 20% better compression than JPG
Better suited for buttons and banners that do not require a lot of colors.

In the works

AVIF: Open source image format, stores still and animated images with better compression than JPG. Full support starting Jan 2024.
The following formats should not be used in websites yet.
HEIF and HEIC: Introduced with iOS 11, offer smaller sizes than JPG.
JPEG XL: Offers lossless compression, up to 60% than a regular JPEG with the same quality.

Why do we have to Optimize our Images?

"Images are an important part of any web experience. They let us convey ideas much faster than text, help us tell powerful stories and engage with our users in ways that few other forms of content can."

“Gorgeous high-quality images have a cost. They first have to be downloaded, requiring a network overhead that can be large and, on slow internet connections (think coffee shops or when you’re on the go), can significantly slow down how quickly web pages load."

"Users with slow connections deserve a beautiful user experience too.""

Excerpts From: Addy Osmani. “Image Optimization.”

Preparing your images for the web.

As a general rule of thumb, we like our product photos to be a maximum 80-150 KB.
For large homepage hero images to be a maximum of 250-350 KB.
Every file that's included on your website counts towards your visitor's data usage.
Every hour of online streaming in standard definition consumes 1GB; 3GB in HD.

Data Storage Units

1 B = 1 byte
1 kB = 1000 bytes
1 MB = 1000 kB
1 GB = 1000 MB

Image Optimization

Sample photography sites

A file cabinet drawer with folders inside

How is my website organized?

Imagine a giant file cabinet with multiple rows of drawers. (The hosting company)
Each drawer has a name. (The domain name)
Each drawer also represents a different website.

Each folder in the drawer represents a section or a page of your website.
Each paper inside the folders representa an page.
You also have folders for different types of files.

File Structure

When working on a website you usually deal with many files.
Creating a logical structure is key to working efficiently.
Create one folder for each web project.
Keep all the files used in one website in the same folder.
Create separate sub-folders for the different file types used in your website. (CSS, JS, videos, audio, etc.)
The File path is the location of a specific file in the file system.

Relative links

This is the location of the file relative to the page your're working on.
The file belongs to your site.
They share the same URL and there is no need to add the full web address.

Link from index to page 1

<a href="page1.html">

Link from index to contact.html

<a href="contact/contact.html">

Link from contact.html to index

<a href="../index.html">

Absolute links

These are links you make from a file in your website to a file in the internet.
The file belongs does not belong to your site.
You have to add the full web address.

Link from index to miami.edu

<a href="https://miami.edu/">

Link from index to Academics in miami.edu

<a href="https://miami.edu/academics/index.html">

Link from contact.html to Academics in miami.edu

<a href="https://miami.edu/academics/index.html">

Guidelines

Keep files organized in folders by file type.
Use lowercase for HTML tags, files and folders.
Use ( - _ ) instead of spaces to name your files and folders.
Save images according to their use to keep a small file size.
Check the location of your links.

Why Index?

Most servers are configured to display the index.html by default without having to type the name of the file.

That's why your homepage will always be index.html