Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Images’.

We are pleased to present below all posts tagged with ‘Images’.

Responsive Image Breakpoints Generator, A New Open Source Tool

Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. We can solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.

Responsive Image Breakpoints Generation: Challenges, Mistakes And A New Solution

The lives of web developers aren’t getting any simpler as the number of different devices and potential screen resolutions increase. The high-resolution arms race seems to be never-ending as vendors try to top one another with innovations in laptop and mobile device screens. New devices such as TVs and smartwatches are entering the market, making the race even more complex.

Read more...

Responsive Images Now Landed In WordPress Core

While the growing adoption of responsive images cannot be ignored, it can be very difficult to employ the functionality under the constraints of a large CMS like WordPress. Although it is entirely possible to write the feature into your theme on your own, doing so is a challenging and time-consuming endeavour.

Responsive Images In WordPress Core

Thankfully, with the launch of WordPress 4.4, theme developers and maintainers will find it much easier to introduce responsive image functionality into their themes. In this recent launch, the RICG Responsive Images plugin has been merged into WordPress core, which means that responsive image support now comes as a default part of WordPress. Let's take a look at how the feature works, and how you can use it to get the best support for your WordPress site.

Read more...

Animating Clipped Elements In SVG

Scalable Vector Graphics (or SVG) lend developers an incredible ability to display crisp, beautiful graphics at any size or resolution. SVG can also be animated using various techniques. In combination with clipping paths, interesting effects can be achieved.

Animating Clipped Elements In SVG

This article explains the difference between an SVG clipPath and a CSS clip-path, including examples to guide and inform you through this journey. Finally, I’ll share a few demos both personal and in the wild to help you better understand clipPath animation and inspire your visions.

Read more...

Guide To Using WebP Images Today: A Case Study

They say a picture is worth a thousand words. But online, a picture can be worth a thousand kilobytes or more! HTTP Archive shows that images make up 64% of a web page’s total size on average. Given this, image optimization is key, especially considering that many users will abandon a request if it doesn’t load within a few seconds.

WebP Images And Performance

The problem with image optimization is that we want to keep file sizes small without sacrificing quality. Past attempts to create file types that optimize images better than the standard JPEG, PNG and GIF formats have been unsuccessful.

Read more...

Designing Custom Images For Your Online Content, Faster!

Visual elements are a huge part of online publishing. Whether you are creating social media updates, blog posts, eBooks or slide decks on SlideShare, if your post contains images, then you’ll get exponentially better engagement. So, having a streamlined process for creating eye-catching images is imperative.

Designing Custom Images For Your Online Content, Faster!

This article will walk you through how to do just that, as well as provide you with a starter kit of tools to kickstart your foray into the exciting world of quick-and-dirty (yet still super-cool) image creation!

Read more...

Efficient Image Resizing With ImageMagick

Responsive images have been keeping us on our toes for quite some time, and now that they are getting traction in browsers, they come with a scary problem: the need to efficiently resize all our image assets. The way responsive images work is that an appropriately sized image is sent to each user — small versions for users on small screens, big versions for users on big screens.

Super-Efficient Image Resizing With ImageMagick

It’s fantastic for web performance, but we have to face the grim reality that serving different sizes of images to different users means that we first need to create all of those different files, and that can be a huge pain.

Read more...

An Introduction To CSS3 Keyframe Animations

By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design. Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. It’s just another way that CSS3 is helping to solve a real-world problem in an elegant manner.

Screenshot

If you haven’t yet started learning the syntax for CSS3 animations, here’s your chance to prepare for when this part of the CSS3 spec moves past the working draft. In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it.

Read more...

Image Manipulation With jQuery & PHP GD

One of the numerous advantages brought about by the explosion of jQuery and other JavaScript libraries is the ease with which you can create interactive tools for your site. When combined with server-side technologies such as PHP, this puts a serious amount of power at your finger tips.

Image Manipulation With jQuery and PHP GD

In this article, I’ll be looking at how to combine JavaScript/jQuery with PHP and, particularly, PHP’s GD library to create an image manipulation tool to upload an image, then crop it and finally save the revised version to the server. Sure, there are plugins out there that you can use to do this; but this article aims to show you what's behind the process. You can download the source files for reference.

Read more...
1

↑ Back to top