Over 2,000 natural sandstone arches give this U.S. National Park in Utah the highest density of natural arches in the world.
This photo guide contains:
Available as a printed book from Amazon:
Icon of India, the “Crown of the Palace” is a jewel of Muslim art and one of the New7Wonders of the World. Built 1632–53, the Taj Mahal is an ivory-white marble mausoleum in Agra, India.
This photo guide contains:
Available as a printed book from Amazon:
The Golden Pavilion — lined with real gold — graces this Shinto shrine in Kyoto, Japan.
This photo guide contains:
Available as a printed book from Amazon:
Thousands of red torii gates cover a two-mile-long path at this Shinto shrine in Kyoto, Japan.
This photo guide contains:
Available as a printed book from Amazon:
To bring you a photo-based searchable menu of over a 1,000 photo guides, I’ve redesigned the PhotoSecrets home page around a colorful mosaic of tiles.
Several custom-coded features combine to bring you a fast-loading site with a simple layout and powerful abilities. Here is a summary:
The page displays in less than a second, using half the requests of Google.com (10 requests vs. 23). The image-independent design allows for a full layout without any large photo files, which are loaded later into placeholder boxes.
Designed for the smallest screen-size first and automatically adjusts to any screen size. So everything looks consistent and natural across all devices.
A simple, clutter-free layout emphasizes images and guides. There are no adverts, columns, or auto-play videos to confuse the eye and slow down the load time. Just big, pretty travel photos.
Faster than Google!: All content and code is local (on the page), so, unlike traditional search engines like Google does not require calls to external server.
Predictive: Type two letters and matching requests are displayed — instantly!
The body customizes itself to your search requests with a colorful mosaic of tiles. Displays a customized selection from over 1,000 built-in “tiles” of books, guides, articles, whatever. Tap any tile for more info.
From “Explore” icon, you can burrow down through a wide breadth of topics, including over 300 locations and over 100 subjects/topics. This menu is part of the supplemental load, so it does not slow down the initial file transfer or load.
Read more without having to load a new page. Tap a tile and additional content — even an entire article — can pop-up. The content is already present in the HTML, so the browser can display it instantly, without requesting and loading additional data.
Edge-to-edge on any display. Lazy-load images only download just prior to display. Hardware accelerated transitions.
Only one font family is used for the body, and it’s also used on the ePub books, printed books, and apps. So there is a consistent experience across all formats.
Large resources (such as the search library, 1000+ tiles, subject menu, JavaScript for the tiles) is loaded separately in the background. Currently 80Kb (gzip), can be updated independently as new books and guides become available.
Created in 1759, Kew Gardens comprises 121 hectares of gardens and botanical glasshouses in outer London.
This photo guide contains:
Available as a printed book from Amazon:
The most photographed bridge in the world is the icon of San Francisco, USA.
This photo guide contains:
Available as a printed book from Amazon:
Henry VIII’s pleasure palace, dating from 1515, lies 13 miles southwest of central London. This photo guide contains:
Available as a printed book from Amazon:
Easter Island is famous for its 887 extant monumental statues, called moai, created by the early Rapa Nui people. One of the most remote inhabited islands in the world, Easter Island is part of Chile, 3,512 kilometres (2,182 mi) away.
This photo guide contains:
Available as a printed book from Amazon:
To bring you a fast-loading and photo-based home page, I’ve custom-made a responsive image system I call “ideal images.”
Whereas most sites serve one image to fit all screens, PhotoSecrets serves the optimum image for each screen. This minizes bandwidth and load time, and gets full resolution images to high resolution devices.
On the PhotoSecrets home page, each image is drawn first as an empty box. The actual pixel dimensions (including pixel density) are calculated, then the nearest-sized image is requested from the server.
For each image and aspect ratio, up to 50 file sizes are available, ranging from 60px to 2560px wide. Now, each device gets fast-loading AND full resolution images.
The HTML code for each ideal image looks like this:
<div
class="img w50vw a1x1"
data-img="ideal shutterstock-0127554743-a1x1-max2560">
This decodes as:
| source: | shutterstock |
| image: | 0127554743 |
| aspect: | 1x1 (square) |
| max: | 2560 pixels wide |
As you can see, this is not an <img> element, so no image file is loaded initially. The CSS draws a box according to the class — in this case at 50% of the viewport width, and as a square (aspect 1x1).
The CSS would be:
.img{
height:0;
vertical-align:top;
font-size:0;
line-height:0;
background-color:gray
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}
.img.w50vw.a1x1{
width:50vw;
padding:0 0 50vw 0;
}
JavaScript measures the rendered size, and picks the optimum width from an array, up to the maximum available which is 2560 pixels wide.
For example, if the rendered size is 720 pixels wide, the image file will be:
/images/responsive/shutterstock/0127554743/a1x1/shutterstock-0127554743-a1x1-max2560-w720.jpg
JavaScript adds this as a CSS background-image. Voilà, the image pops up in the browser.
Serving appropriately sized images requires a technique known as “responsive images.” Although simple in theory, it is a conundrum in practice.
Over half the web is images, yet there is no direct way for a device to request a specific image size.
For each image on a HTML page, we know the relative size but not the rendered size. For example, a full-width image will be rendered at 320 pixels wide on an iPhone 3, and 1125 pixels wide on an iPhone X. In my tests with optimized and compressed images, a 320-pixel-wide square image is 21 KB in size, and a 1125-pixel-wide image is 205 KB.That’s ten times as large.
iPhone widths | |||
|---|---|---|---|
| Device | Width | Retina | Pixels |
| iPhone 1–3 | 320 | 1 | 320 |
| iPhone 4–5 | 320 | 2 | 640 |
| iPhone 6–8 | 375 | 2 | 750 |
| iPhone 6+–8+ | 414 | 2.6 | 1080 |
| iPhone X | 375 | 3 | 1125 |
| Notes: Width=CSS width (or points) | |||
Serving the large file to the small screen creates many problems:
Conversely, serving the small file to the large screen gives the user an image that is 1/10 the resolution it should be.
To serve fast websites with high quality images, some intelligence is required. There are several approaches available, but they all have drawbacks. Let’s take a look.
In HTML5, an <img> (image) tag can include the attribute srcset. This is a list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use. The accompanying <sizes> tag can use media queries.
Example:
<img src="clock-img-200.png"
alt="Clock"
srcset="clock-img-200.png 200w, clock-img-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw">
Although this is generally what I wanted, I calculated that around 50 images sizes are required to cater for most devices. With one <srcset> and one <sizes> attribute per image, that is 100 lines of code — per image. That would result in bloated and ugly HTML code.
A similar approach uses the HTML <picture> tag, which is a container used to specify multiple <source> elements for a specific <img> contained in it. The <source> element can use media queries.
Example:
<picture>
<source srcset="clock-img-600.png" media="(min-width: 600px)">
<img src="clock-img-200.png" alt="Clock">
</picture>
However, this still still has the bloat problem above, and the <picture> tag is experimental technology.
The above approach can be hidden inside the CSS by using the background property and media queries. However, the bloat problem still exists, and if this is a separate CSS file, the image file info is removed from the HTML, which impairs the code readability.
An extension of the CSS background property is the image-set() function. However, this only addresses pixel density and is an experimental technology.
The server could detect the device type based on the HTTP_USER_AGENT string in the Apache .htaccess file, then serve the appropriate file size. However, this is straying too far from the HTML code for my liking.
A highly compressed high resolution image (HiDPI) can be sent, but this still provides high file size and imperfect images.
JPEG 2000 can store multiple sizes. In theory, the HTTP connection could be terminated when the appropriate size is received. However, site loading is faster when the connection is kept alive, so the browser ends up downloading a large file when only a small one may be needed. And JPEG 2000 is an experimental technology with little support.
Progressive JPEGs use interlaced display, like GIFs, to paint higher resolutions, but doesn’t address the rendered size problem.
This is the approach I took, where code analyzes the rendered size and downloads the optimum image.
“One big drawback to this approach is that using JavaScript means that you will delay image loading until at least the look-ahead parser has finished. This means that images won’t even start downloading until after the pageload event fires.”
— Pete LePage, Google Developer Advocate
Fortunately, for me, this is a benefit. My “Lightning Load” approach displays the layout quickly, using gray boxes for the images. Photos can be backfilled after page load using JavaScript. So I’m already doing JS image replacement, and decoding a responsive image is little additional work.
As HTML5Rocks notes, “there are approximately one million JavaScript libraries that do something like the above, and unfortunately none of them are particularly outstanding.”
The best off-the-shelf approach I found is Adaptive Images by Matt Wilcox. This uses cookies and htaccess to deliver optimum image file, automatically resized on the server with PHP.
Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images. No mark-up changes needed.”
— Matt Wilcox, Adaptive Images
I opted to write my own code as I wanted particular control. A PHP function finds images tagged as “ideal” and, if files are not already made, gets the original full-resolution image and downsamples it to an array of sizes. A matching JavaScript function measures the rendered size of the image box, chooses the optimum size from the same array, and adds the link as a CSS background-image.
Here are interesting links if you’re looking into this:
Get immediate results with my new on-page search engine
To offer you more photo guides in the future, I’ve redesigned the PhotoSecrets home page to get you around a new feature I call “instant search.”
Type your interest into a central search box and matches from over 1,000 options are immediately displayed. There is no waiting for a remote server, or even for a complete word — the search engine is local, predictive, and fast.
Choose from over 700 photography books, over 200 photo guides, and hundreds of blog posts and summaries of articles.
The search requires no external calls (HTTP requests). Everything is already in the web page, including the custom JavaScript search coding and the unlimited number of tagged tiles. So, unlike Google and other search engines, Instant Search does not have to wait for an external server to provide data; the results are immediate.
The body of the home page is a colorful mosaic of interchangeble tiles. Each tile can show a travel photo, a travel guide book, an app, a mini-article, links to topics, popular questions, or anything else.
Over 1,000 tiles are hidden in the page and they can be immediately displayed with the new Instant Search feature. As soon as you type a letter, a custom script on the web page searches for all tiles with tags that match your input. Enter “YOS” and everything for Yosemite National Park is shown (currently five photo guides). Enter “EX” and see photography books about exposure (currently 16).
Try a search for your favorite location, and see a customized photo menu appear before you.
Want to earn some cash? Kevin Jordan at Improve Photography has a nice article titled 20 Ways to Make a Side Income with your Camera.
Here’s the short version:
Apple has launched a microsite called How to shoot on iPhone 7. There are 16 videos, each lasting about 30 seconds and presented in a snappy Apple way. You can pick up some quick and easy photo tips.
Here are some samples: