SlideShare a Scribd company logo
Delivering Beautiful and Fast
Images and Video
Doug Sillars
@DougSillars
UX Connect London
November 6, 2018
Contact Me:
@DougSillars
Doug.Sillars@gmail.com
www.dougsillars.com
Doug Sillars
Freelance Developer Relations
Performance Audits: Web/Native
Workshops:
Performance/Images/Video
http://bit.ly/HighPerformanceAndroidApps
Ux connect london_fastandbeautiful
0.5
0.6
0.7
0.8
0.9
Standing in Line Standing on the
edge of a virtual
cliff
Experiencing
Mobile Delays
Solving a Math
Problem
https://www.ericsson.com/res/docs/2016/mobility-report/emr-feb-2016-the-stress-of-steaming-delays.pdf
Stress

Recommended for you

Mobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech TipsMobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech Tips

Mobile and web performance is critical for user experience. Testing tools like WebPageTest and Video Optimizer can identify optimization opportunities such as slow delivery speeds, large files, and inefficient content. Key best practices include using content delivery networks to cache content globally, compressing text and images, resizing images appropriately, and choosing optimal video bitrates. Adhering to these performance best practices can significantly improve load times and user engagement.

Fastandbeautiful belfast
Fastandbeautiful belfastFastandbeautiful belfast
Fastandbeautiful belfast

This document discusses optimizing images for fast delivery on mobile websites. It outlines four simple image optimizations: quality, format, sizing, and lazy loading. For each optimization, it provides examples and data on current usage. Quality recommends compressing to 85% without significant quality loss. Format suggests using webp and svg where supported. Sizing involves generating responsive images at appropriate breakpoints. Lazy loading delays image loading to above the fold content. Together, these techniques can significantly improve performance without compromising quality.

Its timetostopstalling cambridgemot
Its timetostopstalling cambridgemotIts timetostopstalling cambridgemot
Its timetostopstalling cambridgemot

This document discusses optimizing mobile and web performance through testing, analyzing, and improving the delivery of content such as images, videos, and text. It provides an overview of common tools for testing performance, such as WebPageTest and Video Optimizer. It then covers best practices for optimizing different types of content, including compressing text and images, using responsive images, lazy loading images, optimizing video quality and formats, and configuring video streaming and delivery. The goal is to understand current performance and make targeted improvements to provide fast, high-quality experiences for users on mobile.

Large Downloads Induce Delays in Rendering
3s: 53% of Users Abandon Mobile Sites
500ms: 26% Frustration
8% Engagement
100ms: 1% Revenue Walmart & Amazon (Desktop 2001)
4% Mobile Users Throw Their Phones
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters
http://bit.ly/mobileWebStress
http://www.globaldots.com/how-website-speed-affects-conversion-rates/
https://www.mobilejoomla.com/blog/172-responsive-design-vs-server-side-solutions-infographic.html
Fast is a Human Perception
• 100ms:
• 1s:
• 10s:
https://www.nngroup.com/articles/response-times-3-important-limits/
Perceived as instantaneous
Limit for uninterrupted train of thought: Delay is
noticed, but generally accepted
Limit for keeping focus
Images & Video make up 75% of Web Content
HTTPArchive mobile websites 15/02/18
4 Simple Image Optimizations

Recommended for you

Its timetostopstalling sw_mobile_bristol
Its timetostopstalling sw_mobile_bristolIts timetostopstalling sw_mobile_bristol
Its timetostopstalling sw_mobile_bristol

Optimizing mobile performance is important to provide users with fast, immersive experiences. Testing tools like WebPageTest and Video Optimizer can identify opportunities to improve delivery speed through techniques like content compression, responsive images, and adaptive video bitrates. Reducing page weight by optimizing images, video formats and removing unnecessary redirects and third party interference can help speed load times and reduce frustration.

Its timetostopstalling limerick
Its timetostopstalling limerickIts timetostopstalling limerick
Its timetostopstalling limerick

Doug Sillars presented on optimizing mobile performance. He discussed common tools for testing performance like Video Optimizer and WebPageTest. Best practices for optimization included using HTTP/2, image formats like WebP and SVG, responsive images, lazy loading, and video format/quality adjustments. Factors that can impact video startup like manifest files, available bitrates, and 3rd party interference were also covered. The goal was to learn how to test mobile sites and apps, identify issues, and apply optimizations to deliver fast, high quality experiences to users.

Imagesandvideo voxxeddays
Imagesandvideo voxxeddaysImagesandvideo voxxeddays
Imagesandvideo voxxeddays

This document discusses optimizing images and video for fast delivery on mobile websites. It provides four simple optimizations: adjusting image quality, format, sizing, and lazy loading. SVG, WebP and responsive images are recommended over other formats. Videos should be resized, have audio removed if unneeded, and only download what will be displayed. Background videos especially should be optimized for mobile screens. Network conditions and customer needs like data savings should also be considered. Tools like ImageMagick, Cloudinary and WebPageTest can help with optimizations.

4 Simple Image Optimizations
1. Quality
2. Format
3. Sizing
4. Lazy Loading
4 Simple Image Optimizations
1. Quality
2. Format
3. Sizing
4. Lazy Loading
4 Simple Image Optimizations
Httparchive.org Webpagetest.org
4 Simple Image Optimizations
1. Quality
2. Format
3. Sizing
4. Lazy Loading

Recommended for you

Fast and Beautiful Images and Video
Fast and Beautiful Images and VideoFast and Beautiful Images and Video
Fast and Beautiful Images and Video

This document discusses how to optimize images and video for fast delivery on mobile websites. The key points covered are: 1. Images and video make up 75% of web content and large downloads can cause delays, frustration for users, and loss of engagement and revenue. 2. Image compression techniques like lossy compression and adjusting quality levels can significantly reduce file sizes while maintaining acceptable quality levels. 3. Responsive images ensure the right sized image is delivered for different screen sizes. 4. Vector images are infinitely scalable and can reduce file sizes compared to raster images like JPEGs. 5. Techniques for video like optimizing the manifest file and balancing delivery across available streams can reduce startup

imagesresponsive imagespreview images
Edi ux fastandbeautiful
Edi ux fastandbeautifulEdi ux fastandbeautiful
Edi ux fastandbeautiful

This document discusses optimizing images and video for fast delivery on mobile websites. It begins by explaining that fast loading is a human perception based on time thresholds, with 100ms perceived as instant. The document then outlines 4 simple image optimizations: quality, format, sizing, and lazy loading. It provides examples of each optimization and data on real-world usage. Additional topics discussed include responsive images, animated GIFs, save-data considerations, and base64 encoding. The overall message is that images make up most web content and several techniques can significantly improve performance and user experience.

Mobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOTMobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOT

This document summarizes Doug Sillars' presentation on optimizing mobile and web performance. The presentation covered testing performance with tools like Video Optimizer and WebPageTest, optimizing content delivery through techniques like HTTP/2, image optimization, lazy loading images, and video delivery best practices. Sillars stressed the importance of performance, noting that slow load times can cause high abandonment rates and lost revenue.

Image Quality
magick -quality 85 riga.jpg riga85.jpg
http://res.cloudinary.com/dougsillars/image/upload/q_85/v1520504964/IMG_20180301_114117_tzasan.jpg
Lighthouse:
Recommends 85% quality on all images
https://developers.google.com/speed/docs/insights/OptimizeImages
100%
3.6 MB
http://res.cloudinary.com/dougsillars/image/upload/v1529005982/IMG_20180614_184507_ssuk1i.jpg
85%
1.87 MB
q_85
http://res.cloudinary.com/dougsillars/image/upload/q_85/v1529005982/IMG_20180614_184507_ssuk1i.jpg
Image Quality Use “In The Wild”
500,000 mobile sites
Analyzed 3/15/18

Recommended for you

Cologne webperf
Cologne webperfCologne webperf
Cologne webperf

- Images and video make up 75% of web content and can significantly impact page load speeds if not optimized properly - Large file sizes, inefficient formats, and lack of responsive images are some of the key factors that slow down page loads - Techniques like compression, responsive images, lazy loading, efficient formats like WebP and SVG, and optimizing delivery can help make images and video both beautiful and fast to load

Hamburg web perf meetup
Hamburg web perf meetupHamburg web perf meetup
Hamburg web perf meetup

1. Images and video make up 75% of web content and large file sizes can significantly slow down page loads and reduce user engagement. 2. Optimizing images by choosing efficient formats, compressing while maintaining quality, lazy loading, and responsive loading techniques can dramatically reduce file sizes while preserving visual quality. 3. For video, choosing appropriate streaming formats and bitrates to match network conditions and preloading content helps minimize startup delays that can cause users to abandon the video experience.

Its timetostopstalling barcelonajs
Its timetostopstalling barcelonajsIts timetostopstalling barcelonajs
Its timetostopstalling barcelonajs

This document summarizes Doug Sillars' presentation on optimizing mobile and web performance. It discusses using tools like Video Optimizer and WebPageTest to test performance. It then provides best practices for optimizing content delivery through techniques like image optimization, text compression, responsive images, lazy loading, and video streaming. Specific techniques covered include using Scalable Vector Graphics (SVG), WebP format, appropriate image sizes and quality levels, and optimizing video formats and manifest files.

Image Quality Use “In The Wild”
Median Savings (50th percentile):
• 2.83 seconds faster page load
• 419KB less data
50%
914 KB
q_50
http://res.cloudinary.com/dougsillars/image/upload/q_50/v1529005982/IMG_20180614_184507_ssuk1i.jpg
20%
513 KB
q_20
http://res.cloudinary.com/dougsillars/image/upload/q_20/v1529005982/IMG_20180614_184507_ssuk1i.jpg
Graphing the Results
https://developers.google.com/speed/docs/insights/OptimizeImages

Recommended for you

Its Time To Stop Stalling: Mobile App and Video Performance
Its Time To Stop Stalling: Mobile App and Video PerformanceIts Time To Stop Stalling: Mobile App and Video Performance
Its Time To Stop Stalling: Mobile App and Video Performance

Mobile apps and mobile video need to be delivered quickly to keep your customers happy. This presentation was given in Brasov on 13/02/2018

Its timetostopstalling pentabar
Its timetostopstalling pentabarIts timetostopstalling pentabar
Its timetostopstalling pentabar

This document discusses optimizing content delivery for mobile performance. It begins by introducing common tools for testing mobile performance like Video Optimizer and WebPageTest. It then discusses best practices for optimizing delivery speed such as using content delivery networks (CDNs) and image compression. Other topics covered include optimizing images, responsive delivery, animations, and video streaming. The overall message is that optimizing these areas can significantly improve mobile performance and user experience.

Its timetostopstalling londroid
Its timetostopstalling londroidIts timetostopstalling londroid
Its timetostopstalling londroid

This document discusses optimizing mobile performance. It recommends testing performance with tools like WebPageTest and Video Optimizer. It then provides tips for optimizing content delivery such as compressing text, resizing and compressing images, preloading video correctly, and starting video streams at a low bitrate for faster loading. The document stresses the importance of mobile performance and outlines best practices.

Graphing the Results
https://developers.google.com/speed/docs/insights/OptimizeImages
Automate Quality vs. File Size
• Butteraugli
• SSIM: Structural SIMilarity
https://github.com/technopagan/cjpeg-dssim
cjpeg-dssim jpegoptim riga.jpg
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1529005982/IMG_20180614_184507_ssuk1i.jpg
SSIM
1.46 MB
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1529005982/IMG_20180614_184507_ssuk1i.jpg
Graphing the Results
https://developers.google.com/speed/docs/insights/OptimizeImages

Recommended for you

Ministry of Testing Cork
Ministry of Testing CorkMinistry of Testing Cork
Ministry of Testing Cork

The document discusses optimizing mobile and web performance. It provides tools for testing performance, such as Video Optimizer and WebPageTest. It also gives best practices for optimizing content delivery, such as using CDNs to reduce delivery time, compressing text, resizing and optimizing image quality and format, and choosing appropriate video bitrates. The overall goals are to improve loading speed, reduce bandwidth usage, and create engaging mobile experiences.

Fastandbeautiful full stacklondon
Fastandbeautiful full stacklondonFastandbeautiful full stacklondon
Fastandbeautiful full stacklondon

This document provides an overview of optimizing image delivery for faster page loads. It discusses four main techniques: adjusting image quality, choosing optimal file formats like WebP and SVG, sizing images responsively, and lazy loading images below the fold. For each technique, the document shows how widespread adoption has led to significant median savings in page load times and data usage based on analyzing millions of mobile sites. It also provides examples and tools for implementing each optimization.

Imagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulImagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautiful

This document discusses 4 simple optimizations that can be made to images on websites to improve performance: 1) Reducing image quality, 2) Using optimized file formats like JPEG, WebP and SVG, 3) Resizing images to actual display size, and 4) Implementing lazy loading so images outside the viewport are not downloaded. It provides examples and data on how each technique can significantly reduce data usage and improve load times.

Results:
• Test Load on Motorola G4:
4 Simple Image Optimizations
1. Quality
2. Format
3. Sizing
4. Lazy Loading
Image Formats – Average Size
HTTPArchive mobile websites 15/02/18
Image Formats – Average Size
HTTPArchive mobile websites 15/02/18

