SlideShare a Scribd company logo
1 of 35
CHRISTOPHER SCHMITT           @teleject




DESIGNING WEB
&MOBILE GRAPHICS

                  SXSW 2013
@teleject



CHRISTOPHER SCHMITT
CHRISTOPHER SCHMITT
[sxsw2013] Extremely Compressed JPEGs
WHY DON’T WE ASK
THE BROWSER?

             (cc) flic.kr/p/vUBHv
Mozilla/1.0 (Win3.1)

http://www.useragentstring.com/




                                  (cc) flic.kr/p/vUBHv
Mozilla/1.0 (Win3.1)
Mozilla/1.22 (compatible;
MSIE 2.0; Windows 95)
http://www.useragentstring.com/




                                  (cc) flic.kr/p/vUBHv
Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
http://webaim.org/blog/user-agent-string-history/




                                     (cc) flic.kr/p/vUBHv
Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
http://webaim.org/blog/user-agent-string-history/




                                     (cc) flic.kr/p/vUBHv
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
SVG
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
OS X Lion
 The world’s most advanced desktop
 operating system advances even further.
 With over 250 new features including
 Multi-Touch gestures, Mission Control,
 full-screen apps, and Launchpad, OS X
 Lion takes the Mac further than ever.


     Learn More




iCloud             iOS 5            OSX Lion   iPad 2   iPhone
!
 OS X Lion
              "                            ←
 The world’s most advanced desktop
 operating system advances even further.
 With over 250 new features including
 Multi-Touch gestures, Mission Control,
 full-screen apps, and Launchpad, OS X

                           ↑
 Lion takes the Mac further than ever.


     Learn More




iCloud             iOS 5            OSX Lion   iPad 2   iPhone
!              ↙
 OS X Lion
              "                            ← ←
 The world’s most advanced desktop
 operating system advances even further.
 With over 250 new features including
 Multi-Touch gestures, Mission Control,
 full-screen apps, and Launchpad, OS X

            ↗              ↑
 Lion takes the Mac further than ever.
                                           ↖
     Learn More




                           ↑               ↖
iCloud             iOS 5            OSX Lion   iPad 2   iPhone
↑               ↗
 OS X Lion
            ←                              "   "
 The world’s most advanced desktop
 operating system advances even further.
 With over 250 new features including
 Multi-Touch gestures, Mission Control,
 full-screen apps, and Launchpad, OS X

            ↙               !
 Lion takes the Mac further than ever.
                                           ↘
     Learn More




                            !              ↘
iCloud             iOS 5            OSX Lion   iPad 2   iPhone
(cc) flic.kr/p/64fGf6
[sxsw2013] Extremely Compressed JPEGs
446kb < 8,755.2kb
   0% vs 100%

            (cc) flic.kr/p/64fGf6
Size Type   Dimensions   Display Px Density   File Size


Extreme     2276x1400         1x & 2x          446kb

            1024x1536           2x            1,745kb
 Extra
 Large
             512x768            1x             503kb

             640x960            2x             746kb
 Large
             320x480            1x             223kb

             500x750            2x             485kb
 Medium
             250x375            1x             145kb
Size Type   Dimensions   Display Px Density   File Size


Extreme     2276x1400         1x & 2x          446kb

            1024x1536           2x            1,745kb
 Extra
 Large
             512x768            1x             503kb

             640x960            2x             746kb
 Large
             320x480            1x             223kb

             500x750            2x             485kb
 Medium
             250x375            1x             145kb
<picture> Patch
  <picture alt="A giant stone face at The Bayon temple in Angkor Thom,
 Cambodia">
      <!-- <source src="small.jpg"> -->
      <source src="small.jpg">
      <!-- <source src="medium.jpg" media="(min-width: 400px)"> -->
      <source src="medium.jpg" media="(min-width: 400px)">
      <!-- <source src="large.jpg" media="(min-width: 800px)"> -->
      <source src="large.jpg" media="(min-width: 800px)">
      <!-- Fallback content for non-JS browsers. Same src as the initial
 source element. -->
      <noscript><img src="small.jpg" alt="A giant stone face at The Bayon
 temple in Angkor Thom, Cambodia"></noscript>
 </picture>
http://www.w3.org/community/respimg/2012/03/15/polyfilling-
                picture-without-the-overhead/
One Image, One IMG



<img src="rock-climber.jpg" alt="" />
[sxsw2013] Extremely Compressed JPEGs
EXTREMELY
COMPRESSED PROBLEMS




                      (cc) flic.kr/p/64fGf6
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
THANK YOU!
CHRISTOPHER SCHMITT          @teleject


       http://goo.gl/gSYmS   @DWMGbook

More Related Content

