Images on the Web

Every picture tells a story – or does it?

You might think that using a lot of images is great – I know I do, however, you need to add imagery in an accessible way so people with visual impairments still get the information.

People surfing on mobile devices might still have images turned off because of small screens and the cost of downloading data.

Great_Seal_of_the_United_States_(obverse).svgVisitors of your site might be blind or visually impaired to such a degree that they cannot see our images properly.

Other visitors might be from another culture and they don’t understand the icons you use.

Search engines only index text – they don’t analyze images (yet), which means that information stored in images cannot be found and indexed.

It is very important to choose images wisely and use them when appropriate and always offer a fallback for those who cannot see your images.  Navigation and menu issues can arise with images.

You have content images and background images.  Content images (<img> element) always get an alt tag and are relevant to the paragraph or other section.  If, however, an image is only being shown as eye candy, no alt tag is required, so alt=”” is appropriate.  CSS control offers many design options as well.

The alt attribute of image elements – your image fallback – may be necessary due to several reasons, such as the image not being available because it could not be found, loaded, or because a browser (or other user agent) does not support images.  Assistive technologies read web pages out loud to their users.  It is sometimes called “alt tag”, when it is actually an attribute of the <img> element.

Use the title attribute if you have a lot to say about an image which, if the user has mouse capabilities and the browser is capable, acts as a tooltip popup.

The longdesc attribute allows you to link to complex data like charts and graphs.  There is no visual clue that this attribute is there, but assistive technologies will let their users know there is an alternative available.

The are several image element attributes such as, width, height, src, md, units, align, alt, ismap, id, lang, and class.

HTML5 introduces the figcaption and summary elements.  Figcaption acts as the optional caption or legend for any content within its parent figure element.  A figcaption element must be the first or last child of the figure element.

The figure element is used to mark up any self-contained content that may be referenced from the main flow of a document but could also be removed from the primary content (for example, to an appendix) without affecting its flow.  This makes it suitable for various types of content raging from graphs and data tables to photographs and code blocks.  Example:

<p>This is one of the most interesting places on earth</p>
<figure>
<audio src=”where-are-we-going.mp3″ controls></audio>
<figcaption><cite>Where are we going?</cite>by Jamie Lee Jones</figcaption>
</figure>

The creation of the figcaption element is an important step forward for HTML5 because it reliably markups the caption for content that is best marked up as a figure.

The summary element represents a summary, caption, or legend for any content contained within its parent details element.  The summary element must be the first child of a details element and if there is no summary element present then the user agent should provide its own.  This is because the details element has a specific function – to markup additional information and allow the user to toggle the visibility of the additional information.  Although it is not specified in the spec, it is expected that the summary element will act as the control that toggles the open-closed status of the contents of the parent details elements.  Example:

<details>
<summary>Technical details</summary>
<dl>
<dt>Bit rate:</dt><dd>190KB/s</dd>
<dt>Filename:</dt><dd>bongo-mix.mp3</dd>
<dt>Duration:</dt><dd>01:02:34</dd>
<dt>File size:</dt><dd>78.9MB</dd>
</dl>
</details>

The introduction of the summary element seems to secure the future of the details element and the new behavior for now.  When user agents begin to add support for the details element you won’t need JavaScript, or even CSS, to have expanding or collapsing sections in an HTML document.  When and how it is implemented is still being worked on.

IMAGE RESOLUTION FOR THE WEB

Best bet?  Use different sized images.  Unfortunately, this comes with a slight hit on load but you use them dynamically with JavaScript.  You can have two images with different sizes and serve up the correct one for a specific device using Media Queries. It’s not the resolution that is important, it is the size of the image.

There are many tutorials out there that explain how to use Media Queries to target specific browsers and devices and apply special rules to them.  It is really painless.

Right now, most images on the web are served up as 72 pixels per inch (ppi), which is the standard.  Ppi is really only relevant to print.  An image sized at 200px x 200px will display the same regardless of resolution at the same dpi, but what does matter is width and height.  If you change an image 200px x 200px unconstrained except by it’s resolution, to say 96 from 72, the dpi would automatically increase and make the image larger.  I didn’t say better, I said larger.  This is why you need to know how to manipulate images for the web.  Always start big and work your way down.  Don’t go the other way when it comes to image sizes for the web.

We have been getting prepared for High Definition.  CSS3 renders user interface elements with borders, shadows much the same way vector graphics do.  They are completely resolution independent and will display crisp and smooth no matter how much you zoom into them.

UTILIZE WEB FONT ICONS – THEY’RE VECTOR – SVG

Utilize web font icons.  @font-face CSS allows you to embed a custom font which has been specifically designed with simple pictographs in place of normal characters.  This allows you to have a arsenal of re-useable vector icons at your disposal on the web.

