{"id":296693,"date":"2019-10-16T08:06:11","date_gmt":"2019-10-16T15:06:11","guid":{"rendered":"https:\/\/css-tricks.com\/?p=296693"},"modified":"2019-10-16T08:06:11","modified_gmt":"2019-10-16T15:06:11","slug":"workflow-considerations-for-using-an-image-management-service","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/workflow-considerations-for-using-an-image-management-service\/","title":{"rendered":"Workflow Considerations for Using an Image Management Service"},"content":{"rendered":"<p>There are all these sites out there that want to help you with your images. They do things like optimize your images and help you serve them performantly.<\/p>\n<details style=\"margin-bottom: 1rem;\">\n<summary>Here&#8217;s the type of service I mean.<\/summary>\n<ul>\n<li><a href=\"https:\/\/cloudinary.com\/\" rel=\"noopener\">Cloudinary<\/a><\/li>\n<li><a href=\"https:\/\/imageengine.io\" rel=\"noopener\">ImageEngine<\/a><\/li>\n<li><a href=\"https:\/\/www.imgix.com\" rel=\"noopener\">imgix<\/a><\/li>\n<li><a href=\"https:\/\/www.akamai.com\/us\/en\/products\/performance\/image-manager.jsp\" rel=\"noopener\">Akami Image Manager<\/a><\/li>\n<li><a href=\"https:\/\/www.keycdn.com\/blog\/image-cdn\" rel=\"noopener\">KeyCDN Image Processing<\/a><\/li>\n<li><a href=\"https:\/\/www.cloudimage.io\/\" rel=\"noopener\">CloudImage<\/a><\/li>\n<li><a href=\"https:\/\/imageoptim.com\/api\" rel=\"noopener\">ImageOptim API<\/a><\/li>\n<li><a href=\"https:\/\/sirv.com\/\" rel=\"noopener\">Sirv<\/a><\/li>\n<li><a href=\"https:\/\/www.netlify.com\/docs\/image-transformation\/\" rel=\"noopener\">Netlify Image Transformation<\/a><\/li>\n<\/ul>\n<\/details>\n<p>That&#8217;s a very good thing. By any metric, images are a major slice of the resources on websites, and we&#8217;re notoriously bad at optimizing them and doing all the things we could to lower the performance hit from them. I&#8217;m sitting at a conference right now and <a href=\"https:\/\/daverupert.com\/\" rel=\"noopener\">Dave<\/a> just bet everyone in the audience $100 that he could find an unoptimized image on their site. I wasn&#8217;t about to take him up on it.<\/p>\n<p>So you use some service to help you deliver images better. Smart. Many of them will make managing and optimizing images a lot easier. But I don&#8217;t consider them a no-brainer. There is a lot to think about, like making choices that don&#8217;t paint you into a corner. <\/p>\n<p><!--more--><\/p>\n<h3>I should be able to upload images from my own CMS.<\/h3>\n<p>I don&#8217;t want to go to your site to upload my assets. I want to use the media management in my own CMS. So, the service should have an API at a minimum, and possible even officially maintained CMS plugins.<\/p>\n<p>This site uses WordPress. I can drag and drop images into the media library and posts very easily. I can search my media library for images I&#8217;ve uploaded before. I like that, and I want to take advantage of it today, and as it evolves.<\/p>\n<h3>The images should be uploaded to my own server.<\/h3>\n<p>If it <em>also<\/em> has to be uploaded to the image service, that&#8217;s fine. But it should go to my server first, then to the service. That way, I still maintain ownership of the source file.<\/p>\n<h3>Images within content should use functional, semantic markup in my CMS.<\/h3>\n<p>I&#8217;d prefer that the images within content are stored as totally functional HTML in my database:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;img src=\"\/images\/flower.jpg\" alt=\"a blue flower\"&gt;<\/code><\/pre>\n<p>It could be fancier than that, like using <code>srcset<\/code> (but probably not sizes as that will change as the design changes), or be contained within <code>&lt;picture&gt;<\/code> or <code>&lt;figure&gt;<\/code> elements&#8230; whatever you like that makes sense as semantic HTML. The most important thing being that the content in my database has fully functional HTML with a <code>src<\/code> on the image that points to a real image on my real server. <\/p>\n<p>The implementation of the image service will involve <em>filtering<\/em> that HTML to do whatever it needs to do, like replace the URLs to generate fancier responsive image markup and whatnot.<\/p>\n<p>Between having functional HTML and images on my server, that enables me to <em>turn off<\/em> the image service if I need to. Services have a habit of coming and going, or changing in ways that make them more or less palatable. I don&#8217;t want to be locked-in; I want freedom. I want to be able turn off the service and have a perfectly functional site with perfectly functional images, and not be obstructed from moving to a different service &mdash; or no service at all.<\/p>\n<h3>Even if I didn&#8217;t use the service in the past, I want all my images to benefit from it.<\/h3>\n<p>I just mentioned filtering the HTML for images in my database. That should happen for <em>all<\/em> the images on my site, even if they were uploaded and used before I started using the image service.<\/p>\n<p>This probably means the services offers a URL-based &#8220;get&#8221; API to optimize images on-the-fly pulled from their canonical locations. <\/p>\n<h3>I shouldn&#8217;t have to think about format or size.<\/h3>\n<p>I want to upload whatever I have. Probably some huge un-optimized screenshot I just took. If I think about it at all, I want to upload something much too big and much too high-quality so that I know I have a great original version available. The service will create optimized, sized, and formatted images as needed.<\/p>\n<p>I also want to upload SVG and have it stay SVG (that&#8217;s also optimized).<\/p>\n<h3>The images will ultimately be served on a CDN.<\/h3>\n<p>CDNs are vital for speed. Australians get images from servers hosted in Australia. Canadians get images from servers hosted in Canada. The servers are configured to be fast and cookie-less and all the fancy over-my-head things that make an asset CDN scream.<\/p>\n<h3>The images should serve in the right format.<\/h3>\n<p>If you serve images in WebP format to browsers that support it, you&#8217;ll probably get as much or more performance out of that optimization than serving re-sized images with responsive images syntax. It&#8217;s a big deal. <\/p>\n<p>I want the service to know what the best possible format for any particular image for any particular browser and serve the image in that format. This is going to change over time, so I want the service to stay on top of this so I don&#8217;t have to.<\/p>\n<p>I know that involved formats like JPEG-XR and JPEG-2000 <a href=\"https:\/\/css-tricks.com\/optimal-image-format-browser\/\">three years ago<\/a>. Is that still the case? I have no idea. This is a core value proposition for the service.<\/p>\n<h3>It should optimize the images and handle quality.<\/h3>\n<p>This is perhaps the most obvious feature and the reason you reach for an image service in the first place. Images need optimization. There are perhaps dozens of image optimization tools\/algorithms that aim to squeeze every last byte out of images. The image service probably uses those or even has its own fancy tech for it. Ideally, the default is to optimize an image the most it possibly can be without noticeably hurting the quality, but still allowing me to ratchet it down even more if I want to. <\/p>\n<h3>Don&#8217;t shame me for using high-pixel density images.<\/h3>\n<p>A lot of image services have some sort of tester tool where you drop in a URL and it tells you how bad you&#8217;re doing with images. Many of them test the size of the image on the rendered page and compare the dimensions of the original image. If the original image is larger, they tell you could have had savings by sizing it down. That&#8217;s obnoxious to me. High-pixel density displays have been around for a long time and it&#8217;s no crime to serve them.<\/p>\n<h3>It should help me serve the right size for the device it&#8217;s on and the perfect responsive syntax if needed.<\/h3>\n<p>Not all images benefit from the same responsive breakpoints. Check out the site <a href=\"https:\/\/responsivebreakpoints.com\/\" rel=\"noopener\">Responsive Image Breakpoints<\/a>. It generates versions of the image that are best <em>depending on the image itself<\/em>. That&#8217;s the kind of help I like to see from an image service. Take something hard and automate it for me.<\/p>\n<p>I know I&#8217;ll probably need to bring my own <code>sizes<\/code> attribute because that is very dependant on my own CSS and how the design of the site plays out. <a href=\"https:\/\/css-tricks.com\/sometimes-sizes-is-quite-important\/\">It&#8217;s still important<\/a>, and makes me wonder if an image service could step up and help me figure out what my optimal sizes attribute should be for certain images. Like loading my site at different sizes and seeing how large the image renders with my CSS and calculating it from there to use later.<\/p>\n<h3>Just me.<\/h3>\n<p>This is just my own list of requirements. I feel like it&#8217;s fairly reflective of &#8220;normal&#8221; sites that have a bunch of images and want to do the right thing to serve them. <\/p>\n<p>I didn&#8217;t go into all the fancy features image services offer, like being able to tell you that an image contains a giraffe facing west and hasn&#8217;t eaten since Thursday while offering to recolor its retinas. I know those things are vital to some companies. This is more about what seems to me the widest and most common use case of just hosting and delivering images in the best way current technology allows. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are all these sites out there that want to help you with your images. They do things like optimize your images and help you serve them performantly.<\/p>\n<p>That&#8217;s a very good thing. By any metric, images are a major slice of the resources on websites, and we&#8217;re notoriously bad at optimizing them and doing all the things we could to lower the performance hit from them. So you use some service to help you deliver images better. Smart. Many of them will make managing and optimizing images a lot easier. But I don&#8217;t consider them a no-brainer. There is a lot to think about, like making choices that don&#8217;t paint you into a corner.<\/p>\n","protected":false},"author":3,"featured_media":296954,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1006,585,592,521],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/photo-pile.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/photo-pile.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296693"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=296693"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296693\/revisions"}],"predecessor-version":[{"id":296971,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296693\/revisions\/296971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/296954"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=296693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=296693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=296693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}