Recommended for you

Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup

Doug Sillars presented four simple optimizations for delivering fast and beautiful images and video on mobile: 1) reduce image quality, 2) use optimized formats like WebP and SVG, 3) size images appropriately, and 4) lazy load images below the fold. He demonstrated how these techniques can significantly reduce page load times and data usage. Sillars also discussed best practices for video delivery and alternatives to animated GIFs that can reduce file sizes substantially. Throughout, he provided real-world examples and tools to help optimize multimedia content for mobile performance.

Its timetostopstalling swp_munich
Its timetostopstalling swp_munichIts timetostopstalling swp_munich
Its timetostopstalling swp_munich

The document discusses optimizing mobile and web performance. It provides tips for testing performance using tools like Video Optimizer and WebPageTest. It also gives best practices for content delivery such as compressing text, optimizing image size and quality, and choosing appropriate video bitrates. The summary highlights reducing redirects, using CDNs, text compression, responsive images, and selecting the right video bitrate to improve performance.

Its timetostopstalling mot_paris
Its timetostopstalling mot_parisIts timetostopstalling mot_paris
Its timetostopstalling mot_paris

This document summarizes Doug Sillars' presentation on optimizing mobile and web performance. It discusses using tools like Video Optimizer and WebPageTest to test performance. It then provides best practices for optimizing content delivery through techniques like image optimization, text compression, lazy loading images, optimizing animated GIFs and video. It discusses how to prevent startup delays and stalls for video streaming.

File Format: WebP
https://caniuse.com/#feat=webp
Ux connect london_fastandbeautiful
SSIM + WebP
986 KB
http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1529005982/IMG_20180614_184507_
File Format: Web
<picture>
<source width = "100%" type="image/webp" srcset=”riga.webp">
<img width = "100%" src=”riga_cjpeg_dssim.jpg"
alt=”Riga, Latvia">
</picture>

Recommended for you

Webcamp fastandbeautiful
Webcamp fastandbeautifulWebcamp fastandbeautiful
Webcamp fastandbeautiful

This document provides tips for optimizing images and video delivery on mobile websites to improve performance. It discusses reducing image file sizes through techniques like lowering quality levels, using optimized formats like WebP and SVG, resizing images responsively, and lazy loading images. For video, it recommends preloading, stripping audio from silent videos, resizing videos for mobile, and auditing third party videos. Testing and automation tools are also referenced. The overall message is that images and video can be both beautiful and fast with the right optimizations.

Fastandbeautiful dublin php
Fastandbeautiful dublin phpFastandbeautiful dublin php
Fastandbeautiful dublin php

This document provides an overview of optimizing images for faster page loads and better user experience. It discusses four main image optimizations: quality, format, sizing, and lazy loading. For each optimization, it explains the technique, provides examples, and shows data on adoption rates and typical page load improvements. Key points covered include compressing JPEG quality, using responsive images and formats like WebP, resizing images to actual displayed sizes, and lazy loading images below the fold. The document emphasizes that even small optimizations across an entire site can yield significant speed and data savings.

Its timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxellesIts timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxelles

The document discusses optimizing mobile and web performance. It provides tools and best practices for testing performance, optimizing content delivery, and reducing latency. Specifically, it recommends using CDNs to improve delivery speed, compressing text, optimizing image size and quality, and selecting appropriate video bitrates. Testing tools mentioned include WebPageTest, Video Optimizer, and Cloudinary for images. The goal is to deliver content as fast as possible to improve the user experience.

Image Format Use “In The Wild”
Median Improvement: 4.1s, 604 KB
4 Simple Image Optimizations
1. Quality
2. Format
3. Sizing
4. Lazy Loading
Image Sizing
-
Image Sizing

Recommended for you

Its timetostopstalling gdg_zurich
Its timetostopstalling gdg_zurichIts timetostopstalling gdg_zurich
Its timetostopstalling gdg_zurich

This document discusses optimizing content delivery for mobile performance. It begins by introducing common tools for testing mobile performance like Video Optimizer and WebPageTest. It then discusses best practices like using a content delivery network to improve delivery speed, compressing content, optimizing images, and improving video streaming. The key points are that delivery speed, proper content sizing, and balancing network conditions are important for optimizing content and avoiding delays that hurt the user experience.

Fastandbeautiful porto
Fastandbeautiful portoFastandbeautiful porto
Fastandbeautiful porto

Delivering Fast and Beautiful Images outlines 4 simple optimizations for image performance: 1) reducing image quality, 2) using optimized formats like WebP and JPEG, 3) sizing images appropriately, and 4) lazy loading images. The document provides data on current image usage and the significant performance benefits realized by implementing these optimizations, such as reducing page load times by up to 15 seconds. Proper image optimization is key to delivering both fast and visually appealing content.

Its Time To Stop Stalling Bucharest
Its Time To Stop Stalling BucharestIts Time To Stop Stalling Bucharest
Its Time To Stop Stalling Bucharest

This document summarizes Doug Sillars' presentation on mobile and web performance optimization. It discusses how delays impact user behavior, with 53% abandoning mobile sites after 3 seconds. Testing tools like Video Optimizer and WebPageTest are recommended. Best practices include optimizing delivery speed with CDNs, reducing redirects, compressing text, optimizing images for size and format, and choosing appropriate video bitrates. The summary highlights key areas of content delivery, testing, and tools to measure and improve performance.

Image Sizing
-
Image Sizing
624
832
-
Image Sizing
624
832
12,979,000 pixels
519,000 pixels
_________________
-
12,460,000 pixels
Image Sizing
624
832
12,979,000 pixels
519,000 pixels
_________________
-
12,460,000 pixels

Recommended for you

Fastandbeautiful novi sad
Fastandbeautiful novi sadFastandbeautiful novi sad
Fastandbeautiful novi sad

Doug Sillars discusses optimizing image performance on websites. He outlines 4 simple optimizations: 1) reducing image quality, 2) using optimized formats like WebP and SVG, 3) sizing images appropriately, and 4) lazy loading images below the fold. Properly implementing these techniques can significantly improve page load times and reduce data usage. Sillars also provides tips on monitoring image usage in the wild and considerations for different network conditions and user expectations.

Fastandbeautiful full stackporto
Fastandbeautiful full stackportoFastandbeautiful full stackporto
Fastandbeautiful full stackporto

Delivering Fast and Beautiful Images outlines 4 simple optimizations for image performance: 1) Reduce image quality for smaller file sizes without noticeable quality loss. 2) Use optimized formats like WebP and responsive images. 3) Resize images to actual display size. 4) Lazy load images to speed page loads. The document provides examples and data showing these techniques can significantly reduce data usage and page load times.