BE RESPONSIBLY RESPONSIVE FOR PERFECT IMAGES

So, while I was researching this post, I learned that the way to go right now – if you care about how your images appear to all visitors, all the time, on every type of device, is to build a responsive site, and using media queries, serve up a higher res image via your stylesheets and media queries based on these situations, use proper HTML practices for captions and alternative text elements for your image elements & use vector icons via sprites for some navigation or menu items if your design allows for it.  Watch your load times and do everything you can to eliminate unnecessary file sizes.

I always say you have 3 seconds for your page to load. That’s it.  If it takes longer than that, there might be a defect in your design.

Gallagher, Nicolas. New HTML5 elements summary & figcaption, 2010
Heilmann, Christoper. Images in HTML, dev.opera 2012

Advertisements

Startup Georgia at Hypepotamus – Jermaine Dupri tells how So So Def got its start…..

Startup Rally 2013

One part startup exposition, one part summer internship fair, and one part launch of Startup Georgia – startup led, statewide initiative to raise the profile of Georgia startups as part of the national network Startup America Partnership.

Featuring – Jermaine Dupri, CEO of So So Def Recordings, Scott Case, co-founder & CTO of Priceline, and over 100 startups exhibiting.

What are the odds that a Georgia street/country kid would use college students from Emory University to start his company?  Although he started his tremendous success story by finding the best party thrower at Emory, he admits it was a lot of hard work, a lot of hit and miss.  The party thrower is now manager to many artists, including, Justin Bieber.

He spoke about his $200,000 website that had a lot of moving parts, but was virtually invisible in search engines.  He started a free blog and received more hits than his official website!  He enjoyed the ability to communicate with his fans, so his new venture, Global 14.com is his personal social networking site.  He is into tech now, and his new site is very nice – another one of his visions.

Jermaine Dupri is celebrating the 20th Anniversary of So So Def Recordings at the Fabulous Fox Theatre in Atlanta.  The All-Star Anniversary concert is on Saturday, February 23, 2013.  Tickets at global14.com.

A number of soon-to-be well known entrepreneurs spoke about their vision.  Students met with startups from multiple sectors and industries to find out about summer internships.  Developers, computer science, designers, business students, and all majors are encouraged to explore the opportunities available to them right here in Atlanta.

Some of these ventures include:

startup-rally_0001_Visual-Art-Werks
startup-rally_0002_viaCycle
startup-rally_0007_MrArlo startup-rally_0006_TripLingostartup-rally_0033_GoLocalstartup-rally_0028_Keep-Dreaminstartup-rally_0019_Pindrop

Check out the lineup of next generation companies blossoming in Atlanta at Hypepotamus Startup Rally.

PNG, JPEG, GIF & TIFF FILES AND WHAT IS GIMP?

11111-1-2When you convert your PNG files, your meta data and keywords are stored inside. The Portable Network Graphic format was created in 1995 when Unisys and CompuServe officially announced that programs using GIFs would require royalties because of the patent on the LZW compression method using GIF.

The best thing about PNG files for digital photographers is that they can be smaller in file size and preserve transparency.  PNG’s have proven to be the best for gradients. You can categorize and add keywords.  The danger is that there is a problem with the loss of your meta data when the image is opened with indifferent software. Your information can easily get lost.

Comparison to JPEG

JPEG (Joint Photographic Experts Group) format can produce a smaller file than PNG for photographic (and photo-like) images, since JPEG uses a lossy encoding method specifically designed for photographic image data, which is typically dominated by soft, low-contrast transitions, and an amount of noise or similar irregular structures. Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize with negligible gain in quality. By contrast, when storing images that contain text, line art, or graphics – images with sharp transitions and large areas of solid color – the PNG format can compress image data more than JPEG can, and without the noticeable visual artifacts which JPEG produces around high-contrast areas. Where an image contains both sharp transitions and photographic parts, a choice must be made between the two effects. JPEG does not support transparency.

Because JPEG uses lossy compression, it suffers from generation loss, where repeatedly encoding and decoding an image progressively loses information and degrades the image. Because PNG is lossless, it is a suitable format for storing images to be edited. While PNG is reasonably efficient when compressing photographic images, there are lossless compression formats designed specifically for photographic images, lossless JPEG 2000 and Adobe DNG (Digital negative) for example. However these formats are either not widely supported or proprietary. An image can be saved into JPEG format for distribution so that the single pass of JPEG encoding will not noticeably degrade the image.
The PNG specification does not include a standard for embedded Exif image data from sources such as digital cameras. TIFF, JPEG 2000, and DNG support EXIF data.
Early web browsers did not support PNG images; JPEG and GIF were the main image formats. JPEG was commonly used when exporting images containing gradients for web pages, because of GIF’s limited color depth. However, JPEG compression causes a gradient to blur slightly. A PNG file will reproduce a gradient as accurately as possible for a given bit depth, while keeping the file size small. PNG became the optimal choice for small gradient images as web browser support for the format improved.

