How to get the best results from your website and images.

Slides:



Advertisements
Similar presentations
Publisher: Name of service: License in place: within Service Type:
Advertisements

Insert an image Screen Shots How to insert an image.
Internet Publishing / Dreamweaver Luke E. Reese CARRS
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
Understanding Web Graphics Web Design Section 5-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Tutorial 3: Working with Images. Objectives Session 3.1 – Identify the differences among image file types – Evaluate the purpose of alternative text –
MIS 208 Fundamentals of Web Publishing Week 6 Performance Editing Graphics Imagemaps.
Unit E. Image Measurements The size of an image can be measured 2 ways: Dimensions: the height and width, measured in pixels. File Size: measured in Kilobytes.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
 Scaling an image is resizing the image in a graphic editing software so it is the proper size before adding it to a site.  Important NOTE: If you insert.
Images in HTML PowerPoint How images are used in HTML.
DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
CHAPTER 4 LINKS Creating links between pages Linking to other sites links.
Introduction to HTML. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is.
Images. The Element To place an image on our web page, we use the self-closing element: The src attribute ("source") is required and supplies the name.
8 Using Web Graphics Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image.
Microsoft Expression Web-Illustrated Unit E: Working with Pictures.
File Formats Different applications (programs) store data in different formats. Applications support some file formats and not others. Open…, Save…, Save.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
HTML: Images and Links Many Thanks to “Joe,” at index.html, from whom I got these lessons!
Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.
Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features.
Creating interactive web pages using Fireworks Creating a 5 page mock up.
Editing Images for the Web. Optimization/Compression Graphics optimization is important for fast web page display.
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
REEM ALMOTIRI Information Technology Department Majmaah University.
Easy WP Guide V2.6 for WordPress 3.8. easywpguide.com Adding Tags within your Post Adding Tags whilst editing your Post, will automatically assign those.
Inserting an Image Using the WordPress media manager, it’s extremely simple to insert, align and link your individual images and image galleries. To insert.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
XHTML/CSS Week 2. This Week  Quiz to revise last week (XHTML and DW)  Lists - & tags  Images tag  Hyperlinks tag  Using CSS to define the appearance.
Presented by Karen Porter UM School of Business Administration & ImpactOnlineMarketing.com Adding Links & Multi-Media.
“Rightsizing” Images for
Section 8.1 Section 8.2 Create a custom theme Design a color scheme
County Website Content Management System
Creating & Customizing Business for Sale Websites
Understanding Web Graphics
Exploring Computer Science - Lesson 3-4
Imaging and Design for Online Environment
Images.
Images.
Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
Exploring Computer Science - Lesson 3-4
Images in HTML PowerPoint How images are used in HTML
Computing Fundamentals
MUG Tuesday, May 31, 2016.
Chapter 3 Image Files © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Exploring Computer Science - Lesson 3-4
HTML Images CS 1150 Spring 2017.
1.
A computer display is made up of small squares, called pixels.
Adding Images.
Creating Accessible Content in WordPress
Resolution and Printing Tips
Graphics (Characteristics 1)
Summer 31: Web Authoring A trainee has started to create a single stylesheet to be used with the website. The stylesheet was not finished and contains.
Create and edit web pages 2
Images.
Images.
Images.
HTML Images CS 1150 Fall 2016.
Adding Images.
Adding Images.
Adding Images.
Improve SEO Of Your Website By This 5 Ways When you search about how to make your SEO right, then you can find millions of results about this all. If.
Adding Images.
Images in HTML PowerPoint How images are used in HTML
Presentation transcript:

How to get the best results from your website and email images. Image SEO How to get the best results from your website and email images.

The DAM and File Formats The DAM is simply a library offering images in various formats: .jpg, .png, .gif, .eps, etc. Websites and email will only display images in .jpg, .png and .gif file formats. Print formats such as .eps and .ai are “scalable” formats, which means you can enlarge or reduce the size of the image without losing quality. If your software will not open these formats you can ask a designer to convert the image for you. 6/28/2017

Using Images in Digital Apps The DAM, content management systems like Drupal, Sharepoint, or email applications like Click Dimensions do not have the ability to convert image size or file formats for you. Changing image file extensions in Windows Explorer results in distorted, poor quality, unusable images. Converting image formats and/or sizes requires image editing software. 6/28/2017

Image Naming for SEO The image name should be descriptive of the image contents Image name should contain a keyword that is relevant to the surrounding content. Avoid numbers and words in the image name that mean nothing to the end user or search engines Use – or _ between words in an image name instead of spaces. All these points are also good advice for PDF titles 6/28/2017

Optimum Image Size for SEO Why is sizing images before using for a website so important? Large images slow down the page load time Slow page loads result in increased bounce rate Users will leave your site if the page loads too slowly! Images should be no larger than the largest width that is displayed in the site design. 6/28/2017

What Size Should I use? Images used for print or downloaded from digital cameras are usually 300 dpi. Images for digital use should be no more than 72 dpi. Sizing images larger can cause pixelated or blurry images unless done while decreasing the dpi. Sizing images for dpi, then width at the same time will result in quality images with smaller file sizes. The image should be sized to the widest width used in the design, measured in pixels 6/28/2017

Same Image Used Twice? If an image is used in two places, for example, a “thumbnail” view in a list that is linked to a larger image on the detail page, you can use the larger image size and use html to restrain the thumbnail width. If you need to also provide a full sized printable image, it can be offered as a link that only loads when the link is clicked. That way it will not show down load time. 6/28/2017

Image Presentation for SEO Image HTML should contain an “alt” and a “title” tag. ALT tags provide alternate information for search engines and screen readers. It should include a description of the image and keywords from surrounding content. TITLE tags are similar to ALT tags, but are not crawled by search engines Browsers display the TITLE tag or the ALT tag when you hover over the image – different browsers use each When images are not yet loaded or cannot be shown these tags provide an explanation of the image. 6/28/2017

Summary: Using Images in Digital Applications Locate image on DAM and download to your local PC Open image in an image editor and save it with an optimized image name Resize the image to the correct size and dpi. Do not increase the size of the image unless you are reducing the dpi at the same time. If image is not .jpg, .png, or .gif, convert the file to one of these on save using the image editor’s ‘Save as’ feature. Do not change the image file format if it is already one of the compatible formats. Upload image to website using content management tools Insert image into website, including ALT and TITLE tags

Want to learn more? Download This PowerPoint Presentation: Image SEO Image Optimization (PDF Document with more detail) Donna Smith, Web Developer, donna.smith@boehringer-ingelheim.com 6/28/2017