Mobile App and Web Performance Testing
Mobile App and Web Performance TestingMobile App and Web Performance Testing
Mobile App and Web Performance Testing

The document discusses optimizing mobile and web performance. It provides tools for testing performance, such as Video Optimizer and WebPageTest. It also gives best practices for optimizing content delivery, such as using CDNs to reduce delivery time, compressing text, resizing and optimizing image quality and format, and choosing appropriate video bitrates. The overall goals are to improve loading speed, reduce bandwidth usage, and create engaging mobile experiences.

Image Sizing
https://twitter.com/paulcalvano/status/928751141843808256
Image Sizing
-
Responsive Images:
Generate a set of images
25 KB difference in size
Responsive Images
624
832
625,000 pixels
-
106,000 pixels
519,000 pixels
_________________
Responsive Breakpoint Generation
https://github.com/cloudinary/responsive_breakpoints_generator
http://www.responsivebreakpoints.com/

Recommended for you

Its Time To Stop Stalling BerlinDroid
Its Time To Stop Stalling BerlinDroidIts Time To Stop Stalling BerlinDroid
Its Time To Stop Stalling BerlinDroid

This document discusses optimizing mobile and web performance. It recommends testing websites and apps using tools like WebPageTest and Video Optimizer to analyze loading speeds and identify optimization opportunities. Common issues include large file sizes, unnecessary redirects, low quality images, and high bitrate videos. The document provides best practices for faster content delivery such as text compression, responsive images, and adding multiple streaming options. The goal is to balance fast initial loads with smooth streaming by addressing these performance bottlenecks.

Its timetostopstalling gdgdusseldorf
Its timetostopstalling gdgdusseldorfIts timetostopstalling gdgdusseldorf
Its timetostopstalling gdgdusseldorf

The document discusses optimizing mobile performance. It recommends testing performance using tools like WebPageTest and Video Optimizer. It then provides tips for optimizing content delivery through techniques like text compression, responsive images at appropriate sizes and quality levels, and choosing optimal video bitrates. The overall goal is to balance delivery speed, network conditions and quality of experience for users.

Fastandbeautiful gdg sacremento
Fastandbeautiful gdg sacrementoFastandbeautiful gdg sacremento
Fastandbeautiful gdg sacremento

The document discusses optimizing images for fast loading on mobile websites. It provides 4 simple optimizations: 1) reducing image quality, 2) using optimized formats like WebP and SVG, 3) proper sizing of images for different screen sizes, and 4) lazy loading images that are not immediately visible. The document shows how these techniques can significantly reduce image file sizes and page load times based on analyzing millions of mobile sites. It also discusses alternatives to animated GIFs like using video formats and preview images to improve performance.

Responsive Images
Responsive Images Use “In The Wild”
500,000 mobile sites
Analyzed 3/15/18
Median Improvement: 2.7s, 416 KB
4 Simple Image Optimizations
1. Quality
2. Format
3. Sizing
4. Lazy Loading
Lazy Load
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

Recommended for you

Fastandbeautiful gd glittlerock
Fastandbeautiful gd glittlerockFastandbeautiful gd glittlerock
Fastandbeautiful gd glittlerock

This document discusses optimizing images for fast loading on mobile devices. It recommends four simple image optimizations: 1) reducing image quality to 85%, 2) using efficient formats like WebP and SVG, 3) sizing images appropriately for the viewport, and 4) lazy loading images below the fold. Data from the HTTP Archive is presented showing the prevalence and impact of these optimizations. Specific techniques like responsive images and image processing tools are also outlined.

Fastandbeautiful webinale
Fastandbeautiful webinaleFastandbeautiful webinale
Fastandbeautiful webinale

This document provides tips for optimizing images for fast loading on mobile websites. It discusses 4 key optimizations: image quality, format, sizing, and lazy loading. For quality, it recommends reducing to 85% quality, which can significantly reduce file sizes with little quality loss. For format, it promotes webp and svg over jpeg and png. For sizing, it stresses responsive images at different breakpoints to reduce file sizes. And for lazy loading, it shows how delaying non-critical image loads can improve performance. Measurements are given for how widely these techniques have been adopted and the potential savings in load times and data usage. Tools are also listed for implementing the various optimizations.

Ai powered images-pythonljubjana
Ai powered images-pythonljubjanaAi powered images-pythonljubjana
Ai powered images-pythonljubjana

Doug Sillars discusses using AI and machine learning to simplify image preparation for the web. He describes how object detection can be used for cropping, blurring objects, object removal, and generating alt text. Sillars also provides examples of using these techniques like detecting and adding sunglasses to images. He concludes that image processing with AI and ML can automate tasks like cropping, blurring, object removal, and alt text generation for image optimization.

Lazy Load
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
Lazy Loading Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18
Median Improvement: 3.5s, 529 KB
Preview Images
Optimizing Content Delivery
Preview Images
https://github.com/technopagan/sqip

Recommended for you

Fastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsaunaFastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsauna

Doug Sillars presented techniques for optimizing image performance on mobile websites. He discussed 4 key optimizations: 1) reducing image quality to 85%, 2) using efficient formats like WebP and SVG, 3) sizing images responsively, and 4) lazy loading images below the fold. Testing of millions of sites showed these techniques can reduce page load times by up to 15 seconds and data usage by up to 2.4 MB. Sillars recommended tools like ImageMagick, responsive breakpoints generator, and Cloudinary to help automate image optimizations.

Video js zagreb
Video js zagrebVideo js zagreb
Video js zagreb

This document provides best practices for optimizing video delivery and streaming on the web. It discusses how video files are large and can negatively impact page load times and user data plans. Some key recommendations include resizing videos appropriately for different screens, avoiding downloading hidden or unnecessary videos, using video streaming with a low starting bitrate for faster startup times, stripping audio from silent videos, and auditing third party video hosts for performance issues. The document emphasizes optimizing video delivery to respect mobile users' limited data plans.

Vkmdp cologne
Vkmdp cologneVkmdp cologne
Vkmdp cologne

The document discusses optimizing video delivery for performance and reducing data usage. It provides examples of HTML code to embed video on a webpage and control playback behavior. It also summarizes techniques for resizing and encoding videos to different formats and bitrates to reduce file sizes while maintaining quality, such as using services like Cloudinary. Optimizing factors like video size, bitrate, and delivery method can help videos start faster and reduce stalling to improve the user experience.

Lazy Loading: Experiments
Lazy Loading: Experiments
Lazy Loading: Experiments
Animated GIFs
Original MP4
1.4 MB

Recommended for you

