what's sizzlin'?

sizzlepig blog - latest news, updates, goings on, etc.

No Dropbox Required - Direct upload now available

We realize that many people who would use sizzlepig™  do not have access to Dropbox, and not everyone is an Enterprise user who can work with an API or a custom installation.

To make it easier for everyone to save time resizing images, we recently released the ability to upload images to sizzlepig™ directly from your desktop.  

You can upload multiple images, create multiple resizes of those images, and download the images in a zip folder that you can save anywhere.

There is still an advantage to Dropbox and the Enterprise installations, in that you can replace images that have been retouched and retain any fine-tunes you made to the original images, but if this isn’t an option for you, direct upload is still saving users up to 78% of their image resizing time.

Find out how much time you could save resizing images with our new image resizing calculator.

Try out image resizing with sizzlepig™ with 100 free resizes through March 1, and unlimited draft resizes.  

Create retina resizes on sizzlepig

We are happy to announce that the sizzlepig has come out of beta with some brand new features that will help you batch resize images for your digital projects even more quickly than before.

Duplicate your resize as a @2x image

Retina displays are increasingly common.  It is important to show your images to their best advantage.  Now you can use the blueprint settings to create a retina version of each of your resizes.

Any image size that you mark in your blueprint with “Create a 2x image” will automatically create each image as both the standard and the @2x version.  

standard image:

image

@2x version

image


Crop, Scale, and Fit Within Changes

We’ve added some additional features that allow you to set how your images will be cropped. These features are located within the blueprint.  The first dropdown lets you choose from 3 types of cropping: ‘scale’ (default), ‘crop’, or ‘fit within.’

image


‘Scale’ will scale down the image so the entire image fills the specified dimensions. It will cut off any remaining image automatically.

image


‘Crop’ will leave the image at its original(100%) size. This is particularly helpful when cutting off just a bit of an image, or if you know you are zooming in really close on a particular detail of an image.

image


‘Fit within’ will fit the entire image within the specified dimensions. The height or width of the final image may be smaller than the blueprint image size. This is a common method for many blogs, particularly Wordpress. The great thing about using sizzlepig is that it will allow you to adjust this if you’d like.

image


The second dropdown contains a 9-square grid that will allow you to choose what area of the image you would like to show up. Click on one of the areas of the grid. It is most useful when using the ‘crop’ selection. 

image

Choose from:

top left

top center

top right

center left

center (default)

center right 

bottom left

bottom center

bottom right

NOTE: These are not available when ‘fit within’ is selected, since the entire image will fit within the specified dimensions.

sizzlepig™ for the Enterprise

When we created sizzlepig™  for our own internal needs, we didn’t dream that in the first months users from over 99 countries would visit the site.  We knew it solved our challenges, and we now know it’s not just us.  We’ve had lots of inquiries and questions around how sizzlepig™ can be used at an Enterprise level for Global offices.  We thought we’d try to address a few below.

Why Dropbox?  Only Dropbox?  

Enterprise solutions do not require the use of Dropbox.  We started out with Dropbox integration to get the ball rolling and to share files with our Clients.   sizzlepig™ is a cloud tool.  Images come in through ‘input’ folders and are retrieved through ‘output’ folders.  We know that many Clients have security needs and contracts that require other file share methods outside of Dropbox.  sizzlepig™ itself fits in the middle of the file input and the file output.  How a file is fed to sizzlepig™ is actually not as relevant.  

Ideally, the folders with the assets, regardless of where they pulled from, should have the ability to be monitored to track any updates.  One major benefit of sizzlepig™ is the re-touch component - where a folder is constantly monitored and any new images or edits to existing images are automatically processed with the saved crops, compressions, etc.  

Some Clients like to use “hot folders” that are fed through a VPN.  Some Clients would like integration with their Digital Asset Management (DAM) system, such as Xinet, or their CMS tools, such as Adobe CQ5.  

Only web and responsive?  Can I use for all my production?

We know that Agencies and in-house teams need to align operational elements as much as possible to gain efficiencies.  Brands need to be represented in an optimized and consistent manner, regardless of delivery channel. Shared assets and shared production practices by aligning as many operational elements as possible is now a necessity.  Images for web, mobile / tablet (responsive), apps, direct mail, email, social media, direct mail, online media, print, and more need to be repurposed and we are working on enhancements to offer this type of true produciton bliss.  sizzlepig™ is now able to support all digital asset needs and is being extended to other production areas.

How much does it cost for an Enterprise?