Similar to [sxsw2013] Extremely Compressed JPEGs

Java/Scala Lab: Anton Vidishchev - Microsoft Azure как облачная платформа для...
Java/Scala Lab: Anton Vidishchev - Microsoft Azure как облачная платформа для...Java/Scala Lab: Anton Vidishchev - Microsoft Azure как облачная платформа для...
Java/Scala Lab: Anton Vidishchev - Microsoft Azure как облачная платформа для...GeeksLab Odessa
 
SVILUPPARE E GESTIRE ARCHITETTURE A MICROSERVIZI SU AZURE
SVILUPPARE E GESTIRE ARCHITETTURE A MICROSERVIZI SU AZURESVILUPPARE E GESTIRE ARCHITETTURE A MICROSERVIZI SU AZURE
SVILUPPARE E GESTIRE ARCHITETTURE A MICROSERVIZI SU AZUREDotNetCampus
 
Dnc2015 azure-microservizi-vforusso
Dnc2015 azure-microservizi-vforussoDnc2015 azure-microservizi-vforusso
Dnc2015 azure-microservizi-vforussoDotNetCampus
 
Casual Engines 2009
Casual Engines 2009Casual Engines 2009
Casual Engines 2009David Fox
 
The beauty of Azure
The beauty of AzureThe beauty of Azure
The beauty of AzureJames Jan
 
Os Henrikson
Os HenriksonOs Henrikson
Os Henriksonoscon2007
 
Google Dev Fest 2016 - Realm database
Google Dev Fest 2016 - Realm databaseGoogle Dev Fest 2016 - Realm database
Google Dev Fest 2016 - Realm databasePhạm Khắc
 
DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5Frédéric Harper
 
Docker Introduction
Docker IntroductionDocker Introduction
Docker IntroductionHao Fan
 
콘텐츠 플랫폼 구조 분석
콘텐츠 플랫폼 구조 분석콘텐츠 플랫폼 구조 분석
콘텐츠 플랫폼 구조 분석Jaehyeuk Oh
 
POCO C++ Libraries Intro and Overview
POCO C++ Libraries Intro and OverviewPOCO C++ Libraries Intro and Overview
POCO C++ Libraries Intro and OverviewGünter Obiltschnig
 
Xcodeを用いた iPhone/iPadアプリ開発
Xcodeを用いた iPhone/iPadアプリ開発Xcodeを用いた iPhone/iPadアプリ開発
Xcodeを用いた iPhone/iPadアプリ開発一樹 濱崎
 
Xcodeを用いたiPhone/iPadアプリ開発
Xcodeを用いたiPhone/iPadアプリ開発Xcodeを用いたiPhone/iPadアプリ開発
Xcodeを用いたiPhone/iPadアプリ開発ashphy
 
WebSphere Application Server Liberty Profile and Docker
WebSphere Application Server Liberty Profile and DockerWebSphere Application Server Liberty Profile and Docker
WebSphere Application Server Liberty Profile and DockerDavid Currie
 
Was liberty profile and docker
Was liberty profile and dockerWas liberty profile and docker
Was liberty profile and dockersflynn073
 
OpenStack and Windows - What's new in Ocata
OpenStack and Windows - What's new in OcataOpenStack and Windows - What's new in Ocata
OpenStack and Windows - What's new in OcataAlessandro Pilotti
 
DOO-007_How to run containers in production, at scale!
DOO-007_How to run containers in production, at scale!DOO-007_How to run containers in production, at scale!
DOO-007_How to run containers in production, at scale!decode2016
 

Similar to [sxsw2013] Extremely Compressed JPEGs (20)

Java/Scala Lab: Anton Vidishchev - Microsoft Azure как облачная платформа для...
Java/Scala Lab: Anton Vidishchev - Microsoft Azure как облачная платформа для...Java/Scala Lab: Anton Vidishchev - Microsoft Azure как облачная платформа для...
Java/Scala Lab: Anton Vidishchev - Microsoft Azure как облачная платформа для...
 
SVILUPPARE E GESTIRE ARCHITETTURE A MICROSERVIZI SU AZURE
SVILUPPARE E GESTIRE ARCHITETTURE A MICROSERVIZI SU AZURESVILUPPARE E GESTIRE ARCHITETTURE A MICROSERVIZI SU AZURE
SVILUPPARE E GESTIRE ARCHITETTURE A MICROSERVIZI SU AZURE
 
Dnc2015 azure-microservizi-vforusso
Dnc2015 azure-microservizi-vforussoDnc2015 azure-microservizi-vforusso
Dnc2015 azure-microservizi-vforusso
 
Casual Engines 2009
Casual Engines 2009Casual Engines 2009
Casual Engines 2009
 
