spaceninja + images   99

image-actions · Actions · GitHub Marketplace
Image actions will automatically compress jpeg and png images in GitHub Pull Requests.
github  actions  images  compression  optimization  performance 
6 days ago by spaceninja
Faster Image Loading With Embedded Image Previews
The Embedded Image Preview (EIP) technique introduced in this article allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests without having to transfer additional data.
fridayfrontend  performance  images  progressive  lqip  jpg  ajax 
19 days ago by spaceninja
Tips for rolling your own lazy loading
Lazy loading is a popular technique for gradually requesting images as they come into view, rather than all at once after the HTML of the page has been parsed. It can reduce the initial page weight, and help us hit our performance budgets by requesting images when they're needed. In this post, we’ll look at an implementation you can add to your site as I’ve done on this little demo site.
fridayfrontend  images  lazyload  performance  intersection-observer  responsive  javascript 
9 weeks ago by spaceninja
Still trying to figure out if science can tell us how many DPRs is too many DPRs
TL;DR at standard viewing distances, on reference-ish devices, most people can't “see” DPR 2x; literally nobody gets anything from DPR > 3x.
retina  images  dpr  science 
10 weeks ago by spaceninja
Image Optimization In WordPress
Are you using many full-sized images on your WordPress site? Take note that this is causing your pages to load slowly. A slow website affects your SEO, increases the bounce rates, and keeps your audience at a distance. This article will help you learn how to easily optimize all the images on your site (manually or on autopilot) in order to gain better loading times.
fridayfrontend  performance  images  wordpress 
june 2019 by spaceninja
The CSS background-image property as an anti-pattern
The CSS back­ground-image prop­er­ty allowed us to do some amaz­ing things, but in most cas­es, it’s time to leave it behind.
fridayfrontend  css  cssbasics  backgrounds  images  performance  accessibility  responsive 
june 2019 by spaceninja
Reducing motion with the picture element
hm… I wonder if you could use `picture` + `prefers-reduced-motion`? I copied the code, dropped it into a post of mine, created a static image of an animated GIF, and turned on the “reduce motion” preference (System Preferences > Accessibility > Display). And then BOOM. Just worked. In real time!
fridayfrontend  accessibility  reduced-motion  picture  images  gifs 
june 2019 by spaceninja
Contextually Marking up accessible images and SVGs
However, depending on the markup pattern and the method used, the accessible name may not be exposed as expected, due to quirks or gaps in implementations. This means that without testing, graphics may not be exposed in the manner in which you might expect. Additionally, this article will outline why different markup patterns are necessary when using images or SVG elements within interactive elements, such as links and buttons.
fridayfrontend  cssbasics  css  accessibility  svg  images  alt  title  aria-label 
may 2019 by spaceninja
A Deep Dive into Native Lazy-Loading for Images and Frames
If you read through other lazy-loading guides on this or other sites, you’ll see that we’ve had to resort to different tactics to make lazy-loading work. Well, that’s about to change when lazy-loading will be available natively in HTML as a new loading attribute… at least in Chrome which will hopefully lead to wider adoption. Chrome has already merged the code for native lazy-loading and is expected to ship it in Chrome 75, which is slated to release June 4, 2019.
fridayfrontend  css  lazyload  images  iframes 
may 2019 by spaceninja
Alt-texts: The Ultimate Guide
This post contains everything you need to know about alt-texts! When to use them and how to perfectly craft them. By me, Daniel, a web developer with vision impairment who use a screen reader in my day-to-day life.
fridayfrontend  accessibility  cssbasics  alt  images 
may 2019 by spaceninja
Native image lazy-loading for the web!
What if the browser could avoid loading these offscreen images for you? This would help content in the view-port load quicker, reduce overall network data usage and on lower-end devices, reduce memory usage. Well, I'm happy to share that this will soon be possible with the new loading attribute for images and iframes.
fridayfrontend  html  lazyload  loading  images  iframes  performance 
april 2019 by spaceninja
Planning for Responsive Images
This article aims at affording simple yet effective guidelines for setting up responsive images and layouts in light of the many—and potentially confusing—options available. Do familiarize yourself with CSS grid, art direction, and resolution switching and you’ll be a ninja in short order. Keep practicing!
fridayfrontend  cssbasics  html  images  responsive  performance 
march 2019 by spaceninja
Improving Perceived Performance With the Link Rel=preconnect HTTP Header
The impact on the waterfall is pretty dramatic – Chrome starts establishing the connection as soon as it receives the initial chunk of the response for the page. This removes the connection overhead from the critical path for the image, and even though the request for the image still isn’t made until 900ms has elapsed, it completes at 1.2s, a whole 500ms improvement!
performance  preconnect  images 
march 2019 by spaceninja
A Guide to Website Image Optimization and Performance
The RICG had a few goals, some shouted from the rooftops and some not. For example, the goal of finding efficient, preparser-friendly methods of tailoring image requests to browsing contexts was no secret. Paving a path for more designers and developers to become involved in the standards process—we were pretty loud about that one, too. More subtle, however, was a goal many RICG members shared, me included: a day when we would hardly think about responsive images.
fridayfrontend  html  images  responsive  compression  lazyload  automation 
february 2019 by spaceninja
SVG Filter Effects: Duotone Images with <feComponentTransfer>
In the previous article in this series I introduced you to the <feComponentTransfer>, and we used it to limit the number of colors in an image to create a poster effect. In this article, we will take a look at how it can be used to create a Photoshop-like duotone effect. We’ll also learn how to use it to control the intensity and contrast of an image’s colors.
fridayfrontend  css  svg  filters  duotones  color  images 
february 2019 by spaceninja
Responsive Images Using SVG Instead of Srcset
In conclusion, if your images can be exported to SVG, use SVG instead, and save a ton of bandwidth and your users will thank you for it. Thanks for reading!
fridayfrontend  cssbasics  svg  images  performance  srcset  responsive 
january 2019 by spaceninja
“The Joy of Optimizing Images” by Una Kravets
Images are by far the greatest bottleneck to performance on the web. What’s a web designer or developer to do? In this engaging talk recorded live at An Event Apart Denver 2017, Una Kravets surveys new image formats and dives deeply into image rendering and performance optimization techniques, demonstrating practical approaches to making your web projects noticeably faster.
fridayfrontend  video  images  performance 
january 2019 by spaceninja
Dynamic Social Sharing Images
Drew McLellan draws this, our fourteenth season to a gentle close by getting a little Inside Snowball and gives an account of how we put the robots to work in generating custom dynamic social media sharing images for each of the articles here on the site. Christmas is a time to share what you have, even if it’s just a grid of pixels.
fridayfrontend  social  images  dynamic  sharing 
december 2018 by spaceninja
Get YouTube Video Thumbnail Image
A simple tool that allows you to download the image thumbnail of any YouTube video by entering the URL of the video.
youtube  thumbnails  images  tools  quickreference 
december 2018 by spaceninja
Preventing Content Reflow From Lazy-Loaded Images
When a user scrolls and images are lazy-loaded, those img elements go from a height of 0 pixels to whatever they need to be. This causes reflow, where the content below or around the image gets pushed to make room for the freshly loaded image. Reflow is a problem because it's a user-blocking operation. It slows down the browser by forcing it to recalculate the layout of any elements that are affected by that image's shape.
fridayfrontend  cssbasics  javascript  lazyload  images  reflow  layout  css  aspectratio 
december 2018 by spaceninja
It’s not about the device.
"Is anyone actually going to use the browser on a watch, though?" Sometimes the question’s asked sincerely; more often than not, it seems to be asked skeptically. (And perhaps a little derisively.) But each time I share a link to an article about browsing on the Watch, it’s always, always asked.
fridayfrontend  images  applewatch  ios  accessibility  performance  responsive 
december 2018 by spaceninja
What If?
These are all things that could, do, and will eventually go wrong, so if you’re a developer who decides that you’re going to forcibly hide a page until an event has taken place, you must also ask yourself what if that event never happens?
troubleshooting  blocking  images  lazyload  qa 
december 2018 by spaceninja
Use Inner Shadow instead of borders on images
If you're working with images that sometimes bleed into the background, try using a subtle inner shadow to create some distinction instead of a border. Borders will often clash with the image, while most people will barely realize the shadow is even there.
images  design  borders 
november 2018 by spaceninja
Responsive Images on the Apple Watch
Unless you send Apple a specific signal that you’ve considered one-inch-wide screens, they’re going to assume that you haven’t, pretend to be a bigger, more-common viewport, and zoom out.
apple  ios  watch  rwd  responsive  images  fridayfrontend 
november 2018 by spaceninja
Useful new tool from Google: Compress and compare images with different codecs, right in your browser.
fridayfrontend  performance  compression  images  tools 
november 2018 by spaceninja
Web Performance 101: JS, CSS, HTTP, images & fonts
This is an introduction to the modern web loading performance. Learn why performance is important, what performance optimizations exist and what tools help to understand if your app is doing well.
fridayfrontend  cssbasics  performance  javascript  images 
november 2018 by spaceninja
Apply a Filter to a Background Image
You can apply a filter to an entire element quite easily with the filter property. But what if you want to apply a filter just to the background of an element? It's weirdly tricky.
fridayfrontend  css  backgrounds  filters  images 
october 2018 by spaceninja
Pravatar - CC0 Avatar Placeholder
Generate fake avatars to fill your sample application.
avatars  images  placeholders  stock 
october 2018 by spaceninja
Lazy Loading Images – The Complete Guide
Now, since we cannot do away with images, we need to make our web pages load really fast with them. In this guide, we will talk about lazy loading images, a technique that helps improve the page load time and reduce page size while still retaining all the images on the page.
fridayfrontend  cssbasics  lazyload  images  performance 
october 2018 by spaceninja
Responsive Images
Excellent bit of history from Mat Marquis on why we needed responsive images, and what was wrong with the `img` element in the first place.
fridayfrontend  responsive  images  html 
october 2018 by spaceninja
Improving Client-Side Performance
Below are some ways I’ve found to optimise the performance of a site when getting it ready for a production environment, or patching an existing site. Where possible I’ll list some common implementations, though understandably we don’t always have the kind of access we want to make changes.
performance  images  responsive 
september 2018 by spaceninja
Time-saving CSS techniques to create responsive images
As a web developer, there is a high probability that you have encountered the two enemies of this article: images and deadlines. Sometimes, for some reasons, your images won’t fit the layout and you don’t want to wrap your head around this for hours. This situation has happened to me many times and I have learned from my mistakes. No more black magic hacks — here are my five favorites techniques to handle image resizing.
fridayfrontend  css  cssbasics  responsive  images  object-fit 
august 2018 by spaceninja
Sometimes `sizes` is quite important
In this case, we're changing the size of the images not just at certain resolutions, but at specific breakpoints as well, which means we're also going to need to use the sizes attribute to get the most out of responsive images. The entire job of the sizes attribute is to tell the browser what size the image will be shown at, as per our CSS.
fridayfrontend  css  responsive  images  sizes  srcset  performance 
july 2018 by spaceninja
Drawing Images with CSS Gradients
What I mean by "CSS images" is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser. Let’s take a look at how you can create CSS images that way yourself.
fridayfrontend  css  svg  gradients  backgrounds  images 
july 2018 by spaceninja
Image Inconsistencies: How and When Browsers Download Images
If you’re making heavy use of background images and, for whatever reason, are not showing all of them for first render, beware that some browsers will go ahead and download them anyway: you might want to look into better strategies for hidden content (e.g. removal from the DOM rather than display: none;).
fridayfrontend  images  performance  lazyload  backgrounds  css  browser 
june 2018 by spaceninja
Compressive Images Revisited
Compressive images give us a reduced file size, but it greatly increases the memory footprint. Thanks to the standards that have been developed around responsive images, it’s a trade-off we no longer need to make.
fridayfrontend  css  responsive  images  compression  retina  memory  performance 
april 2018 by spaceninja
`w` Descriptors & Sizes: Under the Hood
A detailed overview of how responsive images actually work in the browser, and why the `sizes` attribute affects the width of an image in ways you may not expect.
responsive  images  fridayfrontend  html  sizes 
march 2018 by spaceninja
Swapping Images with the Sizes Attribute
One thing that is interesting about sizes is that the browser trusts its description over the actual image's size in the page layout, which may not actually correspond at all. In other words, sizes allows you to lie about an image's layout size, and that turns out to be pretty powerful for dynamic image components like a magnifier tool.
fridayfrontend  css  responsive  images  sizes  zoom 
march 2018 by spaceninja
Lazy Loading Images on the Web
Brian Rinaldi discusses a number of methods to reduce the initial weight of a web page by delaying the loading of images that are outside of the viewport.
lazyload  images  html  javascript  pagespeed  performance 
january 2018 by spaceninja
How to write descriptive text
hey twitter - there's a lot of good awareness now about the fact that all users can add image descriptions to twitter for people who use screen readers. Here's some tips on how to do this well:
twitter  images  accessibility  alt  descriptions  captions 
january 2018 by spaceninja
Making a difference with performance
* 47% of people expect a web page to load in 2 seconds or less.
* 40% will abandon a web page if it takes more than 3 seconds to load.
* 52% of online shoppers claim that quick page loads are important for their loyalty to a site.
* 14% will start shopping at a different site if page loads are slow, 23% will simply stop shopping.
* 64% of shoppers who are dissatisfied with their site visit will go somewhere else to shop next time.
performance  speed  pagespeed  responsive  images  jquery  progressive  speedindex 
january 2018 by spaceninja
Hero Image Custom Metrics
If your website has a hero image, make sure it loads and renders as early as possible. Many designs that feature a hero image suffer from HID (Hero Image Delay) mostly due to blocking scripts and stylesheets.
performance  images  heroimages  metrics  analytics 
january 2018 by spaceninja
Don’t use <picture> (most of the time)
For most responsive images, you shouldn’t use the <picture> element. You should use srcset and/or sizes.
css  html  responsive  images  picture  srcset  sizes 
december 2017 by spaceninja
The "Blur Up" Technique for Loading Background Images
So how do you get something valuable out of 200 bytes and how do we show the user something before the image is fully loaded?
fridayfrontend  lazyload  blur  images  performance 
december 2017 by spaceninja
How to use SVG as a Placeholder, and Other Image Loading Techniques
We have seen different tools and techniques to generate SVGs from images and use them as placeholders. The same way WebP is a fantastic format for thumbnails, SVG is also an interesting format to use in placeholders. We can control the level of detail (and thus, size), it’s highly compressible and easy to manipulate with CSS and JS.
fridayfrontend  svg  placeholders  images  lazyload 
november 2017 by spaceninja
Fundamentals of Responsive Images
In this article, I’ll be explaining some of the key concepts for responsive images, as well as providing an overview of a few different responsive image tactics. The solutions used for any particular image will vary. Understanding those options will help you to set out on the right path.
fridayfrontend  responsive  html  css  images  srcset  sizes 
october 2017 by spaceninja
`sizes` in Real Life with Eric Portis
etportis"In this talk we’ll develop an appreciation for both the paradoxical problem that `sizes` was designed to solve and its blunt, practical elegance as a solution. And we’ll explore a whole host of strategies for approaching, avoiding, and automating away the task of writing and maintaining this cornerstone of performant responsive image markup."
fridayfrontend  video  responsive  images  sizes  srcset 
october 2017 by spaceninja
Cropping Images in CSS With object-fit ←
Ever wanted an image to fit exactly into a certain given dimension, but while keeping its aspect ratio and avoid having a squished image? This wasn’t something that could easily be done using CSS for the longest time. One trick was to resort to using a background image instead to go around the issue. Well the problem is no more with the object-fit property!
fridayfrontend  css  images  object-fit 
june 2017 by spaceninja
Focusing a `background-image` on a Precise Location with Percentages
When I began tackling this problem I did not expect it to be this difficult, but what a journey. I hope guiding you through my thought process has been enlightening, and that you may at some point find value in our little Sass function.
css  backgrounds  images  percentages 
june 2017 by spaceninja
Responsive Images: Use Cases and Documented Code Snippets to Get You Started
The new <picture> element can be verbose and confusing, because it solves a range of use cases. To help you match your requirements to the responsive image syntax, we’ve prepared this article full of examples.
responsive  images  rwd  example 
june 2017 by spaceninja
RespImageLint is a bookmarklet that checks images of a webpage against a list of common mistakes and best practises. Just run the bookmarklet and see if it detects any problems with your images.
responsive  images  tools  bookmarklets 
june 2017 by spaceninja
The simplest way I’ve found (so far) to distill/explain `srcset` and `sizes`
The simplest way I’ve found (so far) to distill/explain `srcset` and `sizes`:
html  responsive  rwd  images  srcset  sizes  picture 
june 2017 by spaceninja
NCC Image Checker - Chrome Web Store
Sending images that are too big can damage site speed. This tool scans a whole page to identify all images and highlights those that are sent at the wrong size.
browsers  extension  plugins  responsive  images  optimization  filesize 
may 2017 by spaceninja
Hassle-free Full Bleed with *:not()
Breaking out of container DIVs with this one weird trick
fridayfrontend  css  not  layout  fullbleed  images 
march 2017 by spaceninja
Responsive Images Are Here. Now What? by Jason Grigsby
"In this 60-minute presentation, captured live at An Event Apart Austin, Jason Grigsby shows us how to use the new responsive image specifications, which ones are appropriate for which images, and how to tackle the riddle of responsive image breakpoints."
fridayfrontend  video  responsive  rwd  images 
november 2016 by spaceninja
Git ProTip: binary files
"Git ProTip: Adjust your .gitattributes to make `git diff` more useful for images and other binary formats!"
git  binary  images  diff 
november 2016 by spaceninja
Designer's Web Performance Optimization Checklist
A comprehensive project checklist for designers focused on prioritizing performance on the web.
fridayfrontend  performance  checklist  process  workflow  animation  webfonts  images  responsive  svg 
september 2016 by spaceninja
Cropping Image Thumbnails with SVG
Using SVG, we can make a cropped image that still acts like an image. No CSS required, works in IE9 and up:
fridayfrontend  svg  images  cropping  square 
august 2016 by spaceninja
Leaner Responsive Images With Client Hints – Smashing Magazine
The good news is that there is a fix! No, not throwing JavaScript at the challenge, but by asking the web server for a helping hand. Enter Client Hints, an initiative spearheaded by Google that is already available in browsers (Chrome and Opera) and that is super-simple to use. Let’s see how Client Hints can reduce both image size and verbosity of the responsive images markup.
fridayfrontend  css  responsive  images  hints  clienthints  performance  rwd 
august 2016 by spaceninja
Responsive Image Breakpoints Generator, A New Open Source Tool – Smashing Magazine
In this article I want to further describe the responsive breakpoints challenge, analyze the mistakes currently being made, and suggest a solution to intelligently find optimal breakpoints for each specific image. This article introduces a new free open source web tool that will allow you to generate breakpoints for your images interactively: the Responsive Breakpoints Generator.
fridayfrontend  css  responsive  rwd  images  generator  tools 
august 2016 by spaceninja
Ensure High Contrast for Text Over Images
Summary: If you place text over a background image, make sure it’s readable by providing adequate contrast. Subtle tweaks can increase the contrast without affecting the overall aesthetic of the site.
fridayfrontend  css  contrast  images  design  accessibility 
august 2016 by spaceninja
The anatomy of responsive images -
I just had my responsive images epiphany and I'm writing it all down before I forget everything. This is what I know…
fridayfrontend  css  responsive  images  rwd 
august 2016 by spaceninja
Responsive Images: If you're just changing resolutions, use srcset.
If you're implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage), all you need is the srcset attribute on the <img>.
fridayfrontend  css  responsive  images  rwd  srcset 
august 2016 by spaceninja
A Practical Guide to SVGs on the web
"Techniques you can use to prepare, implement, and work with SVGs on the web."
svg  design  images  howto  reference  icons  logos  fridayfrontend 
june 2016 by spaceninja
Responsive Images 101
"A new series of articles called Responsive Images 101 that will cover everything from why we need responsive images to how to pick the right responsive images solution."
css  images  responsive  fridayfrontend 
june 2016 by spaceninja
Breaking Out With Viewport Units and Calc
"For long-form content, it’s usually a good idea to limit line lengths for readability. But what if we want some content to extend beyond the boundaries of our container? Certain images might have greater impact if they fill the viewport."
css  calc  viewport  breakout  images  layout  fridayfrontend 
june 2016 by spaceninja
Image decorations for object-fit
"The object-fit CSS property is a cool feature that lets you style the “content” of replaced elements (images, videos) in a way that is similar to the keyword values in background-size (most importantly cover and contain). There is also an object-position property that works almost like, you guessed it, background-position."
object-fit  object-position  images  css  fridayfrontend 
april 2016 by spaceninja
Dominant Colors for Lazy-Loading Images
Pinterest, Google Images and lots of image-heavy sites lazy-load their content. They also calculate the dominant color of each image to use as a placeholder. This post presents a few methods to do the same and helps you understand the GIF file format to make the most of data URIs.
images  color  javascript  data-url  gifs  fridayfrontend 
april 2016 by spaceninja
A Quick Overview of `object-fit` and `object-position`
"object-fit and object-position are my two favourite CSS properties lately. They give developers control over the content inside an img or a video similar to the way that we can manipulate the content of a background with background-position and background-size."
css  object-fit  object-position  images  fridayfrontend 
march 2016 by spaceninja
Intrinsic Placeholders with the Picture Element
Intrinsic Ratios aren’t new, but paired with the <picture> element it’s a beautiful little technique with little-to-no extra markup. I built out a little “Intrinsic” Sass component that draws intrinsic ratio box to match your image’s aspect ratio.
css  intrinsic  ratios  responsive  images  placeholders  fridayfrontend 
february 2016 by spaceninja
Responsive Images - The srcset and sizes Attributes
"There are two attributes that are key in providing responsive images - srcset and the accompanying sizes."
html  responsive  images  srcset  sizes  fridayfrontend 
february 2016 by spaceninja
Responsive Images: Use Cases and Documented Code Snippets to Get You Started
The new <picture> element can be verbose and confusing, because it solves a range of use cases. To help you match your requirements to the responsive image syntax, we’ve prepared this article full of examples.
html  picture  responsive  css  images 
august 2014 by spaceninja
Srcset and sizes
Once we know these three things, a solution is trivial. Given a set of sources, pick the smallest one whose dimensions are still greater than rendered size × screen density.
css  images  srcset  sizes  responsive  html 
august 2014 by spaceninja
Picturefill - A Responsive Image Polyfill
Picturefill is a JavaScript file (or a polyfill to be more specific) that enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today!
javascript  html  polyfills  picture  responsive  images 
august 2014 by spaceninja
Fluidbox, a jQuery plugin for beautiful lightboxes
Replicating and improving the lightbox module seen on Medium with fluid transitions
medium  javascript  css  lightbox  plugins  images  jquery  fluid 
july 2014 by spaceninja
ImageOptim — better Save For Web
ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.
images  optimization  compression 
july 2014 by spaceninja
Chrome Devtools: Copy Image Data URI
In Chrome: Open any image in a new tab. Right-click image, inspect element. Click image link.... Voilà, there's the image's Data URI.
chrome  devtools  data-url  images 
july 2014 by spaceninja
« earlier      
per page:    204080120160