Well, what are your needs?  Here’s a simple general answer:  the use by many on a team, regarless of location, producing tens of thousands of image outputs, the investment may be a fraction of one FTE per year.  The savings could range from 65-85% in fee.  Those allocated hours could be applied to do more work.  To think strategically.  To focus on creative.  For image edits, savings extend into 85-95%.  

We can do a quick analysis on potential time and cost savings by understanding how you would use this tool and how it would tie into your workflow.  Please reach out to us. Enterprise packages start at $500 / month.  Factors such as input and output integration, customized requests such as administrative components and image hosting needs can play a role.  

So, what’s next?

We are adding many new features to sizzlepig™ to support our Clients’ requests.  They want to not only show innovation, they need to prove value each and every day.

If you have any specific requests on how sizzlepig™ could benefit your team or process, please reach out.  We are prioritizing all requests to best meet the needs of our Enterprise users.  We will be posting more as we continue to add features to create true value to those who strive to represent each pixel as it was intended.  

Art Direct Your Responsive Images

Lots of mobile-first responsive sites are using scripts and services that blindly scale each image to the dimensions needed for each breakpoint. These blind-sizing tools can be effective given the right set of circumstances, such as consistent focal points in the images and image sizes with a matching aspect ratio. They are relatively easy to implement in a website, however they have some drawbacks when it comes to the final design and effectiveness of the images, proving the need for art direction in responsive image handling.

 Jason Grigbsy introduced the art direction use case for responsive images in his post: A framework for discussing responsive image solutions, identifying the need for creative control of individual images as a prevalent challenge in responsive design.

Grigbsy provides an example of how scaling of images can detract from the overall impact as the image gets smaller. Automatic cropping of images also can have a detrimental effect. Take a look at the images pulled from an online newspaper. The cropping works well if the image is perfectly centered and matches the aspect ratio, but when the focal point is off a bit, you can see the result. 

In the full size image, you have a shot of the volleyball and the name of the gym.  

It isn’t until you actually scale the site down to tablet and iPhone size that you see the full action of the image, better conveying the story.  

Image is Copyright © The Berkeley Beacon 2012 

When to use Art Directed Images in Responsive Design:

Effective web design considers the use of images as important as the copy. A solid design optimizes the images to best convey the desired message to the users. Art direction of responsive images in the content becomes necessary to effective design when:

1. Site design requires different aspect ratios at different responsive breakpoints.

2. Images have variations in focal points.

3. Images have variations in subject/composition (like in news sites, where one story may have a close up of a dog and the next a wide angle image of a crowd)

4. Site design requires @2x images for retina displays.

5. When the original images are different ratios in size.

6.  When the focal point of an image gets too small to be meaningful.

7.  When a particular part of an image makes more sense to be highlighted.

How sizzlepig helps with the art-direction use case:

The sizzlepig team members are (obviously) huge fans of art-directed images. There are a lot of ways to create art-directed resizes, but with the ability to control the final output of each image, with out running a script that can produce the same blind-sized results, sizzlepig definitely has an advantage over other image resizing programs.

What sizzlepig doesn’t do is place your art directed images in your website. There are a number of services and a lot of code that can help you effectively implement images for responsive design, whether you are using art directed images as part of your design or just scaling.  

Quick sizzlepig tip: Try out different crops. It is so simple to change an image crop that it is easy to see if changing a focal point of an image generates more interest, or works better with the design.

How to implement responsive images:

Check out the following resources when deciding which implementation solution will work best for you:

http://css-tricks.com/which-responsive-images-solution-should-you-use/

http://blogs.adobe.com/webplatform/2012/09/19/responsive-images-for-html5/

http://www.w3.org/community/respimg

What others are saying…

As we open the Beta site, we are really fortunate that some very busy people have taken the time to try out sizzlepig and post their thoughts.

We made sizzlepig to solve our own pains with image resizing.  

We really appreciate the time and effort from people like Amit Agarwal (@labnol), Jack Bremer (@jack_bremer), Marc Köhlbrugge (@marckohlbrugge), Matt Weckell (@thewallbreakers) and others.

See some of their posting below and please keep sharing your thoughts.  

Design Inspiration

Resize Multiple Images Without Any Software  (labnol.org, India)

Sizzlepig:  Awesome Image Resizer (thewallbreakers, NY)

SizzlePig: ridimensionare immagini in serie, image editing e fotoritocco via DropBox (maestroalberto, Italy)

User Guide 3:  Sizzlepig (whatsmac.tistory, Korea)