Optimizing images with CSS icon sprites

Fletch — Tue, 23 Jun 2020 19:27:20 +0000

Choosing the right icons

There are many choices for icons available in 2020. We can easily incorporate icons from FontAwesome, Material UI and other React based user interfaces. We should always reach for these first when it is an option. Often, however, we want to customize things for our clients. For these cases we use CSS icon "sprites".

We want to take advantage of the idea of loading multiple resources while minimizing network traffic to do it, similar to how there are multiple graphics in one FontAwesome font file. Fortunately, modern CSS makes this very easy, if perhaps a little bit verbose. We borrow a term from game development here, and we'll call the resulting CSS icon a "sprite". Our sprites will have multiple states for hovering and clicking or touching, and we will include all images and states in one file.

Preparation

What we need to do first is very straightforward. Make a regular shaped grid in a graphics file and pack multiple icon images into each square of the grid. The resulting file can be loaded in one request by the browser, and then cached for subsequent page visits. We chose SVG format for our client Mona Caron, since the resulting file size came out smallest when compared against PNG or JPEG. The Adobe Illustrator template attached to this post is arranged for square 50x50 graphics, but there is no requirement here that the icons be square. A tall or wide shape is fine, as long as it is consistent for the entire grid.

CSS code

Once we have the graphics grid, the following CSS ties everything together.

.icon { display: inline-block; overflow: hidden; background-image: url(/path/to/sprites.svg); background-repeat: none; text-indent: 10000px;
width: 50px; height: 50px; } .icon.facebook { background-position: -100px 0; } .icon.facebook:hover { background-position: -100px -50px; } .icon.facebook:active { background-position: -100px -100px; } /* ... repeated for each sprite ... */

The positions in the grid are encoded into the background-position CSS property. The values are negative because we are shifting the image up and left from the (0, 0) origin. A background-position value of 0 0 would show the icon in the upper left corner of the grid image.

HTML code

Now to include this in our HTML we can write.

This will add a 50x50 Facebook icon to our page with hover and click states.

CSS icon results in practice

We have reduced the number of server connections here from twelve to one, a 91.6% reduction of traffic.

This can translate to a significant significant time savings for people with limited bandwidth or on mobile devices.

Let's discuss: Slack, Facebook, or Twitter.

Fletch Tue, 06/23/2020 - 12:27

Attached files

CSS-sprite-grid-50-pixels-square-monkeys-at-keyboards.ait

CSS

CSS icon

HTML

Web content

How to process photos for the web

Laura — Tue, 16 Jun 2020 18:22:59 +0000

How to process photos for the web

How to process photos

Photographs of blank books by Laurel Tree Bindery

This guide on how to process photos is just the tip of the iceberg for photo editing and post-processing, but I hope it will give you a great foundation for processing your photos for posting online. We'll start with photographic file types and the critical difference between lossy and lossless. We'll examine best naming conventions and tips for organizing files. Finally we'll look at processing raw files and bulk processing files in Photoshop.

When you process photos for the web, it's good to keep multiple versions of your files. The highest resolution and best quality of your images is the original file. I like to think of that file like a negative and keep it safe and backed up. If your camera or phone shoots raw files, that’s always going to be the best option.

Handling and processing those original files can be challenging. Making files look good and load quickly is a critical balance to achieve. When uploading files to your website, the goal is high quality and fast speeds for users.

Lossy vs. Lossless

Images in GIF and JPEG formats are lossy, while TIFF, PNG, BMP and raw are lossless. What this means is that GIF and JPEG images are compressed by averaging the information. They become even more compressed each time you open and save them.

GIF and JPEG should only be final versions. When you need new files sizes or output, go back to your lossless original. If your original photos are in GIF or JPEG your first step should be to copy those files somewhere safe and never open the originals.

Naming conventions

Before we get into the steps to process photos, let’s talk about naming image files.

I'm picky, picky, picky about my naming conventions and you should be too for multiple reasons. First, the name stays with your file if it’s downloaded or shared. It’s also a claim of ownership. Finally, it is a ranking factor in SEO.

Google extracts information about the subject matter of the image from the content of the page, including captions and image titles. Wherever possible, make sure images are placed near relevant text and on pages that are relevant to the image subject matter.

Likewise, the filename can give Google clues about the subject matter of the image.

From: Google Images Best Practices

Because of this blog post, I’ve revisited my own naming conventions. Up until today, I named my files using a combination of snake and Pascal cases. Kebab case is the new best practice for the web.

EXAMPLE: I’ve gone from MessageInABottle_LaurelTreeBindery01.png to message-in-a-bottle-laurel-tree-bindery-01.png.

TLDR

camelCase
PascalCase
snake_case
kebab-case

Source

TIP: If you want to really optimize your SEO, consider having your keyword phrase in your image title and alt tags as well.

Process photos in bulk with Photoshop

Process RAW images into TIFF

Open your raw photos in Photoshop. The raw image file type is camera maker dependent. Here’s a list over on Wikipedia. I have a Nikon, so you’ll see that my files are nef. Personally, the Photoshop raw processor is the main place I edit.

This is the time to look at and adjust how your photo looks.

White balance
Exposure
Levels
Crop
Basic rotation or /horizon correction

Here's a guide to processing raw files from Adobe. If my file needs additional touch up, I open it and do non-destructive editing in Photoshop. Alternatively, GIMP has a raw plugin that makes it a good, open source, free substitute.

You can adjust each photo individually, or select multiple to make adjustments to an entire group.

When saving each raw photo, you get the option to change the name. Utilizing my new naming convention, I’ve set up the first part of the to be changed if needed, the second to be my company name, and let Photoshop add automatic numbering. I’m saving these as full sized, lossless TIFF files which will become my new working originals.

Organize folders for bulk processing

I move my TIFF files into their own folder.

Steps to bulk process photos.

I predominantly use bulk processing to save different sizes of my images and to add copyright information int he metadata.

Go to file menu -> Scripts - Image Processor

Choose size and file options

1. Navigate to the folder with the TIFF images.

2. In the second step I use "save in same location” and move them later.

3. In the third step choose your final file type and size:

The options I’ve chosen here: JPEG, Quality 12, Resize to 1080px wide. Height is large enough to be irrelevant. This will not stretch your photos.
TIFF is lossless and a good idea if this is still an interim stage.
Native PSD is really not recommended unless just for your own use.

4. This is where I add copyright information.

After you process your JPEGs will be in their own folder.

Photo processing results

Your final image size is really dependent on where the file is being uploaded. For example, for Laurel Tree Bindery I actually use a 1080 x 1080 square format. The website then creates and serves up smaller versions for different screen sizes.

I often do end up creating a couple different JPEG end sizes. I will always go back to the TIFFs to create new sizes to submit to shows or to upload to different platforms. I never, ever open and re-save a JPEG. A JPEG is always a final image.

Final thoughts

This is just a basic guide on processing and bulk re-sizing images with Photoshop. Let me know what questions you have or if there are any tips you would like to share.

Let's discuss: Slack, Facebook, or Twitter.

Laura Tue, 06/16/2020 - 11:22