related tags

accessibility  actions  ajax  alt  analytics  animation  apple  applewatch  aria-label  asides  aspectratio  attachments  automation  avatars  backgrounds  binary  blocking  blur  bookmarklets  borders  breakout  browser  browsers  calc  captions  checklist  chrome  clienthints  color  compression  contrast  conversion  cropping  css  cssbasics  data-url  descriptions  design  devtools  diff  dpr  duotones  dynamic  effects  example  extension  features  filesize  filters  firefox  fix  fluid  formats  fpo  free  fridayfrontend  fullbleed  fullscreen  galleries  generator  gifs  git  github  gradients  grayscale  hack  headers  heroimages  hints  howto  html  icons  ie  iframes  images  interpolation  intersection-observer  intrinsic  ios  javascript  jpg  jquery  layout  lazyload  lightbox  links  loading  logos  lorem  lqip  mac  mediaqueries  medium  memory  metrics  microsoft  mixins  mobile  not  object-fit  object-position  optimization  pagespeed  percentages  performance  picture  placeholder  placeholders  plugins  png  polyfills  preconnect  process  processing  progressive  qa  quality  quickreference  quotes  ratios  reduced-motion  reference  reflow  resized  responsive  retina  rwd  sass  scaled  science  sharing  sizes  smushit  social  software  speed  speedindex  square  srcset  stock  svg  themes  thumbnails  tips  title  tools  troubleshooting  twitter  video  viewport  watch  webapps  webfonts  wordpress  workflow  yahoo  youtube  zoom 

Copy this bookmark: