[OPLIN 4cast] OPLIN 4cast #404: Better pictures

Wed Sep 24 10:30:08 EDT 2014

Email not displaying correctly? View it in your browser. 
<http://www.oplin.org/4cast/>
OPLIN 4Cast

OPLIN 4cast #404: Better pictures
September 24th, 2014

picture frameChances are, your website has a lot of eye-catching images. 
In fact, if your site is typical of most websites, images probably 
account for about two-thirds of all the bytes that get delivered from 
your web server to the browser of someone looking at your site. And 
that's OK, because a picture is worth a thousand words, right? But if 
the viewers of your website happen to be using smartphones, those pretty 
pictures may be worth a thousand /angry/ words! Since that's a problem 
for just about every website, HTML developers have come up with a new 
element tag: |<picture>|.

  * How a new HTML element will make the Web faster
    <http://arstechnica.com/information-technology/2014/09/how-a-new-html-element-will-make-the-web-faster/>
    (Ars Technica | Scott Gilbertson) "If you've got a nice fast fiber
    connection, that image payload isn't such a big deal. But if you're
    on a mobile network, that huge image payload is not just slowing you
    down, it's using up your limited bandwidth. Depending on your mobile
    data plan, it may well be costing you money. What makes that image
    payload doubly annoying when you're using a mobile device is that
    you're getting images intended for giant monitors loaded on a screen
    slightly bigger than your palm. It's a waste of bandwidth delivering
    pixels most simply don't need."
  * The new picture HTML code could make your website load faster
    <http://smallbiztrends.com/2014/09/picture-html-element-load-faster.html>
    (Small Business Trends | Joshua Sophy) "Image-heavy Web pages can
    take a long time to download. Visitors get frustrated and leave your
    site. You may have implemented a responsive Web design, thinking
    that solves all your mobile problems. And it's true that a
    responsive Web design solves some problems. It automatically
    arranges and displays your site elements to be viewed on smaller,
    narrower mobile screens. But responsive Web design isn't the answer
    to everything. It doesn't necessarily solve the image download issue."
  * Native responsive images
    <https://dev.opera.com/articles/native-responsive-images/>
    (Dev.Opera | Yoav Weiss) "But, even though RWD [responsive Web
    design] sites looked different on each device, underneath, most of
    them continued to download the same resources for all devices
    <http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/>.
    And since images comprised the major part
    <http://httparchive.org/interesting.php#bytesperpage> of the bytes
    that websites were downloading, the developer community started to
    look into possible solutions to avoid this waste. [...] The picture
    element <http://picture.responsiveimages.org/> specification that
    was written in collaboration between the community and browser
    vendors was merged into the HTML spec
    <https://html.spec.whatwg.org/multipage/embedded-content.html>, and
    both Blink & Gecko's implementations are destined to ship early this
    fall!"
  * Built-in browser support for responsive images
    <http://www.html5rocks.com/en/tutorials/responsive/picture-element/>
    (HTML5 Rocks | Pearl Chen) "The |<picture>| element offers a
    declarative approach towards image resource loading. Web developers
    will no longer need CSS or JavaScript hacks to handle images in
    responsive designs. And users benefit from natively-optimized image
    resource loading-especially important for users on slower mobile
    internet connections. Alongside the newer |srcset| and |sizes|
    attributes recently added to |<img>|, the |<picture>| element gives
    web developers more flexibility in specifying image resources."

*/Articles from Ohio Web Library <http://ohioweblibrary.org>:/*

  * Responsive design.
    <http://web.a.ebscohost.com.proxy.oplin.org/chc/detail?sid=6a8af6b4-535a-4241-9dc1-ce92daa7dd76%40sessionmgr4003&vid=0&hid=4107&bdata=JnNpdGU9Y2hjLWxpdmU%3d#db=cmh&AN=85845758>
    (/Online Searcher/, Jan/Feb 2013, p74-76 | Jeff Wisniewski)
  * Flexible everything: Getting responsive with web design.
    <http://web.a.ebscohost.com.proxy.oplin.org/chc/detail?sid=ea5035f7-5267-4a7d-be4c-d82329915830%40sessionmgr4002&vid=0&hid=4107&bdata=JnNpdGU9Y2hjLWxpdmU%3d#db=cmh&AN=86880654>
    (/Computers in Libraries/, April 2013, p12-16 | Jeremy Snell)
  * Rules for mobile performance optimization.
    <http://web.a.ebscohost.com.proxy.oplin.org/ehost/detail/detail?sid=07f143bc-67ef-45fe-9645-0a2a166e9f5e%40sessionmgr4001&vid=0&hid=4107&bdata=JnNpdGU9ZWhvc3QtbGl2ZQ%3d%3d#db=buh&AN=89594095>
    (/Communications of the ACM/, Aug. 2013, p52-59 | Tammy Everts)

------------------------------------------------------------------------
The */OPLIN 4cast/* is a weekly compilation of recent headlines, topics, 
and trends that could impact public libraries. You can subscribe to it 
in a variety of ways, such as:

  * *RSS feed.* You can receive the OPLIN 4cast via RSS feed by
    subscribing to the following URL:
    http://www.oplin.org/4cast/index.php/?feed=rss2.
  * *Live Bookmark.* If you're using the Firefox web browser, you can go
    to the 4cast website (http://www.oplin.org/4cast/) and click on the
    orange "radio wave" icon on the right side of the address bar. In
    Internet Explorer 7, click on the same icon to view or subscribe to
    the 4cast RSS feed.
  * *E-mail.* You can have the OPLIN 4cast delivered via e-mail (a'la
    OPLINlist and OPLINtech) by subscribing to the 4cast mailing list at
    http://mail.oplin.org/mailman/listinfo/OPLIN4cast.

OPLIN 4Cast
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.oplin.org/pipermail/oplin4cast/attachments/20140924/8b7c206e/attachment-0003.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: kubrickheader.jpg
Type: image/jpeg
Size: 38379 bytes
Desc: not available
URL: <http://lists.oplin.org/pipermail/oplin4cast/attachments/20140924/8b7c206e/attachment-0003.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: picture-frame.png
Type: image/png
Size: 17044 bytes
Desc: not available
URL: <http://lists.oplin.org/pipermail/oplin4cast/attachments/20140924/8b7c206e/attachment-0003.png>