Ai powered images-gdgtirana
Ai powered images-gdgtiranaAi powered images-gdgtirana
Ai powered images-gdgtirana

Doug Sillars discusses using AI and machine learning to simplify image preparation for the web. He covers how object detection can be used for cropping, blurring, object removal, and generating alt text. Sillars also demonstrates training a model to add sunglasses to faces in images without manually editing thousands of photos. In summary, AI and ML techniques can automate many image editing tasks previously done manually to optimize images for websites and apps.

A rt gallery pantalks
A rt gallery pantalksA rt gallery pantalks
A rt gallery pantalks

The document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It demonstrates how to create a VR art gallery using A-Frame, optimize images and 3D models for AR/VR, and add AR functionality using AR.js markers. It also covers upcoming AR capabilities using WebXR, such as hit testing. Optimizations like resizing images, format and quality adjustments, cropping, and Draco compression are recommended to reduce file sizes and loading times. The talk concludes with resources for setting up a sample AR art gallery project and suggestions for art assets to include.

Ai powered images-sarajevo
Ai powered images-sarajevoAi powered images-sarajevo
Ai powered images-sarajevo

This document discusses using AI and machine learning to simplify image preparation for the web. It describes how object detection can be used for cropping, blurring, object removal, and generating alt text. It provides examples of using these techniques to automatically add sunglasses to faces in images. The document concludes by mentioning that image processing with AI and ML can simplify tasks like cropping, blurring, object removal, and alt text generation for images on the web.

Animated GIFs
Animated GIFs
Animated GIF
3.8 MB
270% larger
Animated GIFs
Animated GIFs
MP4: 256 colors
247KB
93% smaller

Recommended for you

A rt gallery hub387
A rt gallery hub387A rt gallery hub387
A rt gallery hub387

The document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It begins with an overview of what can currently be done with AR and VR using the A-Frame framework, including examples of building VR art galleries and scenes. It then covers adding AR capabilities using AR.js by placing 3D objects with markers. The document emphasizes optimizations needed for AR and VR like reducing file sizes and optimizing image quality and format. It also discusses the potential for building AR experiences using the emerging WebXR standard. Throughout it provides links to code samples and resources.

Ai powered images-zurichpydata
Ai powered images-zurichpydataAi powered images-zurichpydata
Ai powered images-zurichpydata

Doug Sillars gave a presentation on using AI to optimize images for the web. He discussed how images dominate web content and explained techniques like cropping, blurring objects, and generating alt text using machine learning models. Sillars also demonstrated how to train custom models for tasks like detecting sunglasses and adding filters to photos. The presentation concluded by emphasizing how AI and ML can simplify and automate image preparation and processing for digital content.

Fastandbeautiful vienna
Fastandbeautiful viennaFastandbeautiful vienna
Fastandbeautiful vienna

This document provides tips for optimizing images on websites to deliver fast loading speeds while maintaining image quality. It discusses optimizing image quality, format, sizing through responsive images, and lazy loading images below the fold. Key recommendations include using JPEG format at 85% quality, responsive images through picture tags, and lazy loading images to improve page load times and reduce data usage. Tools mentioned for optimizing images include ImageMagick, SSIM, LazySizes, and Cloudinary.

Animated GIFs
Video Tags:
<video loop autoplay muted playsinline controls = "false” src="goats.mp4”/>
Video is not pre-loaded, will be last to download
Img tags are fast!
<picture>
<source type="video/mp4" srcset=”goats.mp4">
<source type="image/webp" srcset=”goats.webp">
<img src=”goats.gif">
</picture>
https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/
Animated GIFs
Video
Video Quality Metrics
1.Does the Video Start?
2.Does the Video Stall?
3.Does it Look Good?

Recommended for you

Ai powered images-opieaivienna
Ai powered images-opieaiviennaAi powered images-opieaivienna
Ai powered images-opieaivienna

This document discusses using AI and machine learning to simplify image preparation for the web. It describes how object detection can be used for cropping, blurring objects, object removal, and generating alt text. It also provides examples of training custom models for tasks like automatically adding sunglasses to faces in images. The conclusion emphasizes that image processing with AI and ML can automate tasks like cropping, blurring, object removal, and alt text generation for image preparation.

A rt gallery devfestlondon
A rt gallery devfestlondonA rt gallery devfestlondon
A rt gallery devfestlondon

This document summarizes a presentation about building augmented reality (AR) and virtual reality (VR) experiences in the browser. It discusses using the A-Frame framework to create VR galleries and scenes that can be viewed today. It also covers adding AR capabilities using AR.js by placing 3D objects using markers. The presentation provides examples of optimizing assets for AR/VR experiences, such as resizing images, compressing formats, and using services like Cloudinary. Upcoming capabilities discussed include AR hit testing using the WebXR Device API in Chrome Canary. The document aims to demonstrate that AR does not need to be processor intensive or rely on large amounts of data.

Fastandbeautiful devfest london
Fastandbeautiful devfest londonFastandbeautiful devfest london
Fastandbeautiful devfest london

The document discusses optimizing images for fast loading on mobile websites. It outlines 4 simple image optimizations: 1) reducing image quality, 2) using optimized file formats like WebP and JPEG, 3) sizing images appropriately for the viewport, and 4) lazy loading images below the fold. The document provides examples of how each technique can significantly reduce image file sizes and page load times. Testing of real-world websites shows widespread room for improvement in mobile image optimization.

Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018:
Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018: Video Startup
16.9B total Video plays
400M Fail to Start
2B Abandoned before Start
..be Careful with Video Preload
Preload = “auto”
…be Careful with Preload

Recommended for you

A rt gallery cardiff
A rt gallery cardiffA rt gallery cardiff
A rt gallery cardiff

This document summarizes Doug Sillars' presentation on building augmented reality experiences in the browser. Sillars discusses using A-Frame to create VR galleries that can be viewed today in the browser. He then explains how to add AR functionality using AR.js by placing 3D objects with markers. Sillars also covers optimizing assets for AR/VR experiences by reducing file sizes and formats. Finally, he demonstrates early AR capabilities with WebXR by hitting 3D objects in a gallery on mobile.

Ai powered images-mobileera
Ai powered images-mobileeraAi powered images-mobileera
Ai powered images-mobileera

Doug Sillars discusses using AI and machine learning to simplify image preparation for the web. He describes how object detection can be used for automatic cropping, blurring, object removal, and generating alt text. Sillars also demonstrates training a model to detect sunglasses and apply transparent sunglasses overlays to images. The techniques discussed provide shortcuts for common image editing tasks over manually processing large numbers of images.

Fastandbeautiful oredev
Fastandbeautiful oredevFastandbeautiful oredev
Fastandbeautiful oredev