COMPARISON TO JPEG-LS

JPEG-LS is a “near-lossless” image format far less widely known and supported than the other lossy JPEG format discussed above. It is directly comparable with PNG.  On the Waterloo Repertoire ColorSet, a standard set of test images (unrelated to the JPEG-LS conformance test set), JPEG-LS generally performs better than PNG, by 10–15%, but on some images, PNG performs substantially better, on the order of 50–75%.  Thus, if both of these formats are options and file size is an important criterion, they should both be considered, depending on the image.

COMPARISON TO TIFF

Tagged Image File Format (TIFF) is a format that incorporates an extremely wide range of options. While this makes TIFF useful as a generic format for interchange between professional image editing applications, it makes adding support for it to applications a much bigger task and so it has little support in applications not concerned with image manipulation (such as web browsers). It also means that many applications can read only a subset of TIFF types, creating more potential user confusion.

There is a TIFF variant that uses the same compression algorithm as PNG uses, but it is not supported by many proprietary programs. TIFF also offers special-purpose lossless compression algorithms  which can compress bilevel images (e.g., faxes or black-and-white text) better than PNG’s compression algorithm.  I need to find out more about why we would use TIFF files and plan to find out in an upcoming class.

BITMAP GRAPHICS EDITOR SUPPORT FOR PNG

The PNG format is widely supported by graphics programs, including Adobe Photoshop Corel ‘s Photo-Paint and Paint Shop Pro, the GIMPGraphicConverterHelicon FilterInkscape,IrfanViewPixel image editorPaint.NET and Xara Photo & Graphic Designer and many others. Some programs bundled with popular operating systems which support PNG include Microsoft’s Paint and Apple’s iPhoto and Preview, with the GIMP also often being bundled with popular distributions.

Adobe Fireworks (formerly Macromedia) uses PNG as its native file format, allowing other image editors and preview utilities to view the flattened image. However, Fireworks by default also stores meta data for layers, animation, vector data, text and effects. Such files should not be distributed directly. Fireworks can instead export the image as an optimized PNG without the extra meta data for use on web pages, etc.

File size and optimization software

PNG file size can vary significantly depending on how it is encoded and compressed; this is discussed and a number of tips are given in PNG: The Definitive Guide.

COMPARED TO GIF

Compared to GIF files, a PNG file with the same information (256 colors, no ancillary chunks/metadata), compressed by an effective compressor will normally be smaller than GIF. Depending on the file and the compressor, PNG may range from somewhat smaller (10%) to significantly smaller (50%) to somewhat larger (5%), but is rarely significantly larger for large images. This is attributed to the performance of PNG’s DEFLATE compared to GIF’s LZW, and because the added precompression layer of PNG’s predictive filters take account of the 2-dimensional image structure to further compress files; as filtered data encodes differences between pixels, they will tend to cluster closer to 0, rather than being spread across all possible values, and thus be more easily compressed by DEFLATE. However, some versions of Adobe Photoshop, CorelDRAW and MS Paint provide poor PNG compression, creating the impression that GIF is more efficient.

What is GIMP?

The (GNU Image Manipulation Program) is an image retouching and editing tool and is released under the GPLv3 license as free and open-source software. There are versions of GIMP tailored for most operating systems including Microsoft Windows, Mac OS X and Linux.
GIMP has tools used for image retouching and editing, free-form drawing, resizing, cropping, photo-montages, converting between different image formats, and more specialised tasks. Animated images such as GIF and MPEG files can be created using an animation plugin.
The developers and maintainers of GIMP have a product vision for GIMP to strive to be a high end free software graphics application for the editing and creation of original images, photos, icons, graphical elements of web pages and art for user interface elements.
GIMP’s fitness for use in professional environments is regularly reviewed; as such, GIMP is often cited as a possible replacement for Adobe Photoshop. The maintainers of GIMP state that GIMP seeks to fulfill GIMP’s product vision rather than seek to replicate the interface of Adobe Photoshop.
The user interface of GIMP is designed by a dedicated design and usability team. This team was formed after the developers of GIMP signed up to join the OpenUsability project. A user interface brainstorming group has since been created for GIMP, where users of GIMP can send in their suggestions as to how they think the GIMP user interface could be improved.

Sounds interesting, but I am a complete Photoshopper now, and can do just about anything from there.
I hope you learned something! I know I did….

Reference: Wikipedia – Image File Types

How To Resize an Image

PHOTOSHOP – HOW TO CHANGE THE SIZE OF AN IMAGE

resizeThe task of resizing images in Photoshop and other editors is a bit confusing. Do you “Resample Image” and what is image dimension versus pixel dimension? To get to the Image Size dialog box open an image, and go to Image>Image Size.

