Introduction
How does it work?
To best display images of different sizes and types, appropriately size images for different displays and platforms. Resolution is the most important factor in how quickly imagery will load. To preserve network bandwidth, keep resolution low where possible.
Test appropriate resolution sizes for specific ratios and devices, ensuring that assets don’t appear pixelated.
Sizes
Sizes
To best display images of different sizes and types, appropriately size images for different displays and platforms. Resolution is the most important factor in how quickly imagery will load. To preserve network bandwidth, keep resolution low where possible.
Test appropriate resolution sizes for specific ratios and devices, ensuring that assets don’t appear pixelated.
Formats
Formats
Use the appropriate format for each scenario
JPG, JPEG (Lossy)
Bitmap - recommended for photographs, very detailed images with gradients
PNG (Lossless)
Bitmap - recommended for illustrations with flat tint, vectoriel exportation and transparent backgrounds
SVG (Lossless)
Vector - recommended for logotypes and iconography made with vector graphics software.
GIF (Lossy)
Animated bitmap - recommended for basic animated pictures
Optimization
Optimization
When uploaded each image should go through a optimization tool if ratio is not matching the possibility to crop it within episerver
EpiServer existing built-in tool
Metadata
Metadata
Alt texts (alternative texs) are used within an HTML code to describe the appearance and function of an image on a page. All images, except decorative images, must have alt text that for the following reasons
- Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image.
- Alt tags will be displayed in place of an image if an image file cannot be loaded.
- Alt tags provide better image context/descriptions to search engine crawlers, helping them to index an image properly.
Some images do not need descriptions. Use alt="" if the image is:
- decorative and does not include important content
- an icon that has a text label that the alt text would repeat
- used in a link and the image is not needed to understand the link
How to write good alt text:
- Be informative and accurate. Convey the essential information presented by the image without burdening users with unnecessary details
- Keep it (relatively) short. Use, ideally, one sentence or less. The most popular screen readers cut off alt text at around 125 characters, so it's advisable to keep it to that character count or less.
- Use your keywords (but avoid keywords stuffing) Alt text provides you another opportunity to include your target keyword on a page, and thus another opportunity to signal to search engines that your page is highly relevant to a particular search query.
- Don't include "image of," "picture of," etc. in your alt text.
Don’t forget longdesc="". Explore using the longdesc="" tag for more complex images that require a longer description.
Example of Alt text
Okay alt text: <img src="bird.png" alt="Rooster">
Better alt text: <img src="bird.png" alt="Rooster crowing">
Best alt text: <img src="bird.png" alt="Red-crested rooster crowing">
(source: https://moz.com/learn/seo/alt-text)
Copyright
Copyright
We should always try to use original images in our contents. If you use an image, photo, or other design element made by someone outside IMD, get permission first. Once you have permission, always give the copyright owner credit and link back to the original source.
Images retrieved via Google image search are not licensed for fair use, but many images are available under license through stock photo websites, or open for use under a Creative Commons license. You can find below various free stock photos websites:
- StockSnap has hundreds of beautiful high-resolution photos that are free from copyright restrictions. They add new photos every week and can subscribe to have them sent to your inbox.
- Unsplash is built by a community of over 41,000 photographers who aim to inspire. This site has over 200,000 images that companies including Slack, WordPress, Squarespace, and Apple have used.
- Flickr is probably the most popular resource for free stock images. They have a combination of professional photos and amateur photos, so you may have to do some digging to find what you want. While a lot of the pictures are fair game on Flickr, you have to confirm that you follow the rules of the creative commons license they have selected.
- With a robust search engine, this is one of my preferred places to “shop” for free images. Stock.Xchng is owned by iStock, so the first row of images are often paid images – but the pictures that follow are entirely free!
- If you’re after high-quality images, Pixabay is where it’s at. Also, you don’t have to create an account to download a picture. Just click “download,” and you’re set to go.