The document discusses optimizing images for fast loading on mobile websites. It recommends four simple image optimizations: 1) reducing image quality to 85%, 2) using optimized formats like JPEG, WebP and SVG, 3) sizing images appropriately for the viewport, and 4) lazy loading images below the fold. Implementing these techniques can significantly reduce data usage and speed up page load times. The document also provides examples and tools for implementing each optimization technique.

Background Video
Video Background
Video (as Downloaded): 5.3 MB
Video 5 MB
Audio 250 KB 5% of file
Best Practice:
To save bandwidth, remove the audio stream from videos that
are played silently.
Video Background: Mobile
Best Practice:
If Viewport will not support Video…
Don’t Download it
Video Background

Recommended for you

A rt gallery oredev
A rt gallery oredevA rt gallery oredev
A rt gallery oredev

The document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It introduces AR.js and A-Frame for creating AR and VR using web technologies. Examples are provided of building a VR art gallery in A-Frame and adding AR functionality using AR.js and marker-based tracking. Optimization techniques for images, 3D models, and video are covered to improve performance for AR and VR. Upcoming capabilities for AR in WebXR are previewed. The document aims to demonstrate what can be done with AR and VR today in the browser and highlights areas that will continue advancing.

How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf

In the modern digital era, social media platforms have become integral to our daily lives. These platforms, including Facebook, Instagram, WhatsApp, and Snapchat, offer countless ways to connect, share, and communicate.

social media hackerfacebook hackerhire a instagram hacker
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL

Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.

blockchainweb3blockchain technology
Video Background
33.6 MB
27s
2560 x 1226
10 MBPS
Video Background
Best Practice:
Resize Video to reasonable size.
33.6 MB
27s
2560 x 1226
10 MBPS
Video Background
Best Practice:
Resize Video to reasonable size.
PROTIP: Renaming the file is not enough…
Video Resizing
• 1920x1080: 8.1 MB
• 1280x720: 4.3 MB
• 1080x608: 3.3 MB
• 720x405: 1.76 MB
http://res.cloudinary.com/dougsillars/video/upload/vc_auto,w_720/v1533591785/depend_p2ryou.mp4

Recommended for you

RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx

Your comprehensive guide to RPA in healthcare for 2024. Explore the benefits, use cases, and emerging trends of robotic process automation. Understand the challenges and prepare for the future of healthcare automation

rpa in healthcarerpa in healthcare usarpa in healthcare industry
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing

Invited Remote Lecture to SC21 The International Conference for High Performance Computing, Networking, Storage, and Analysis St. Louis, Missouri November 18, 2021

distributed supercomputerdistributed machine learning
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges

accommodate the strengths, weaknesses, threats and opportunities of autonomous vehicles

automotive self-driving car technology
Video Third Parties
Video Third Parties
Video Third Parties
Video Third Parties

Recommended for you

論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...

Jindong Gu, Zhen Han, Shuo Chen, Ahmad Beirami, Bailan He, Gengyuan Zhang, Ruotong Liao, Yao Qin, Volker Tresp, Philip Torr "A Systematic Survey of Prompt Engineering on Vision-Language Foundation Models" arXiv2023 https://arxiv.org/abs/2307.12980

Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and slides: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...

Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)

user modelinguser profilinguser model
Conclusion
Optimize Image:
Quality
Format
Sizing
Lazy Load if Possible
Only download Video when displayed
Strip audio if silent
Resize Videos for Mobile
Audit 3rd Party Videos
Streaming: Start with lower bitrates to speed video playback
Streaming: Conservative bitrates *may* reduce stalls, but will lower quality
Images
Video
Summary
Testing:
WebPageTest https://www.webpagetest.org
HttpArchive https://httparchive.org
Images:
ImageMagick https://www.imagemagick.org
SSIM https://github.com/technopagan/cjpeg-dssim
LazySizes https://github.com/aFarkas/lazysizes
Responsive Breakpoints http://www.responsivebreakpoints.com/
Cloudinary https://www.cloudinary.com
Tooling
Conclusion
Images and Video
Can Be Beautiful AND Fast

More Related Content

What's hot

Cork ux Meetup
Cork ux MeetupCork ux Meetup
Cork ux Meetup
Doug Sillars
 
Beautiful and Fast Images
Beautiful and Fast Images Beautiful and Fast Images
Beautiful and Fast Images
Doug Sillars
 
Waterford fast images
Waterford fast imagesWaterford fast images
Waterford fast images
Doug Sillars
 
Mobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech TipsMobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech Tips
Doug Sillars
 
Fastandbeautiful belfast
Fastandbeautiful belfastFastandbeautiful belfast
Fastandbeautiful belfast
Doug Sillars
 
Its timetostopstalling cambridgemot
Its timetostopstalling cambridgemotIts timetostopstalling cambridgemot
Its timetostopstalling cambridgemot
Doug Sillars
 
Its timetostopstalling sw_mobile_bristol
Its timetostopstalling sw_mobile_bristolIts timetostopstalling sw_mobile_bristol
Its timetostopstalling sw_mobile_bristol
Doug Sillars
 
Its timetostopstalling limerick
Its timetostopstalling limerickIts timetostopstalling limerick
Its timetostopstalling limerick
Doug Sillars
 
Imagesandvideo voxxeddays
Imagesandvideo voxxeddaysImagesandvideo voxxeddays
Imagesandvideo voxxeddays
Doug Sillars
 
Fast and Beautiful Images and Video
Fast and Beautiful Images and VideoFast and Beautiful Images and Video
Fast and Beautiful Images and Video
Doug Sillars
 
Edi ux fastandbeautiful
Edi ux fastandbeautifulEdi ux fastandbeautiful
Edi ux fastandbeautiful
Doug Sillars
 
Mobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOTMobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOT
Doug Sillars
 
Cologne webperf
Cologne webperfCologne webperf
Cologne webperf
Doug Sillars
 
Hamburg web perf meetup
Hamburg web perf meetupHamburg web perf meetup
Hamburg web perf meetup
Doug Sillars
 
Its timetostopstalling barcelonajs
Its timetostopstalling barcelonajsIts timetostopstalling barcelonajs
Its timetostopstalling barcelonajs
Doug Sillars
 
Its Time To Stop Stalling: Mobile App and Video Performance
Its Time To Stop Stalling: Mobile App and Video PerformanceIts Time To Stop Stalling: Mobile App and Video Performance
Its Time To Stop Stalling: Mobile App and Video Performance
Doug Sillars
 
Its timetostopstalling pentabar
Its timetostopstalling pentabarIts timetostopstalling pentabar
Its timetostopstalling pentabar
Doug Sillars
 
