Link tags: picture

170

sparkline

dConstruct 2022 – Photos by Marc Thiele

Marc very kindly took loads of pictures at dConstruct on Friday—lovely!

Picture perfect images with the modern img element - Stack Overflow Blog

Addy takes a deep dive into making sure your images are performant. There’s a lot to cover here—that’s why I ended up splitting it in two for the responsive design course: one module on responsive images and one on the picture element.

Awesome astrophotography from the South Downs | Science | The Guardian

To mark the start of the Dark Skies Festival today, here are some fantastic photographics taken not that far from Brighton.

Same Energy Snap

Match up images that have been posted in pairs to Twitter with the caption “same energy”. This is more fun and addictive than it has any right to be.

Star Trek: The Motion Picture | Typeset In The Future

The latest edition in this wonderful series of science-fictional typography has some truly twisty turbolift tangents.

CSS folded poster effect

This is a very nifty use of CSS gradients!

A Rare Smile Captured in a 19th Century Photograph | Open Culture

I wrote a while back about one of my favourite photographs but this might just give it a run for its money.

It was only near the end of the 19th century that shutter speeds improved, as did emulsions, meaning that spontaneous moments could be captured. Still, smiling was not part of many cultures. It could be seen as unseemly or undignified, and many people rarely sat for photos anyway.

O-o-dee of the Kiowa tribe in traditional dress with a heartwarming smile on her face in a photograph over 100 years old.

A Guide to the Responsive Images Syntax in HTML | CSS-Tricks

Chris has put together one of his indispensable deep dives, this time into responsive images. I can see myself referring back to this when I need to be reminded of the syntax of srcset and sizes.

The beauty of progressive enhancement - Manuel Matuzović

Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript offer us, by providing a basic, but robust foundation for all.

Some great practical examples of progressive enhancement on one website:

  • using grid layout in CSS,
  • using type="module" to enhance a form with JavaScript,
  • using the picture element to provide webp images in HTML.

All of those enhancements work great in modern browsers, but the underlying functionality is still available to a browser like Opera Mini on a feature phone.

Responsive Images the Simple Way - Cloud Four

A nice succint explanation of using the srcset and sizes attributes on the img element—remember, you probably don’t need picture and source elements if your use case is swapping out different sized versions of the same image.

One caveat thought: you do need to know the dimensions of the images. If you’re dealing with unknown or user-generated photos, that can be an issue.

Pure CSS Landscape - An Evening in Southwold

This is not an image format. This is made of empty elements styled with CSS. (See for yourself by changing the colour value of the sun.)

2019-11-17 – florian.photo

These are great photos of the speakers at Beyond Tellerrand—great captures of Sharon, Cassie, and Charlotte.

The Department of Useless Images - Gerry McGovern

The Web is smothering in useless images. These clichéd, stock images communicate absolutely nothing of value, interest or use. They are one of the worst forms of digital pollution because they take up space on the page, forcing more useful content out of sight. They also slow down the site’s ability to download quickly.

Queen Mary 2 | Flickr

Jessica’s photos from our transatlantic crossing. Swanky!

Sunset from the Commodore Club

Reducing motion with the picture element

Here’s a clever tiny lesson from Dave and Brad: you can use prefers-reduced-motion in the media attribute of the source element inside picture.

IndieWebCamp Düsseldorf 2019 | 2 | Flickr

Today was a good day …and here are the very good photos.

IMG_2295

Science and Tech Ads on Flickr

Stylish! Retro! Sciency!

Martin ad

I commissioned an oil painting of Barbra Streisand’s cloned dogs

There’s something deliciously appropriate about using a painting cloning service to clone a photograph of some cloned dogs.

“Did you just order an oil painting of Barbra Streisand’s dogs?” is the most Simon and Natalie thing ever.

Although this comes close:

I took it to the framing store and asked if they could do something with “an air of existential dread”… and they nailed it too!

1969 & 70 - Bell Labs

PIctures of computers (of the human and machine varieties).