Website Builders.com

  • Home
  • Builder Reviews
        • Our team have carefully reviewed a selection of premium website building platform, making it easier for you to choose the right one.

          While most website builders are compatible for generic  website building, including online stores, blogs and generic websites, some are better than others depending on what your website type.

        • Website Builder Reviews

          GoDaddy

          IM Creator

          Jimdo

          Squarespace

          Voog

          Weebly

          Wix

          WordPress

        • Store Builder Reviews

          BigCommerce

          GoDaddy Store

          Shopify

          Weebly

          Wix

          Yola

        • Comparisons

          Wix vs. Weebly

          Shopify vs. BigCommerce

  • Start A Blog
  • How To Guides
        • With over 500 pages of detailed tutorials and guides, our guides cover a large chunk of online topics.

          Learn crafty tips and tricks to make your time online smooth. Our directory is useful for internet newbies, as well as aspiring website builders.

          Check out the full directory.

        • Building a Website

          How To Build a Website

          Name Your Website – Domain

          Picking a Web Hosting Service

          Content and User Experience

          More

        • Searching and Research

          Searching the Web

          Doing Research Online

          The World of Wiki

          Finding Videos Online

          More

        • E-mails – Basics and Advanced

          Getting Started

          Sending an E-mail Message

          Opening Attachments

          Sending Attachments

          More

        • Social Media & Communication

          Instant Messaging

          Online Networking

          Facebook

          LinkedIn

          More

        • Files, Downloads, Software & Installs

          File Formats and Extensions

          Install Plug-Ins

          How to Download Files

          Downloading Software

          More

        • Making Money Online

          Making Money with Facebook

          Affiliate Marketing

          Virtual Assistant

          Writing Articles

          More

        • Online Shopping

          10 Tips for Smart and Safe Shopping

          Smart Shopping

          Protecting Personal Information

          Looking for Discounts

          More

  • Website Builder Tools Your Business Can’t Do Without (+ Links To Useful Resources)
    • HTML Character Codes
    • Advertiser Tracking Cookies: There ARE Ways To Opt Out – Here’s How
    • Website Glossary
  • Our Blog
        • Recent Posts

          When you have awesome writers, it is easy to spread wisdom. Take a look at some of our recent posts on various internet and website related topics.

          Have any suggestions on topics? Don’t hold back, send us your ideas:

          [email protected]

        • 12 Simple Rules on How to Use E-mail Politely

          Live Chat Software: Is it Worth It? Facebook Says Yes.

          Algorithmic Warfare: Is it the Beginning or the End?

          How to Promote Your Pet Business Online

          DIY Marketing: 7 Steps for any Business Owner

        • 20 Ideas to Generate Your First Online Sale

          Complete Guide to Content Marketing

          8 Best Free Photo Editors for Product Photosraphy

          Press Kits: DIY to Free Media Hype

          Why Backlinks are Essential for SEO – How To Build Them

  • About Us
    • Contact Us
    • FAQ
    • How Did You Make This Site?
    • How the Website Is Funded
    • Our Team
You are here: Home / The Complete List Of How-To Tutorials For Internet Dummies / Private: How To Build a Website / Build a Website: Working with Graphics

Build a Website: Working with Graphics

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Originally a side issue for many web designers, graphics — including large-format photographs — have become a central concern of web design. Let’s look at some of the things you need to know in order to use graphics and images successfully on your own website.

Contents

  • 1 Embedding images on a page
    • 1.1 Styling Images
    • 1.2 Images as Backgrounds
  • 2 Formats
  • 3 Responsive Images
    • 3.1 Sizing
    • 3.2 Art Direction
  • 4 Conclusion

Embedding images on a page

HTML has built-in image display capability, and has since the very earliest versions of the language. The format for including an image is:

<img src="http://example.com/path/to/image">

The only required attribute of the <img> tag is src, which is the source. This should be the URL (relative, or fully qualified) of the image to be displayed.

Styling Images

It is important to note that, contrary to logic and common sense, the <img> tag displays inline by default. That means that the image displays as if it were another word within the text, with the bottom of the image aligned with the bottom edge of the line of text, interrupting the flow of the text and messing up the line spacing.

You almost never want this to be the case. Make sure that somewhere in your CSS you include:

img {
     display: block;
}

This will pull the image out of the flow of the text. Using float: left; or float: right;, you can make the text flow around the image.

img {
     display: block;
     margin-top: 10px;
     margin-bottom: 10px;
}

img.flow-right {
     float: right;
     margin-left: 10px;
}

img.flow-left {
     float: left;
     margin-right: 10px;
}

When you flow text around images, it is important to leave some space (margin) around the image, so that the text isn’t butting up against the image. That is very unattractive.

Images as Backgrounds

You can use images as backgrounds to any element.

.element-with-bg-image {
     background-image: url("/path/to/image")
}

This is usually used for patterns and textures — that is, as part of the visual design of the page.

Some people are tempted to use background images as content. That is, they have an image they want people to focus on as part of the content of the page, and they want to include it as the background of an element. Usually this is done to achieve some weird design effect that the person doesn’t know how to do properly.

Be careful with that, though. Image backgrounds have many disadvantages as content:

  • they do not print
  • they can not easily be right-clicked and saved by the user
  • they are not indexed by Search engines, nor are their names and URLs helpful for SEO.
  • they cannot be seen by screen readers
  • they disappear in any “reading mode”
  • they are not included in RSS feeds

Basically — using background images as content doesn’t work because it isn’t intended to work. Background images are part of the background — not part of the content.

Formats

There are a number of image formats in common use, and most of them can be used on the web. The question isn’t usually, “what can I use?” but rather “what should I use in this situation?”

The most important image formats for the web are:

  • .jpg, .jpeg — The JPEG file format is primarily intended for photographs. It works well for photos because it compressess the data in a way that looses a little bit of image clarity in favor of a large amount of file-size savings. The loss in quality is not at all noticeable in most cases, but the file-size difference can make a big impact on page load times, especially if you have a large number of images.
  • .png — PNG is one of two preferred image formats for non-photographic artwork — line art, logos, and text-images. PNG files can handle transparency, so they work well for images that are a part of a layered page design. They use a lossless compression, which is why they are preferred over JPEG files for logos and other artwork: they stay crisp and clear, instead of becoming blurry.
  • .svg — SVG (Scalable Vector Graphics) are different than other types of images. JPEGs and PNGs are both raster graphics (or bitmap graphics), meaning that the image in a particular size, with a particular number of pixels. If you try to make those images too large, they begin to look pixelated and blurry. However, SVG graphics don’t don’t contain a map of all the pixels, but instructions for building the image from lines, curves, fills, and other components. SVG graphics aren’t displayed so much as interpreted. This means that they can scale to any size, without any loss of quality. Because display on the web is so variable — different screen sizes, different screen types — SVG graphics are the best option for logos, line art, and any other non-photographic content.
  • .gif — GIF is a file format that was popular before the advent of PNG. It is a very similar format, but it has a smaller range of colors. Today, for most uses, PNG is a better option. But there is one usage where GIFs still reign supreme: animated images. Once used only for ridiculous spinning globes and intensely obnoxious sparkle-star background, animated GIFs have made a huge comeback as a vehicle for meme-based humor on social networking sites.

Other formats that work online, but are not usually the best option, include:

  • .bmp — Bitmap, similar to GIF, but without compression. Therefore the image files are much larger than they need to be.
  • .tiff, .tif — Similar to PNG, but with a wide range of implementations. TIFFs made in one program may not display correctly in another. PNG is usually a better choice, because they display more consistently.

Formats which will usually not work on the web (or not work as images):

  • .psd — PSD is a file format used by Photoshop. It is not an image file, but rather a project file that includes images, history, filters, and other additional data. They do not display in web browsers. If you are using Photoshop, use Export As (or Save for Web in older versions) to create a PNG, GIF, or JPEG image.
  • .ai — AI is a file format used by Adobe Illustrator, a vector graphics editor. Like PSD files, AI files are project files that do not display on the web. Use Save As to export an SVG or PNG file.
  • .raw — RAW files are image files generated by cameras. They are, literally, the raw, unprocessed image data recorded by the camera’s sensors. The files are huge, and need to be processed by an image management program. RAW files do not display on websites.
  • .pdf — PDF, or Portable Document Format, is a file format used for creating complete documents, with style, font, and layout data embedded in the file. PDFs can be used online, but not as images. You can place a PDF at its own URL, and it will display as its own page. You can also embed PDFs into pages with various PDF-reading plugins. But you cannot use PDFs as images in any conventional sense.