Its timetostopstalling londroid
Its timetostopstalling londroidIts timetostopstalling londroid
Its timetostopstalling londroid
Doug Sillars
 
Ministry of Testing Cork
Ministry of Testing CorkMinistry of Testing Cork
Ministry of Testing Cork
Doug Sillars
 
Fastandbeautiful full stacklondon
Fastandbeautiful full stacklondonFastandbeautiful full stacklondon
Fastandbeautiful full stacklondon
Doug Sillars
 

What's hot (20)

Cork ux Meetup
Cork ux MeetupCork ux Meetup
Cork ux Meetup
 
Beautiful and Fast Images
Beautiful and Fast Images Beautiful and Fast Images
Beautiful and Fast Images
 
Waterford fast images
Waterford fast imagesWaterford fast images
Waterford fast images
 
Mobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech TipsMobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech Tips
 
Fastandbeautiful belfast
Fastandbeautiful belfastFastandbeautiful belfast
Fastandbeautiful belfast
 
Its timetostopstalling cambridgemot
Its timetostopstalling cambridgemotIts timetostopstalling cambridgemot
Its timetostopstalling cambridgemot
 
Its timetostopstalling sw_mobile_bristol
Its timetostopstalling sw_mobile_bristolIts timetostopstalling sw_mobile_bristol
Its timetostopstalling sw_mobile_bristol
 
Its timetostopstalling limerick
Its timetostopstalling limerickIts timetostopstalling limerick
Its timetostopstalling limerick
 
Imagesandvideo voxxeddays
Imagesandvideo voxxeddaysImagesandvideo voxxeddays
Imagesandvideo voxxeddays
 
Fast and Beautiful Images and Video
Fast and Beautiful Images and VideoFast and Beautiful Images and Video
Fast and Beautiful Images and Video
 
Edi ux fastandbeautiful
Edi ux fastandbeautifulEdi ux fastandbeautiful
Edi ux fastandbeautiful
 
Mobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOTMobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOT
 
Cologne webperf
Cologne webperfCologne webperf
Cologne webperf
 
Hamburg web perf meetup
Hamburg web perf meetupHamburg web perf meetup
Hamburg web perf meetup
 
Its timetostopstalling barcelonajs
Its timetostopstalling barcelonajsIts timetostopstalling barcelonajs
Its timetostopstalling barcelonajs
 
Its Time To Stop Stalling: Mobile App and Video Performance
Its Time To Stop Stalling: Mobile App and Video PerformanceIts Time To Stop Stalling: Mobile App and Video Performance
Its Time To Stop Stalling: Mobile App and Video Performance
 
Its timetostopstalling pentabar
Its timetostopstalling pentabarIts timetostopstalling pentabar
Its timetostopstalling pentabar
 
Its timetostopstalling londroid
Its timetostopstalling londroidIts timetostopstalling londroid
Its timetostopstalling londroid
 
Ministry of Testing Cork
Ministry of Testing CorkMinistry of Testing Cork
Ministry of Testing Cork
 
Fastandbeautiful full stacklondon
Fastandbeautiful full stacklondonFastandbeautiful full stacklondon
Fastandbeautiful full stacklondon
 

Similar to Ux connect london_fastandbeautiful

Imagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulImagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautiful
Doug Sillars
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
Doug Sillars
 
Its timetostopstalling swp_munich
Its timetostopstalling swp_munichIts timetostopstalling swp_munich
Its timetostopstalling swp_munich
Doug Sillars
 
Its timetostopstalling mot_paris
Its timetostopstalling mot_parisIts timetostopstalling mot_paris
Its timetostopstalling mot_paris
Doug Sillars
 
Webcamp fastandbeautiful
Webcamp fastandbeautifulWebcamp fastandbeautiful
Webcamp fastandbeautiful
Doug Sillars
 
Fastandbeautiful dublin php
Fastandbeautiful dublin phpFastandbeautiful dublin php
Fastandbeautiful dublin php
Doug Sillars
 
Its timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxellesIts timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxelles
Doug Sillars
 
Its timetostopstalling gdg_zurich
Its timetostopstalling gdg_zurichIts timetostopstalling gdg_zurich
Its timetostopstalling gdg_zurich
Doug Sillars
 
Fastandbeautiful porto
Fastandbeautiful portoFastandbeautiful porto
Fastandbeautiful porto
Doug Sillars
 
Its Time To Stop Stalling Bucharest
Its Time To Stop Stalling BucharestIts Time To Stop Stalling Bucharest
Its Time To Stop Stalling Bucharest
Doug Sillars
 
Fastandbeautiful novi sad
Fastandbeautiful novi sadFastandbeautiful novi sad
Fastandbeautiful novi sad
Doug Sillars
 
Fastandbeautiful full stackporto
Fastandbeautiful full stackportoFastandbeautiful full stackporto
Fastandbeautiful full stackporto
Doug Sillars
 
Mobile App and Web Performance Testing
Mobile App and Web Performance TestingMobile App and Web Performance Testing
Mobile App and Web Performance Testing
Doug Sillars
 
Its Time To Stop Stalling BerlinDroid
Its Time To Stop Stalling BerlinDroidIts Time To Stop Stalling BerlinDroid
Its Time To Stop Stalling BerlinDroid
Doug Sillars
 
Its timetostopstalling gdgdusseldorf
Its timetostopstalling gdgdusseldorfIts timetostopstalling gdgdusseldorf
Its timetostopstalling gdgdusseldorf
Doug Sillars
 

Similar to Ux connect london_fastandbeautiful (15)

Imagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulImagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautiful
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
 
Its timetostopstalling swp_munich
Its timetostopstalling swp_munichIts timetostopstalling swp_munich
Its timetostopstalling swp_munich
 
Its timetostopstalling mot_paris
Its timetostopstalling mot_parisIts timetostopstalling mot_paris
Its timetostopstalling mot_paris
 
Webcamp fastandbeautiful
Webcamp fastandbeautifulWebcamp fastandbeautiful
Webcamp fastandbeautiful
 
Fastandbeautiful dublin php
Fastandbeautiful dublin phpFastandbeautiful dublin php
Fastandbeautiful dublin php
 
Its timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxellesIts timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxelles
 
Its timetostopstalling gdg_zurich
Its timetostopstalling gdg_zurichIts timetostopstalling gdg_zurich
Its timetostopstalling gdg_zurich
 
Fastandbeautiful porto
Fastandbeautiful portoFastandbeautiful porto
Fastandbeautiful porto
 
Its Time To Stop Stalling Bucharest
Its Time To Stop Stalling BucharestIts Time To Stop Stalling Bucharest
Its Time To Stop Stalling Bucharest
 
