recentpopularlog in

piperh : image   321

« earlier - Native image lazy-loading for the web!
look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web.
Is it css or an image attribute?
webdesign  web  design  image  img  lazy  load  lazy-load  lazyload  css  loading  attribute 
4 days ago by piperh
Cool Backgrounds
interesting backgrounds: trianglify etc plus the web code for installing on a site
webdesign  web  design  graphic  background  image  colour  gradient  animated  generator  code 
january 2019 by piperh
Mockuptime: Free realistic device mockups
some photos to use in mockup visuals, esp mobiles and computers
graphic  webdesign  web  design  mockup  visual  layout  image  resources 
january 2019 by piperh
LazyLoad (vanilla-lazyload) | LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport. LazyLoad supports responsive images.
they say: LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport. LazyLoad supports responsive images
webdesign  web  design  js  javascript  script  lazyload  image  speed  performance 
december 2018 by piperh
they say: Squoosh is an image compression web app that allows you to dive into the advanced options provided by various image compressors. A google project.
Anselm Hanneman says: lets you optimize images perfectly in your web browser. It’s made by the Google Chrome team and as a bonus you can also resize the image and choose which compression to use, including mozJPEG and WebP.
Doesn't seem to work with Epic.
squoosh  image  compression  compress  photo  artwork  svg  tool  google 
november 2018 by piperh
How to Use SVG Patterns as Backgrounds
1st para: SVG patterns offer a more flexible approach to repeating a background image on a web page than CSS tiling. Let’s look at why that is, and how you can use them
webdesign  web  design  background  svg  css  pattern  image 
november 2018 by piperh
Simple recommendations for writing text descriptions that make a big difference | Invotra
about writing alt text for best accessibility and best experience for disabled users
webdesign  web  design  accessibility  accessible  alt  text  image 
november 2018 by piperh
Download Creative Fonts, WebFonts & Stock Art - YouWorkForThem
Fonts, expensive photos, graphics. Prices of images increase with pixel size.
fonts  photos  graphics  images  image  library 
november 2018 by piperh
SVG Filters
Playground for fiddling with and getting code for SVG filters.
graphic  design  image  text  effect  svg  tester  code  filter  playground 
november 2018 by piperh
Shrink Me - Compress JPG, PNG and WEBP Images
Ad-free online lossless image compressor that works offline.
image  compress  compressor  lossless  jpg  png  webp  compression  tool 
november 2018 by piperh
GitHub - pehaa/beerslider: A vanilla JS keyboard accessible plugin for any before-after comparison
vanilla js script for making an over-image slider to compare two different overlaid images, "before and after" type
webdesign  web  design  image  comparison  slider  before  after  compare  js  javascript  script 
october 2018 by piperh
Free Photos (CC0) - AltPhotos
website main headline: 3304 FREE IMAGES. Totally Free Photos - CC0 License.
the best new photos every day
Searchable. Limited selection. OK pics, unusual
graphic  design  image  photo  library  free 
september 2018 by piperh
Beer Slider Responsive & Accessible Before-After Slider – Demo – PEPSized
js (vanilla or jQuery) code to make a sliding image reveal, for comparing two overlaid images.
webdesign  web  design  slider  comparator  compare  slide  image  photo  split  comparison  reveal  overlay  js  javascript  script 
september 2018 by piperh
Icon Organizer & Icon Library
they say: Nucleo is a beautiful library of 25011 icons, and a powerful application to collect, customize and export all your icons.
Could be useful to export svg sprites.
webdesign  web  design  graphic  icons  application  app  software  mac  image  svg  sprite 
july 2018 by piperh
Screely - Generate Beautiful Mockups
home headline: Instantly turn your screenshot into a beautiful design mockup. Outputs a png image. Can place false browser bar at top.
Not sure I understand the point of this. Maybe if you had lots of layouts it would be handy to make them look like screenshots
webdesign  web  design  layout  mockup  screenshot  tool  convert  image 
july 2018 by piperh
Duotone Effect Generator
you can upload photos and see instant duotone effects, and download treated image
design  graphic  image  photo  duotone  generator  colour  resource  tool  online 
june 2018 by piperh
Five Techniques to Lazy Load Images for Website Performance — SitePoint
Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport.
webdesign  web  design  image  photo  lazyload  lazy  load  ux  optimise  optimisation  performance  speed 
may 2018 by piperh
Kapwing - The Online Video Editor
they say: The online video editor
Kapwing is a modern editor for videos, GIFs, and images. Try our free meme maker, resizer, subtitle maker, filters, and more
video  tool  edit  editing  online  software  subtitle  gif  image 
march 2018 by piperh
Swapping Images with the Sizes Attribute | Filament Group, Inc., Boston, MA
brilliant use of css and js with srcset and size to achieve zoom effect or magnifying glass on hover. Requires jQuery
Consider this for barcelonaprints instead of fancybox
webdesign  web  design  js  javascript  script  jquery  enlarge  zoom  lupe  magnifier  magnify  glass  image  srcset  size  attribute  css 
march 2018 by piperh
gifski — highest-quality GIF converter
converts video frames to gif. Author says: This is a GIF. It's hugely inefficient like any GIF, but now at least looks fine!
webdesign  web  design  video  motion  animation  animate  gif  performance  image  animated 
march 2018 by piperh
Barcelona Retro Poster A2
invented, retro-style, poster of Barcelona, done in style of 20s/30s travel posters. Nice silhouette of main buildings , water and Tibidabo. Good colours.
barcelona  image  poster  skyline  illustration  deco  reflection  silhouette  travel 
february 2018 by piperh
About responsive images, best formats and sizes
article title: A Guide to Responsive Images with Ready-to-Use Templates
webdesign  web  design  image  images  format  responsive  jpg  svg  png  inline  64base  resolution  size  webp  compression  srcset  pixel  density  picture  element  source 
february 2018 by piperh
Clippy — CSS clip-path maker
handy code generator for css clip-path. Live demo of result + copyable code. (Use this to generate polygons for css shape-outside?)
webdesign  web  design  code  coding  clip-path  image  css  generator  shape  points 
february 2018 by piperh
Tracy — From Paper to Vector
drag & drop online auto tracer, converts image to vector. Not tested, no idea how good it is.
scan  trace  vector  auto  online  app  application  svg  tool  image 
february 2018 by piperh
magnify 2.1.0 on npm -
a nice js jquery magnifying glass script. Doesn't appear to work on the Huawei, Android 7.
webdesign  web  design  magnify  magnifying  glass  lupe  zoom  enlarge  image  js  javascript  script  jquery 
january 2018 by piperh
zoom-vanilla.js 2.0.5 on npm -
a js zoomer. They say: A simple library for image zooming; as seen on Medium.
webdesign  web  design  js  javascript  script  zoom  vanilla  image  enlarge 
january 2018 by piperh
ImageViewer - An image zooming and panning plugin |
nice jQuery image zoomer and panner with small overview panel to see where you are on the image.
webdesign  web  design  js  javascript  script  jquery  zoom  pan  zooming  panning  image  viewer 
january 2018 by piperh
EasyZoom jQuery Plugin Examples
another jquery image zoom and pan script. Rather annoying action but has possibly useful adjacent window view
webdesign  web  design  zoom  pan  image  jquery  js  javascript  script  zooming  panning 
january 2018 by piperh
imgViewer2 jQuery Plugin Example
a jquery script to zoom and pan an image. Suffers from same prob as panzoom.js - not poss to swipe-scroll a touchscreen when swiping on the image (its OK when swiping off the image).
webdesign  web  design  js  javascript  script  jquery  plugin  pan  zoom  image  panning  zooming 
january 2018 by piperh
How to Build Your Own Progressive Image Loader — SitePoint
a css html js technique for progressive image loading - to show a lo-res placeholder first before full image loads
webdesign  web  design  progressive  image  loading  load  placeholder  lo-res 
january 2018 by piperh
How to Scale SVG | CSS-Tricks
css tricks article about scaling svg's. Particularly handy for me is the para about 'The viewbox attribute'
webdesign  web  design  css  svg  browser  scale  scaling  image 
january 2018 by piperh
Using CSS Clip Path to Create Interactive Effects | CSS-Tricks
Smashing article titled: Using CSS Clip Path to Create Interactive Effects
webdesign  web  design  css  clip-path  clipping  clip  image 
january 2018 by piperh
Untitled Slider
nice slider change effect for images
webdesign  web  design  slider  carousel  effect  css  animate  animation  image 
january 2018 by piperh
Lazy Load Images
a technique for lazy loading blurry lo-res images before the hi-res are loaded
webdesign  web  design  lazy  load  loading  speed  performance  image 
january 2018 by piperh
The "Blur Up" Technique for Loading Background Images | CSS-Tricks
article describing a technique to show first a blurry bg image while whole final image loads. Makes perceived loading time faster. Could be useful for page with large bg image
webdesign  web  design  image  load  loading  blur  blurred  technique  background  bg  performance 
january 2018 by piperh
The ”blur-up” technique
a codepen demo of a loading technique for bg images. See blurred image before final
webdesign  web  design  image  load  loading  blur  technique  codepen  blurred 
january 2018 by piperh
You searched for comparison - CSS Script
Interactive Diagonal Image Comparison With JavaScript
webdesign  web  design  image  comparison  js  javascript  script  effect 
december 2017 by piperh
CodePen - Image loading effects [background-size: 0, :before, :after]
Michal Niewitala says: Image loading effects [background-size: 0, :before, :after]
webdesign  web  design  effect  image  background  load  loading 
december 2017 by piperh
Photopea | edit Photoshop files online
online image editor, accepts native photoshop
image  edit  editing  online  photoshop  sketch  psd  png  jpg  svg  editor 
december 2017 by piperh
Alt-texts: The Ultimate Guide - Axess Lab
v handy guide to alt texts, explaining some do's and dont's and why.
webdesign  web  design  code  coding  alt  text  image  accessibility  accessible  screen  reader 
november 2017 by piperh
Lazy loading with inline SVG
idea for lazy loading: use svg outlines of images that show before the whole photographic image has loaded. Possibly, maybe useful in some circumstance though it's a lot of work just for a few miliseconds of user benefit
webdesign  web  design  lazy  loading  load  image  svg 
october 2017 by piperh
Integrating SVG into your site - Heart Internet Blog - Focusing on all aspects of the web
article about incorporating SVGs into a site. Rather basic but has some code examples
webdesign  web  design  svg  illustration  image  img  object  html  css 
october 2017 by piperh
HEIC Converter – 🦄 Sindre Sorhus’ blog
A free macOS app to convert HEIC images to JPEG or PNG. Requires OS13 High Sierra
web  graphic  design  heic  photo  image  format  convert  converter  app  apple  mac 
october 2017 by piperh
Lozad.js | lozad.js
they say: Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
webdesign  web  design  js  javascript  script  lazy  loading  image  element 
october 2017 by piperh
Quark Forums • View topic - Quark 2017 - Batch process RGB multiple images to CMYK?
quark forum thread: Batch process RGB multiple images to CMYK?
Useful replies about conversion and rgb workflow
quark  image  photo  convert  rgb  cmyk  pdf  picture  export  link  images  batch  conversion 
september 2017 by piperh
XE - World Currency Symbols's list of currency symbols, code and font references
world  currency  symbols  list  reference  symbol  character  image  hex  unicode  font  money 
september 2017 by piperh
Building Better Backgrounds – Zack Krida – Medium
author says: Approaches to stacking css background images on mobile for improved readability, using object-fit and ES2015+
webdesign  web  design  mobile  css  image  img  background  background-image  stack  z-index  layer  responsive  object-fit  js  javascript  script 
july 2017 by piperh
CodePen - SVG encoded for background-image
a way tu use svg as background image that doesn't require an http request
webdesign  web  design  background-image  background  image  svg  code 
july 2017 by piperh
How to Apply CSS3 Transforms to Background Images — SitePoint
sitepoint article on transforming background images - scaling, skewing, rotating etc
webdesign  web  design  scale  skew  rotate  background  image  transform  element  pseudo 
june 2017 by piperh
When Large Isn't Large Enough: Designing With Hero Images – Smashing Magazine
smashing article about use of large images. On the face of it not useful for me but has some sensible things to say.
webdesign  web  design  graphic  hero  image  large  use  background  bleed  cover 
june 2017 by piperh
Cropping Images in CSS With object-fit ←
article with examples of all css object-fit properties and how they affect an image
webdesign  web  design  object-fit  css  image  size  ratio  fill  crop 
june 2017 by piperh
Serve SVG as an Image on Apache with .htaccess
a David Walsh tip to fix non-serving svg problem
webdesign  web  design  serve  server  svg  image  htaccess 
june 2017 by piperh
Serve SVG with the Correct Content Type | CSS-Tricks
Short article suggesting a solution for non-appearing svg in a page
Add this to .htaccess: AddType image/svg+xml .svg .svgz
Also, a further solution noted
webdesign  web  design  htaccess  serve  server  svg  image  code  type 
june 2017 by piperh
Daily Pen #80
Codepen demo of object-fit: cover; for inline videos and images
(like background-size:cover)
webdesign  web  design  video  image  background  object-fit  css  code 
june 2017 by piperh
How To Create a Slideshow
great vanilla js slideshow at w3schools, with captions and dots and poss to put anything in the dot divs (eg, numbers, thumbnails. Returns to beginning at the end, and vice versa. Used it for MediCarrera logo presentation. Also, automatic version.
webdesign  web  design  slideshow  js  javascript  script  vanilla  image  gallery  slider 
june 2017 by piperh
4 CSS Filters For Adjusting Color - Vanseo Design
description of css methods for filtering colours and images. Check caniuse for usability!
webdesign  web  design  css  filter  colour  image  filter-function  function 
june 2017 by piperh
An Overview of SVG Sprite Creation Techniques ◆ 24 ways
description, with howto's, of different methods of spriting svg's and using in your site, both as inline and as external svg file
webdesign  web  design  svg  sprite  technique  method  inline  css  external  icon  image  vector  browser 
june 2017 by piperh
Link with Gradient Underline · GitHub
use text shadow and background image to get an underline on a link. Only advantage seems to be to get descenders to have a white outline, so they look better where they pass over the underline
webdesign  web  design  css  text  shadow  underline  link  background  image  position 
may 2017 by piperh
[no title]
version 3 of fancybox, the jQuery modal zoom I use on tria site. There's a stackexchange answer to my question about size of zoomed image, with sample callback code. One can reduce the image to, eg, 50% of its real pixel size. Sounds good if it works and isn't slow.
fancybox  fancybox3  tria  modal  zoom  image  clickable  enlarge  reduce  responsive  pixel  size  resolution  x2  x3  density 
february 2017 by piperh
CSS Exclusions: Making Boring Layouts Less Boring
article describing css exclusions. A method for running text about a shape. 9.2.17 only supported by late IE and Edge
webdesign  web  design  css  layout  wrap  runaround  image  text 
february 2017 by piperh
Free vectors, photos and PSD Downloads | Freepik
Image library with free and premium (subscription) models. Lots of vector illustrations and icons
freepik  graphic  design  image  photo  vector  icon  illustration  free  royalty-free  archive  library  bank 
january 2017 by piperh
online tool to create placeholder images - can produce responsive srcset in correct proportions / aspect ratio
webdesign  web  design  image  prototype  placeholder  responsive  test  lag  delay  simulate 
january 2017 by piperh
JQuery Cycle Plugin - Frequently Asked Questions
malsup Cycle FAQ page - shows how to avoid the fouc that displays all slideshow images while page loads. With just a simple bit of css.
webdesign  web  design  tcycle  faq  fouc  js  javascript  jquery  script  dom  cycle  slideshow  flash  image  images 
january 2017 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:

to read