The beauty of Azure
The beauty of AzureThe beauty of Azure
The beauty of Azure
 
Os Henrikson
Os HenriksonOs Henrikson
Os Henrikson
 
Google Dev Fest 2016 - Realm database
Google Dev Fest 2016 - Realm databaseGoogle Dev Fest 2016 - Realm database
Google Dev Fest 2016 - Realm database
 
DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5
 
Docker Introduction
Docker IntroductionDocker Introduction
Docker Introduction
 
콘텐츠 플랫폼 구조 분석
콘텐츠 플랫폼 구조 분석콘텐츠 플랫폼 구조 분석
콘텐츠 플랫폼 구조 분석
 
Lecture1
Lecture1Lecture1
Lecture1
 
POCO C++ Libraries Intro and Overview
POCO C++ Libraries Intro and OverviewPOCO C++ Libraries Intro and Overview
POCO C++ Libraries Intro and Overview
 
Xcodeを用いた iPhone/iPadアプリ開発
Xcodeを用いた iPhone/iPadアプリ開発Xcodeを用いた iPhone/iPadアプリ開発
Xcodeを用いた iPhone/iPadアプリ開発
 
Applebu
ApplebuApplebu
Applebu
 
Xcodeを用いたiPhone/iPadアプリ開発
Xcodeを用いたiPhone/iPadアプリ開発Xcodeを用いたiPhone/iPadアプリ開発
Xcodeを用いたiPhone/iPadアプリ開発
 
Applebu
ApplebuApplebu
Applebu
 
WebSphere Application Server Liberty Profile and Docker
WebSphere Application Server Liberty Profile and DockerWebSphere Application Server Liberty Profile and Docker
WebSphere Application Server Liberty Profile and Docker
 
Was liberty profile and docker
Was liberty profile and dockerWas liberty profile and docker
Was liberty profile and docker
 
OpenStack and Windows - What's new in Ocata
OpenStack and Windows - What's new in OcataOpenStack and Windows - What's new in Ocata
OpenStack and Windows - What's new in Ocata
 
DOO-007_How to run containers in production, at scale!
DOO-007_How to run containers in production, at scale!DOO-007_How to run containers in production, at scale!
DOO-007_How to run containers in production, at scale!
 

More from Christopher Schmitt

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductChristopher Schmitt
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014Christopher Schmitt
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't CodeChristopher Schmitt
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web DesignChristopher Schmitt
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't CodeChristopher Schmitt
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 

More from Christopher Schmitt (20)

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your Product
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
 
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
 
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design
 
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't Code
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
 

Recently uploaded

Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 

Recently uploaded (20)

Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 

[sxsw2013] Extremely Compressed JPEGs

  • 1. CHRISTOPHER SCHMITT @teleject DESIGNING WEB &MOBILE GRAPHICS SXSW 2013
  • 5. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
  • 7. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  • 8. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv
  • 9. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv
  • 12. SVG
  • 19. OS X Lion The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More iCloud iOS 5 OSX Lion iPad 2 iPhone
  • 20. ! OS X Lion " ← The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X ↑ Lion takes the Mac further than ever. Learn More iCloud iOS 5 OSX Lion iPad 2 iPhone
  • 21. ! ↙ OS X Lion " ← ← The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X ↗ ↑ Lion takes the Mac further than ever. ↖ Learn More ↑ ↖ iCloud iOS 5 OSX Lion iPad 2 iPhone
  • 22. ↗ OS X Lion ← " " The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X ↙ ! Lion takes the Mac further than ever. ↘ Learn More ! ↘ iCloud iOS 5 OSX Lion iPad 2 iPhone
  • 25. 446kb < 8,755.2kb 0% vs 100% (cc) flic.kr/p/64fGf6
  • 26. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb 640x960 2x 746kb Large 320x480 1x 223kb 500x750 2x 485kb Medium 250x375 1x 145kb
  • 27. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb 640x960 2x 746kb Large 320x480 1x 223kb 500x750 2x 485kb Medium 250x375 1x 145kb
  • 28. <picture> Patch <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <!-- <source src="small.jpg"> --> <source src="small.jpg"> <!-- <source src="medium.jpg" media="(min-width: 400px)"> --> <source src="medium.jpg" media="(min-width: 400px)"> <!-- <source src="large.jpg" media="(min-width: 800px)"> --> <source src="large.jpg" media="(min-width: 800px)"> <!-- Fallback content for non-JS browsers. Same src as the initial source element. --> <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </picture> http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/
  • 29. One Image, One IMG <img src="rock-climber.jpg" alt="" />
  • 31. EXTREMELY COMPRESSED PROBLEMS (cc) flic.kr/p/64fGf6
  • 35. THANK YOU! CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmS @DWMGbook