Fastandbeautiful novi sad
Fastandbeautiful novi sadFastandbeautiful novi sad
Fastandbeautiful novi sad
 
Fastandbeautiful full stackporto
Fastandbeautiful full stackportoFastandbeautiful full stackporto
Fastandbeautiful full stackporto
 
Mobile App and Web Performance Testing
Mobile App and Web Performance TestingMobile App and Web Performance Testing
Mobile App and Web Performance Testing
 
Its Time To Stop Stalling BerlinDroid
Its Time To Stop Stalling BerlinDroidIts Time To Stop Stalling BerlinDroid
Its Time To Stop Stalling BerlinDroid
 
Its timetostopstalling gdgdusseldorf
Its timetostopstalling gdgdusseldorfIts timetostopstalling gdgdusseldorf
Its timetostopstalling gdgdusseldorf
 

More from Doug Sillars

Fastandbeautiful gdg sacremento
Fastandbeautiful gdg sacrementoFastandbeautiful gdg sacremento
Fastandbeautiful gdg sacremento
Doug Sillars
 
Fastandbeautiful gd glittlerock
Fastandbeautiful gd glittlerockFastandbeautiful gd glittlerock
Fastandbeautiful gd glittlerock
Doug Sillars
 
Fastandbeautiful webinale
Fastandbeautiful webinaleFastandbeautiful webinale
Fastandbeautiful webinale
Doug Sillars
 
Ai powered images-pythonljubjana
Ai powered images-pythonljubjanaAi powered images-pythonljubjana
Ai powered images-pythonljubjana
Doug Sillars
 
Fastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsaunaFastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsauna
Doug Sillars
 
Video js zagreb
Video js zagrebVideo js zagreb
Video js zagreb
Doug Sillars
 
Vkmdp cologne
Vkmdp cologneVkmdp cologne
Vkmdp cologne
Doug Sillars
 
Ai powered images-gdgtirana
Ai powered images-gdgtiranaAi powered images-gdgtirana
Ai powered images-gdgtirana
Doug Sillars
 
A rt gallery pantalks
A rt gallery pantalksA rt gallery pantalks
A rt gallery pantalks
Doug Sillars
 
Ai powered images-sarajevo
Ai powered images-sarajevoAi powered images-sarajevo
Ai powered images-sarajevo
Doug Sillars
 
A rt gallery hub387
A rt gallery hub387A rt gallery hub387
A rt gallery hub387
Doug Sillars
 
Ai powered images-zurichpydata
Ai powered images-zurichpydataAi powered images-zurichpydata
Ai powered images-zurichpydata
Doug Sillars
 
Fastandbeautiful vienna
Fastandbeautiful viennaFastandbeautiful vienna
Fastandbeautiful vienna
Doug Sillars
 
Ai powered images-opieaivienna
Ai powered images-opieaiviennaAi powered images-opieaivienna
Ai powered images-opieaivienna
Doug Sillars
 
A rt gallery devfestlondon
A rt gallery devfestlondonA rt gallery devfestlondon
A rt gallery devfestlondon
Doug Sillars
 
Fastandbeautiful devfest london
Fastandbeautiful devfest londonFastandbeautiful devfest london
Fastandbeautiful devfest london
Doug Sillars
 
A rt gallery cardiff
A rt gallery cardiffA rt gallery cardiff
A rt gallery cardiff
Doug Sillars
 
Ai powered images-mobileera
Ai powered images-mobileeraAi powered images-mobileera
Ai powered images-mobileera
Doug Sillars
 
Fastandbeautiful oredev
Fastandbeautiful oredevFastandbeautiful oredev
Fastandbeautiful oredev
Doug Sillars
 
A rt gallery oredev
A rt gallery oredevA rt gallery oredev
A rt gallery oredev
Doug Sillars
 

More from Doug Sillars (20)

Fastandbeautiful gdg sacremento
Fastandbeautiful gdg sacrementoFastandbeautiful gdg sacremento
Fastandbeautiful gdg sacremento
 
Fastandbeautiful gd glittlerock
Fastandbeautiful gd glittlerockFastandbeautiful gd glittlerock
Fastandbeautiful gd glittlerock
 
Fastandbeautiful webinale
Fastandbeautiful webinaleFastandbeautiful webinale
Fastandbeautiful webinale
 
Ai powered images-pythonljubjana
Ai powered images-pythonljubjanaAi powered images-pythonljubjana
Ai powered images-pythonljubjana
 
Fastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsaunaFastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsauna
 
Video js zagreb
Video js zagrebVideo js zagreb
Video js zagreb
 
Vkmdp cologne
Vkmdp cologneVkmdp cologne
Vkmdp cologne
 
Ai powered images-gdgtirana
Ai powered images-gdgtiranaAi powered images-gdgtirana
Ai powered images-gdgtirana
 
A rt gallery pantalks
A rt gallery pantalksA rt gallery pantalks
A rt gallery pantalks
 
Ai powered images-sarajevo
Ai powered images-sarajevoAi powered images-sarajevo
Ai powered images-sarajevo
 
A rt gallery hub387
A rt gallery hub387A rt gallery hub387
A rt gallery hub387
 
Ai powered images-zurichpydata
Ai powered images-zurichpydataAi powered images-zurichpydata
Ai powered images-zurichpydata
 
Fastandbeautiful vienna
Fastandbeautiful viennaFastandbeautiful vienna
Fastandbeautiful vienna
 
Ai powered images-opieaivienna
Ai powered images-opieaiviennaAi powered images-opieaivienna
Ai powered images-opieaivienna
 
A rt gallery devfestlondon
A rt gallery devfestlondonA rt gallery devfestlondon
A rt gallery devfestlondon
 
Fastandbeautiful devfest london
Fastandbeautiful devfest londonFastandbeautiful devfest london
Fastandbeautiful devfest london
 
A rt gallery cardiff
A rt gallery cardiffA rt gallery cardiff
A rt gallery cardiff
 
Ai powered images-mobileera
Ai powered images-mobileeraAi powered images-mobileera
Ai powered images-mobileera
 
Fastandbeautiful oredev
Fastandbeautiful oredevFastandbeautiful oredev
Fastandbeautiful oredev
 
A rt gallery oredev
A rt gallery oredevA rt gallery oredev
A rt gallery oredev
 

Recently uploaded

How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 

Recently uploaded (20)

How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 

Ux connect london_fastandbeautiful

Editor's Notes

  1. 47% smaller!
  2. 47% smaller! Or 65% smaller from original!
  3. file:///Users/demo/Documents/reponsiveimages.html
  4. www.kidzania.com
  5. www.kidzania.com
  6. www.kidzania.com
  7. www.depend.com
  8. www.depend.com
  9. www.depend.com
  10. www.depend.com