As you can see in the example, the Pixel Dimension box shows the file is a 1.14MB JPEG file and how many pixels are in the image. The document size box shows you how big your image will print and at what resolution. Resolution for print is generally at the 300ppi.

As for image quality on the web, a resolution of 72ppi has been the norm, however, the web is now leaning toward 90ppi to take into consideration iDevices and other monitor sources that are offering up gorgeous images. But remember – a large image will slow down a website’s page load, which of course is taboo, and printing a large sized low res image will look totally degraded and blurry.

When it comes to using images over the internet, digital images have no absolute size or resolution.  All it has are a certain number of pixels in each dimension.   The resolution changes as the image size changes because the number of pixels that make up the image are being spread across a lesser or greater area.

For web use, the DPI is meaningless. It is only useful for a file that will be printed. For web use the important part is the pixel dimensions. HTML uses pixel dimensions to control the size of an image in a web page. The size on any particular display will vary because 72DPI is no longer the norm. Most modern displays are actually above 90DPI.

You will always have a loss of image quality when you upscale an image. The information is either there, or it is recreated by some software. I understand that the software for enlarging images offered by Alien Skin does a great job, although I have never used it.

You wouldn’t want a humongous image to have to download while someone was visiting your website.  It will take too long to download and it is just not necessary to have such a huge file.  You have complete control over all of the images you have if you understand some of these basic Photoshop concepts.

Images to a Smaller Size

When you make an image smaller, you will be losing pixels in the process.  This is when you check the “Resample Image” box.  Resampling is a process in which the number of pixels (the tiny dots that make up an electronic image) is changed to modify the overall size and resolution of an image. It reduces the number of pixels in the image, leaving as much of the image as needed to maintain high quality while removing unneeded data to help the image and your page load quickly.

Check the Bicubic Sharper, which is a high-quality method for reducing the size of images.  It is based on Bicubic interpolation but also adds some sharpening.

Resizing Images to a Little Larger

Even small enlargements require adjusting the pixel dimensions. Keep “Resample Image” box unchecked to keep the pixels the same. If you are printing an image that has been enlarged a bit, you will have to see which resolution will look best. Try 240ppi (pixel per inch), and adjust according to the rules in this post – 300ppi has the most detail for print.

You can try enlarging the image 5 percent to 10 percent at a time.  Make sure Bicubic Smoother is checked, and that Resample Image is off.  In some cases you may need to purchase software made specifically for enlarging images.  Check the reviews and try any trial versions of upsampling software before you make your purchase.

Resizing Images to Much Larger

Using the Bicubic Smoother is a high-quality method for enlarging images and is based on the Bicubic method but adds some contrast while also attempting to produce smoother results.  Make sure you you check this, and that Resample Image is off.

There are several methods for re-sizing images, and thankfully, Photoshop lets you try a variety of things within the Image>Image Size menu.

Resizing for a Specific Size

If you ever need to produce an image that has a required image size, which can include max MB size, or you want to email a large image that is for use over the internet and want to shrink it, you will need to start maneuvering the pixel dimensions. Check “Resample Image”, adjust the width or height, use the scrubby sliders if you wish. If you are using images for online use, you can easily stay under 1000 either in width or height.  Use either Bicubic Smoother or Bicubic Sharpener.

Minimum megapixels for quality prints:

Max Print Size           Minimum MP         Resolution
4 x 6″                         2 megapixels        1600 x 1200
5 x 7″                         3 megapixels        2048 x 1536
8 x1 0″                       5 megapixels        2560 x 1920
11 x 14″                     6 megapixels        2816 x 2112
16 x 20″                     8 megapixels        3264 x 2468
16 x 24″                   12 megapixels        4200×2800

Retina Display is a brand name used by Apple for liquid crystal displays which they claim have a high enough pixel density that the human eye is unable to notice pixelation at a typical viewing distance. The term is used for several Apple products, including the iPhoneiPod TouchiPad, and MacBook Pro. As the typical viewing distance would be different depending on each device’s usage, the pixels per inch claimed as retina quality can be different for the smallest devices (326, iPhone and iPod Touch): greater than the mid-sized devices (264, iPad) and greater than the larger devices (220, MacBook Pro). When an Apple product has retina display, each user interface widget is doubled in width and height to compensate for the smaller pixels. This mode is referred to as HiDPI mode by Apple.

First Retina Display: iPhone 4 326ppi Pixel

Apple has applied to register the term “Retina” as a trademark in regard to computers and mobile devices with the United States Patent and Trademark OfficeCanadian Intellectual Property Office, and in Jamaica.  On November 27, 2012 the US Patent and Trademark office approved Apple’s application and Retina® is now a registered trademark.