Imagine being able to deploy a logo in a variety of different sizes, colorings, and adjustments from a single file. You could centralize your branding, iconography and UI elements, with the ability to make non-destructive edits and create alternate Retina-compatible assets available sitewide with just a few keystrokes. imgix provides the unique ability to do live real-time manipulation and conversion of vector objects within a PDF file and render them as raster assets for web use.
This is especially useful for working with branding elements such as logos and custom icon sets that need to be served out at different sizes and accessed across platforms. With imgix, you only need one multi-page vector file source to serve all of your brand assets, in as many sizes and formats as you need.
This tutorial will demonstrate how to use imgix to render out “web safe” imagery with the benefits of vector source files. imgix’s API combined with the PDF file format gives you the following features:
- Vector-to-raster conversion to web-friendly formats
- Lossless scaling and editing
- Logo or icon sets stored as one multi-page file
- Real-time hue adjustment, cropping, and access to imgix’s entire API for additional image manipulation
Creating Vector Assets
Read through the Best Practices for Creating Vector Assets tutorial to learn how best to set up your vector files in Adobe Illustrator and Sketch by Bohemian Coding. You can download the samples below to see what the optimal setup looks like in practice.
Vector PDFs and the imgix API
Below are some examples and the URLs used to rasterize the vectors and make live adjustments. These effects occur losslessly on the server side, will get cached once applied, and are applied to the source PDF.
To change the appearance of the logo, you can add URL parameters to adjust how the PDF is processed. For example, using w or h is a simple way of adjusting the size, whereas using the page parameter will give you a different page from the PDF.
Converting to Web-friendly Formats
First, you want to specify how to output your graphic—you can choose any of the formats supported by the fm paramenter, but generally JPEG, WebP, or PNG are preferable. If you go with JPEG, you can also set the quality of compression with the q paremeter, with values from 0 to 100.
Any areas left blank, cut out from the graphic, or objects that contain lower opacity will maintain transparency when formatted as a PNG. You can also specify a background color value with the bg parameter.
Convert to a PNG with background transparency
fm=png 
format: fm=png
icons-adobe.pdf?fm=png
Convert to JPG at Compression Quality 80
fm=jpg&q=80 
format: fm=png
quality: q=80
icons-adobe.pdf?fm=jpg&q=80
Saved as a JPG with a black background
fm=jpg&bg=000000 
format: fm=jpg
width: w=256
background color: bg=000000
icons-adobe.pdf?fm=jpg&w=256&bg=000000
Scaling
You will need to deploy your vector assets at a variety of sizes. The benefit of vector formats is that they are lossless, and having a vector source allows you to upscale your graphics before rasterization, without a loss of visual quality. There is a limit of 2048px in either dimension for this type of scaling.
You can use the h or w parameters to define the size of the graphic.
Display the icon proportionately with a width of 128px
fm=png 
format: fm=png
width: w=256
icons-adobe.pdf?fm=png&w=128
Display the icon proportionately with a height of 512px
fm=png 
format: fm=png
width: w=512
icons-adobe.pdf?fm=png&h=512
Graphic Sets and Pagination
Your Adobe Illustrator artboards or PDF pages can be requested individually. This allows you to have multiple branding assets or an entire icon collection organized in one file.
Display Graphic, Page 2
fm=png&page=2 
format: fm=jpg
width: w=512
page: page=2
icons-adobe.pdf?fm=png&w=512&page=2
Display Graphic, Page 4
fm=png&page=4 
format: fm=jpg
width: w=512
page: page=4
icons-adobe.pdf?fm=png&w=512&page=4
Color Adjustments
You can make hue and saturation color adjustments, among others, to change the look of your vector graphics.
Orange to Green Hue
fm=png&hue=80 
format: fm=png
hue: hue=80
icons-adobe.pdf?fm=png&hue=80
Orange to Blue Hue
fm=png&hue=180 
format: fm=png
hue: hue=180
icons-adobe.pdf?fm=png&hue=180
Greyscale
fm=png&sat=-100 
format: fm=png
saturation: sat=-100
icons-adobe.pdf?fm=png&sat=-100
Retina and Device Pixel Ratio Scaling
The device pixel ratio is used to easily convert between CSS pixels and device pixels. This makes it possible to display images at the correct pixel density on a variety of platforms, such as Apple devices with Retina Displays and Android devices. You must specify either a width, a height, or both for this parameter to work. The default is 1.
Standard Screens
fm=png 
format: fm=png
width: w=256
icons-adobe.pdf?fm=png&w=256
Retina Screens
fm=png&dpr=2 
format: fm=png
width: w=80
device pixel ratio: dpr=2
icons-adobe.pdf?fm=png&w=256&dpr=2
Downloadable Brand Assets
If you need to make brand assets available for download, all you need to do is add the dl parameter to the URL and provide a filename. When the user clicks on the asset, it will download in the exact format specified by the parameters you chose, ensuring consistency across the board.
fm=png&dl=ix-logo-256 
format: fm=png
width: w=256
download: ix-logo-256.png
icons-adobe.pdf?fm=png&w=256&dl=ix-logo-256
Summary
imgix's PDF support gives you complete control over your brand assets and simplifies management of your master files. If a new size or format becomes necessary, generating it is as simple as adding or changing a parameter, whether it's a one-off for internal use or a standardized version that's customer-facing.