PUBLIC MARKS from decembre with tags image & dev

Très utile aux développeurs et designers Web, LoremPixel vous permet de générer des images à la volée en spécifiant une taille. Pratique pour insérer des balises "img" facilement et rapidement ! Vous devez sûrement connaître Lorem Ipsum pour générer des faux textes. Et bien LoremPixel fait la même chose mais pour des images ! Il génère pour vous des images au format souhaité et ceci très simplement. Plusieurs thématiques sont disponibles : animaux, transport, technologie, sport, etc... De plus, l'image peut être générée en couleur ou en noir et blanc ; avec un texte ou non ! La particularité du système, c'est que vous n'avez pas à parcourir des pages et des pages de photos pour en trouver une correcte. Tout se fait avec une URL. Par exemple, pour générer une image aléatoire en 400x150, voici l'URL : http://lorempixel.com/400/150

I love using SVG in CSS background images but it sucks that you can't alter the fill color easily within your CSS. Here are a few ways around that. # SVG in CSS backgrounds: Using SVG in CSS backgrounds allows you to use CSS's powerful background sizing and position properties. This makes sizing SVGs much simpler because the image easily scales to the size of your element. Plus you don't have SVG cluttering up your markup. There are also some nice performance benefits over inline SVG. An SVG in a background image can be cached. Using image sprites and embedding SVG as a data URI can also improve performance.

One popular method to deal with this is to “Lazy Load” the images; that is, to only load the images just before the user will need to see them. If this technique is applied to the “above the fold” content – i.e., the first average viewport-sized section of the page – then the user can get a significantly faster first view experience. So everyone should always do this, right? Given the potential limitations, let’s work on a solution that can handle all my concerns: a. works without JavaScript (i.e., lazy loading is an enhancement) b. vanilla js – no dependencies on jquery or angularjs c. works with broken JavaScript (i.e., the browser supports JavaScript, but there’s a js error somewhere which causes your script to break; might not even be your fault!)

Getting Images into Markdown Documents and Weblog Posts with Markdown Monster: One good justification for using a rich editor for editing Markdown or a Weblog entry is that you can provide some additional features above and beyond what a simple text or code editor can provide. When you’re creating content you are usually dealing with a number of things beyond plain text like code snippets, feature widgets and most importantly — images. Just about any document you create is likely to include some visual content in the form of images and getting images into documents should be as quick and easy as possible. In this post, I describe all the different ways available in Markdown Monster to add images to Markdown content.

the browser only knows the size of the viewport when it begins downloading images.

Welcome to placehold.it A quick and simple image placeholder service. How does it work? Just put your image size after our URL and you'll get a placeholder.

In Hacker News: the forum about BPG Image format (bellard.org). BGP : Better Portable Graphics __ Créé par Fabrice Bellard_ Remplace le .JPEG_ Jusqu’à 50% plus petit en espace disque pour la même qualité_ 14bits de couleurs par canal comparativement à 8bits pour JPEG

WebPJS - Google's new image format WebP for not supported browsers (with alpha-channel)

If you're looking for an easy way to pin images in your blog posts and pages, this plugin will help you with that. It highlights images and adds a "Pin it" button over them once the user hovers his mouse over an image. Once the user clicks the "Pin it" button, the plugin shows a pop-up window with the image and a description. Everything is ready for pinning, although the user can alter the description

A group of developers working towards a client-side solution for delivering alternate image data based on device capabilities to prevent wasted bandwidth and optimize display for both screen and print.

t's a good practice usually only for very small CSS images that are going to be used together (like CSS sprites) when IE compatibility doesn't matter, and saving the request is more important than cacheability. It has a number of notable downsides: Doesn't work at all in IE6 and 7. Works for resources only up to 32k in size in IE8. It saves a request, but bloats the HTML page instead! And makes images uncacheable. They get loaded every time the containing page or style sheet get loaded. Base64 encoding bloats image sizes by 33%. If served in a gzipped resource, data: images are almost certainly going to be a terrible strain on the server's resources! Images are traditionally very CPU intensive to compress, with very little reduction in size.

Un favicon, c’est une photo iconisée avec une extension en .ico que vous trouvez la plupart du temps devant un url. Tous les blogs ne possèdent pas de favicon et c’est bien dommage car quand on a une bonne dizaine d’onglets ouverts, on aime bien se repérer grâce au favicon. xiconeditor.com neditor.com (De loin le plus complet ) cursorwiz.com Favigen.com Iconverticons.com Dagondesign.com Favicon-generator.de Degraeve.com/favicon Ngin.de/icon-editor

data: URI Generator The data: URI scheme allows you to build URLs that embed small data objects. data: URIs are supported by most modern browsers except for Internet Explorer. The lack of IE support is holding back widespread adoption of data: URIs, but they are still very useful in a couple of specific areas such as embedding graphics and other data items in Greasemonkey scripts. You can read more about data: URIs and see some examples of their use, or use the generator below to create your own. data: URIs are defined in RFC 2397.

Du fait que je recherche beaucoup d’images sur Flickr, pour gagner du temps j’ai fait quelques scripts. Ces scripts agissent par GreaseMonkey, une extension de Firefox qui permet d’executer du Javascript. Le premier me permet d’avoir une phrase toute faite contenant l’auteur de l’image et la licence, avec des liens pour soutenir l’auteur et les Creative Commons. La phrase ressemblera à : « Image par <auteur> sous <licence>. ». Le second permet de cocher par defaut la case de recherche Creative Commons lors d’une recherche avancée avec Flickr. Les scripts ne sont pas particulièrement soignés mais fonctionnels tant que Flickr ne change pas la structure de son site. Je les met dans le domaine public vu le peu de code.