recentpopularlog in

abberdab : image   7

Advanced image alignments with CSS Grid: Full Bleed and beyond
"An experiment to mix regular floated images and full-bleed / full-bleed variant images within the same layout using a combination of old layout methods and CSS Grid." from Morten Rand-Hendriksen
image  css  alignment  floats  grid  layout  blog  article  design 
january 2018 by abberdab
CodePen - JPNG.svg (Transparent PNG with JPEG Compression)
Combine the transparency of a PNG with the compression of a JPEG. Based on the idea from Using SVG to Shrink Your PNGs, but adapted to use data URIs instead of external images. Include on your page as inline SVG, using an <img src="image.svg"/> tag, or as a background-image.

This technique is tested & working in all modern browsers, IE9+ and Safari 9+. Run the image test yourself to see if it works in required browsers. Inline seems to be the best option for compatibility, in which case you should use external assets so that they can be cached.
image  png  svg  alpha  transparency  optimization  compression 
august 2017 by abberdab
Responsive Image Breakpoints Generator by Cloudinary
Efficiently analyze each hi-res image and find the best dimensions for embedding as responsive images in your site
tools  image  breakpoints  dev  rwd 
november 2016 by abberdab
Details | Adaptive Images
Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.
image  php  rwd  dev  www 
march 2013 by abberdab

Copy this bookmark:

to read