<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<small>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style></style> </small>
<table class="backgroundTable" cellpadding="0" cellspacing="0"
width="100%" bgcolor="#ffffff">
<tbody>
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-top: 0px solid rgb(0, 0, 0);
border-bottom: 1px solid rgb(255, 255, 255);
background-color: rgb(255, 255, 255); text-align:
center;" align="center"><span style="font-size:
10px; color: rgb(96, 96, 96); line-height: 200%;
font-family: verdana; text-decoration: none;">Email
not
displaying correctly? <a
href="http://www.oplin.org/4cast/"
style="font-size: 10px; color: rgb(0, 0, 255);
line-height: 200%; font-family: verdana;
text-decoration: none;">View
it in your browser.</a></span></td>
</tr>
<tr>
<td style="border-top: 0px solid rgb(51, 51, 51);
border-bottom: 0px solid rgb(255, 255, 255);
background-color: rgb(255, 255, 255);">
<center><a href=""><img id="editableImg1"
src="cid:part2.03040406.04060409@oplin.org"
title="OPLIN" alt="OPLIN 4Cast" border="0"
align="middle"></a></center>
</td>
</tr>
</tbody>
</table>
<table style="width: 763px; height: 877px;" cellpadding="20"
cellspacing="0" bgcolor="#ffffff">
<tbody>
<tr>
<td style="font-size: 12px; color: rgb(0, 0, 0);
line-height: 150%; font-family: trebuchet ms;"
background="http://www.oplin.org/4cast/wp-content/themes/4cast/images/kubrickbgwide.jpg"
valign="top" bgcolor="#ffffff">
<p><!-- Make sure you modify the 4Cast title in this section -->
<span style="font-size: 20px; font-weight: bold;
color: rgb(0, 0, 0); font-family: arial;
line-height: 110%;">OPLIN 4cast #404: Better
pictures</span><br>
<!-- Make sure you modify the date of the 4Cast in this section -->
<span style="font-size: 11px; font-weight: normal;
color: rgb(102, 102, 102); font-style: italic;
font-family: arial;">September 24th, 2014</span></p>
<!-- Begin copy of Web Source here -->
<p style="text-align: justify;font-size: 16px;
font-family: arial; line-height: 110%;"><img
src="cid:part4.07050507.07000306@oplin.org"
alt="picture frame" align="left" height="90"
width="115">Chances 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 <em>angry</em> words! Since
that's a problem for just about every website,
HTML developers have come up with a new element
tag: <code><picture></code>.
</p>
<div> </div>
<ul style="text-align: left;">
<li style="text-align: justify; font-size: 16px;
font-family: arial; line-height: 110%;"><a
href="http://arstechnica.com/information-technology/2014/09/how-a-new-html-element-will-make-the-web-faster/">How
a new HTML element will make the Web faster</a>
(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."</li>
<li style="text-align: justify; font-size: 16px;
font-family: arial; line-height: 110%;"><a
href="http://smallbiztrends.com/2014/09/picture-html-element-load-faster.html">The
new picture HTML code could make your website
load faster</a> (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."</li>
<li style="text-align: justify; font-size: 16px;
font-family: arial; line-height: 110%;"><a
href="https://dev.opera.com/articles/native-responsive-images/">Native
responsive images</a> (Dev.Opera | Yoav Weiss)
"But, even though RWD [responsive Web design]
sites looked different on each device,
underneath, <a
href="http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/">most
of them continued to download the same
resources for all devices</a>. And since
images <a
href="http://httparchive.org/interesting.php#bytesperpage">comprised
the major part</a> of the bytes that websites
were downloading, the developer community
started to look into possible solutions to avoid
this waste. [...] The <a
href="http://picture.responsiveimages.org/">picture
element</a> specification that was written in
collaboration between the community and browser
vendors was merged into the <a
href="https://html.spec.whatwg.org/multipage/embedded-content.html">HTML
spec</a>, and both Blink & Gecko's
implementations are destined to ship early this
fall!"</li>
<li style="text-align: justify; font-size: 16px;
font-family: arial; line-height: 110%;"><a
href="http://www.html5rocks.com/en/tutorials/responsive/picture-element/">Built-in
browser support for responsive images</a>
(HTML5 Rocks | Pearl Chen) "The <code><picture></code>
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
<code>srcset</code> and <code>sizes</code>
attributes recently added to <code><img></code>,
the <code><picture></code> element gives
web developers more flexibility in specifying
image resources."</li>
</ul>
<div style="text-align: left;"> </div>
<p style="text-align: left; font-size: 20px;
font-family: arial; line-height: 110%;"><small><strong><em>Articles
from <a href="http://ohioweblibrary.org">Ohio
Web Library</a>:</em></strong></small><br>
</p>
<div style="text-align: justify; font-size: 16px;
font-family: arial; line-height: 110%;">
<ul>
<li><a
href="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">Responsive
design.</a> (<em>Online Searcher</em>,
Jan/Feb 2013, p74-76 | Jeff Wisniewski)</li>
<li><a
href="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">Flexible
everything: Getting responsive with web
design.</a> (<em>Computers in Libraries</em>,
April 2013, p12-16 | Jeremy Snell)</li>
<li><a
href="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">Rules
for mobile performance optimization.</a> (<em>Communications
of the ACM</em>, Aug. 2013, p52-59 | Tammy
Everts)</li>
</ul>
</div>
<div style="text-align: left;"> </div>
<!-- End paste of web source here --> </td>
</tr>
<tr>
<td style="" solid="" background-color:="" rgb(255,=""
255,="" 255);="" >=""
background="http://www.oplin.org/4cast/wp-content/themes/4cast/images/kubrickbgwide.jpg"
valign="top" width="760"><span style="font-size:
10px; color: rgb(96, 96, 96); line-height: 100%;
font-family: verdana;">
<hr><!-- Begin standard subscription verbiage -->
<div style="text-align: justify;">The <strong><em>OPLIN
4cast</em></strong>
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: <br>
</div>
<div style="text-align: left;"> </div>
<ul>
<li style="text-align: justify;"><strong>RSS
feed.</strong>
You
can receive the OPLIN 4cast
via RSS feed by subscribing to the following
URL:
<a class="moz-txt-link-freetext" href="http://www.oplin.org/4cast/index.php/?feed=rss2">http://www.oplin.org/4cast/index.php/?feed=rss2</a>.
</li>
<li style="text-align: justify;"><strong>Live
Bookmark.</strong>
If you're using the Firefox
web browser, you can go to the 4cast website
(<a class="moz-txt-link-freetext" href="http://www.oplin.org/4cast/">http://www.oplin.org/4cast/</a>) 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. </li>
<li style="text-align: justify;"><strong>E-mail.</strong>
You
can have the OPLIN 4cast
delivered via e-mail (a'la OPLINlist and
OPLINtech) by subscribing to
the 4cast mailing list at
<a class="moz-txt-link-freetext" href="http://mail.oplin.org/mailman/listinfo/OPLIN4cast">http://mail.oplin.org/mailman/listinfo/OPLIN4cast</a>.
</li>
</ul>
</span> </td>
</tr>
<tr>
<td style="border-top: 0px solid rgb(255, 255, 255);
background-color: rgb(255, 255, 204);"
background="http://www.oplin.org/4cast/wp-content/themes/4cast/images/kubrickfooter.jpg"
valign="top" width="760"> <br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<small>
<title>OPLIN 4Cast</title>
<style>
.headerTop { background-color:#FFFFFF; border-top:0px solid #000000; border-bottom:1px solid #FFFFFF; text-align:center; }
.adminText { font-size:16px; color:#0000FF; line-height:200%; font-family:verdana; text-decoration:none; }
.headerBar { background-color:#FFFFFF; border-top:0px solid #333333; border-bottom:0px solid #FFFFFF; }
.title { font-size:20px; font-weight:bold; color:#000000; font-family:arial; line-height:110%; }
.subTitle { font-size:11px; font-weight:normal; color:#000000; font-style:italic; font-family:arial; }
.defaultText { font-size:12px; color:#000000; line-height:150%; font-family:trebuchet ms; }
.footerRow { background-color:#FFFFCC; border-top:0px solid #FFFFFF; }
.footerText { font-size:10px; color:#996600; line-height:100%; font-family:verdana; }
a { color:#0000FF; color:#0000FF; color:#0000FF; }
</style>
</small>
</body>
</html>