Responsive Images

Today, websites need to be responsive. This means that the design — including the size of various elements — needs to respond or adapt to various screen sizes and resolutions.

What this means, practically, is that you need to provide multiple options for an image and allow the browser to choose which image to use.

When it comes to responsive design, there are two different approached for handling the selection of any particular element from a number of options:

  • resizing
  • art direction

Resizing means simply providing different sizes of the same graphic. Art direction refers to providing different versions — perhaps differently proportioned — of the same element.

Sizing

In order to provide multiple image options at different sizes, use the srcset and sizes attributes.

<img sizes="(max-width: 30em) 50vw,
           (max-width: 50em) 30vw,
           calc(33vw - 100px)"
    srcset="img-200.jpg 200w,
           img-400.jpg 400w,
           img-800.jpg 800w,
           img-1600.jpg 1600w"
    src="img-400.jpg">

Let’s break down what’s going on in that code.

The sizes is defining a list of image sizes based on screen sizes. The list has three items. The first two are pairs of the form (screen size) image size, and the third item doesn’t specify a screen size but only an image size.

The two units of measurement are em, which is about 16px with default fonts, and vw which stands for “view height” and is 1% of the screen (50 vh is half the full width of the screen).

The browser will use the first match it finds, starting at the top.

So: – for screens up to 30 ems wide, the browser should prefer an image that is 50% the width of the screen. – for screens over 30 ems, up to 50 ems, the browser should prefer an image that is 30# of the screen. – for screens over 50 em, up to any size, the image should be a third of the width minus 100px.

Since the last item in the size list doesn’t specify a screen size, it is a “catch all”.

Once the browser has determined the size for the image, it will select an appropriate option from the list of images you provde in srcset. Each item in the srcset list has a file name and an indication of its own width in pixels.

After srcset, you should still use the src attribute to define the “fall back” or default image to use.

Providing multiple options for each image, at different sizes and resolutions, allows the browser to optimize the viewing experience for the user.

Art Direction

If you want to provide one or more different images — not just different sizes of the same image — use the <picture> element, with a <source> for each version of the image.

<picture>
     <source media="(min-width: 50em)" srcset="large.png">
     <source media="(min-width: 30em)" srcset="medium.png">
     <img src="small.jpg">
</picture>

The browser checks each <source>, evaluating the <media> attribute, and then uses the first one that is true. If none of them are true, it uses the <img> tag as the default or fall back image.

So, in this case:

  • If the screen is larger than 50 ems, then large.png is used.
  • If the screen is larger than 30 ems, but smaller than 50, medium.png is used.
  • For any screen smaller than 30 ems, small.jpg. is used.

Conclusion

Images are an important part of the web. They are used as part of many site designs, and they form a large portion of many sites’ content.

Learning how to use images effectively — creating the right markup, choosing the right format, and using responsive image techniques — will make your design work stand out.

Latest Posts

Hosting

Black Friday 2023: Website Builder & Web Hosting Deals For Webmasters [Updated]

Uncategorized

Why WebsiteBuilders.com Got Hacked (Yes, You Can Blame Social Warfare)

E-mail Internet

E-Mail Etiquette: 12 Basic Rules For Politely Using E-Mail

Marketing social networking

Live Chat Software: Should You Invest In It? (It’s Easier Than You Think)

Computer Science

Never Heard Of Algorithmic Warfare? Then You’d Better Read This

Marketing

How To Successfully Promote Your Pet Business Online With Minimum Effort

Most Popular Reviews

  • Website Builder Reviews
  • Wix
  • Weebly
  • Squarespace
  • GoDaddy Website Builder
  • Shopify

Recent Posts

  • Black Friday 2023: Website Builder & Web Hosting Deals For Webmasters [Updated] November 5, 2019
  • Why WebsiteBuilders.com Got Hacked (Yes, You Can Blame Social Warfare) March 23, 2019
  • E-Mail Etiquette: 12 Basic Rules For Politely Using E-Mail November 15, 2017

About WebsiteBuilders.com

Everything you need to know about the WebsiteBuilders.com team.

About Us

Our Team

How The Website Is Funded

Privacy Policy

© 2017-2022 Website Builders.com | Sitemap