[{"_path":"/blog/5-tools-for-image-optimization","_draft":false,"_partial":false,"_empty":false,"title":"5 Tools for Image Optimization","description":"Image optimization can be the thing that makes or breaks your performance scores. Here are some of the popular tools that help you to deal with large images.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"5-tools-for-image-optimization"},"children":[{"type":"text","value":"5 Tools for Image Optimization"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Image optimization can be the thing that makes or breaks your performance scores. Here are some of the popular tools that help you to deal with large images."}]},{"type":"element","tag":"h2","props":{"id":"key-concepts-of-image-optimization"},"children":[{"type":"text","value":"Key concepts of image optimization"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images such as a photographies, info-graphics, or illustrations are made of pixels. The more pixels you have, the more detailed and larger the image is. Modern DSLR cameras can easily spit out images with width and height over 3000px. This can mean 4-5Mb of data which is far to much for images to load smoothly."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The problem gets worse when you switch to "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"mobile devices"}]},{"type":"text","value":". Many internet users have a limited data plan, and downloading a bunch of large images can drain it in no time."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Moreover, loading images usually makes up for a large part of the website's performance issues. Since the performance recently became a "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/search/blog/2010/04/using-site-speed-in-web-search-ranking","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"factor in SEO ranking"}]},{"type":"text","value":". Large images may "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"hurt your position on Google results page"}]},{"type":"text","value":"!"}]},{"type":"element","tag":"h3","props":{"id":"image-resolution"},"children":[{"type":"text","value":"Image Resolution"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"scale down"}]},{"type":"text","value":" your images from its source resolution. What resolution do you need?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Imagine a large computer screen. Those typically have Full HD resolution: 1920x1080 pixels. Image with higher resolution will only get scaled down to fit your display and the extra data will get lost."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your image does not take the full width of the screen, you need even less pixels. Most of the images used on websites are relatively small. For a blog post, I typically use about "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"600-800px"}]},{"type":"text","value":" wide images, and they look great."}]},{"type":"element","tag":"h3","props":{"id":"image-compression"},"children":[{"type":"text","value":"Image Compression"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Another important step aside from resizing is the image compression. Compressing the image results in lower quality, but it can make the file size much smaller. Content creators are often afraid of compression and claim that their images do not look as good compressed. But with the right tools, you can achieve "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"compression that is virtually indistinguishable"}]},{"type":"text","value":" from the original."}]},{"type":"element","tag":"h3","props":{"id":"image-format"},"children":[{"type":"text","value":"Image Format"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes the image format can also play a role. Importantly, the recently introduced .webp format created by Google is extremely efficient in producing high-quality images with a small file size. The catch is that not all browsers support this format. I will get to how to solve this issue later."}]},{"type":"element","tag":"h2","props":{"id":"optimization-tools"},"children":[{"type":"text","value":"Optimization tools"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here are some great tools which I use regularly to optimize my images."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://bulkresizephotos.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"BulkResizePhotos.com"}]},{"type":"text","value":" is a flexible tool that allows you to scale large batches of images to a desired width or height. It outputs .jpg, .png or .webp files."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://tinypng.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TinyPNG.com"}]},{"type":"text","value":" is an amazing compression tool, which can compress images by a considerable amount while keeping their resolution."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudinary"}]},{"type":"text","value":" a full-featured service for hosting, optimizing and serving images which can be integrated to any website and can save a lot of manual work."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://imageoptim.com/mac","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ImageOptim"}]},{"type":"text","value":" is tool for iOS which allows to compress images right inside your computer. Just right click and select 'ImageOptimize', and watch the app save you space."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://jakearchibald.github.io/svgomg/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"SVGOMG"}]},{"type":"text","value":" - this one optimizes SVG graphics. SVGs are a topic on its own, so I will probably write about them soon."}]}]},{"type":"element","tag":"h2","props":{"id":"using-the-tools"},"children":[{"type":"text","value":"Using the tools"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As you can see, there are multiple tools that help with image optimization. But how to use them? One option is to use BulkResizePhotos and TinyPNG to optimize your images before the upload. This is an ideal solution for saving space on your hosting platform. It does, however, introduce those few extra steps into the content editing."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Instead, we could use something like Cloudinary, to make this process automatic. "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/documentation/wordpress_integration","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudinary's WordPress plugin"}]},{"type":"text","value":" does just that. It loads images from your media library and serves them to your website from its own CDN. This ensures that you load an optimized version of the file every time, and it even "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"fetches the correct format"}]},{"type":"text","value":" for you!"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each content management system has developed at least some way of controlling the image sizes. Custom implementations can be made (on my WordPress sites, I tend to use a custom automated solution designed by one of my colleagues - with their consent). But the key takeaway is that "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"image size matters"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"images-in-code"},"children":[{"type":"text","value":"Images in code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For a little preview of what goes into image optimization, here are some code snippets."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a basic image tag that displays an image in a HTML page."}]},{"type":"element","tag":"code","props":{"code":"<img\n  src=\"https://res.cloudinary.com/pavilionpreview/image/upload/v1654713084/sample.jpg\"\n  alt=\"Bee on a flower\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<img\n  src=\"https://res.cloudinary.com/pavilionpreview/image/upload/v1654713084/sample.jpg\"\n  alt=\"Bee on a flower\"\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Example image","src":"https://res.cloudinary.com/pavilionpreview/image/upload/v1654713084/sample.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The simplest thing that can be done to improve loading your page is adding the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"lazy loading attribute"}]},{"type":"text","value":". This means that the image will not load until the user scrolls down to it."}]},{"type":"element","tag":"code","props":{"code":"<img\n  src=\"https://res.cloudinary.com/pavilionpreview/image/upload/v1654713084/sample.jpg\"\n  alt=\"Bee on a flower\"\n  loading=\"lazy\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<img\n  src=\"https://res.cloudinary.com/pavilionpreview/image/upload/v1654713084/sample.jpg\"\n  alt=\"Bee on a flower\"\n  loading=\"lazy\"\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Additionally, we can add images in different formats using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<picture>"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<source>"}]},{"type":"text","value":" tags in combination with the original "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<img>"}]},{"type":"text","value":" tag."}]},{"type":"element","tag":"code","props":{"code":"<picture>\n  <!-- webp format -->\n  <source\n    srcset=\"\n      https://res.cloudinary.com/pavilionpreview/image/upload/v1660040516/sample-webp_mtgf59.webp\n    \"\n    type=\"image/webp\"\n  />\n  <!-- default jpeg format -->\n  <img\n    src=\"https://res.cloudinary.com/pavilionpreview/image/upload/v1654713084/sample.jpg\"\n    alt=\"Bee on a flower\"\n    type=\"image/jpeg\"\n    loading=\"lazy\"\n  />\n</picture>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<picture>\n  <!-- webp format -->\n  <source\n    srcset=\"\n      https://res.cloudinary.com/pavilionpreview/image/upload/v1660040516/sample-webp_mtgf59.webp\n    \"\n    type=\"image/webp\"\n  />\n  <!-- default jpeg format -->\n  <img\n    src=\"https://res.cloudinary.com/pavilionpreview/image/upload/v1654713084/sample.jpg\"\n    alt=\"Bee on a flower\"\n    type=\"image/jpeg\"\n    loading=\"lazy\"\n  />\n</picture>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here the browsers which support .webp format will load it to save bandwidth, and browsers which do not support next generation formats will load the .jpeg image as a fallback."}]},{"type":"element","tag":"h2","props":{"id":"final-thougths"},"children":[{"type":"text","value":"Final thougths"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is still much more to be said about this topic, but I will stop here. I might write a second part to this article later."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The key thing to take home is that a good solution for image optimization is a necessary part of any well-made website."}]}]},"head":{"title":"5 Tools for Image Optimization","description":"Read how we optimize images to make your websites blazingly fast.","image":"/image/blog/5-tools-for-image-optimization.jpg"},"fields":{"image":"/image/blog/5-tools-for-image-optimization.jpg","tags":["Performance","Cloudinary","WebP"]},"created":"2022-07-17T12:34:44","time":"","_type":"markdown","_id":"content:blog:5-tools-for-image-optimization.md","_source":"content","_file":"blog/5-tools-for-image-optimization.md","_extension":"md"},{"_path":"/portfolio/fellow-creatures","_draft":false,"_partial":false,"_empty":false,"title":"Tasty treat: Designing a vegan chocolate eshop","description":"Building an e-commerce website from scratch might not sound like an easy task. However, having an experienced guide can make it into an exciting and fun project.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"tasty-treat-designing-a-vegan-chocolate-eshop"},"children":[{"type":"text","value":"Tasty treat: Designing a vegan chocolate eshop"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Building an e-commerce website from scratch might not sound like an easy task. However, having an experienced guide can make it into an exciting and fun project."}]},{"type":"element","tag":"h2","props":{"id":"the-e-commerce-journey"},"children":[{"type":"text","value":"The e-commerce journey"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is how the journey started for me. Unsurprisingly, it was with a client..."}]},{"type":"element","tag":"h3","props":{"id":"having-a-great-client-helps"},"children":[{"type":"text","value":"Having a great client helps"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Zsolt is good friend of mine and a great mind for business. When he asked me to make his website, I went for it, even thought I had little experience with Shopify development."}]},{"type":"element","tag":"h3","props":{"id":"testing-the-waters"},"children":[{"type":"text","value":"Testing the waters"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Our first theme was built on top of a free theme and I would edit it so that it would suit Zsolt's needs as well as it could. However, there was still a need for a more specific layout and fine-grain control over the individual elements, so I decided to rebuild the theme from scratch."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is how the current iteration came to be. The shop is designed with liquid templates and advanced functionality is added with JavaScript. This includes login modal windows. Cart panel that slides from the right. Adding to your cart and updating the items through Ajax (without reloading the page), and many other details that make the shopping experience so much smoother."}]},{"type":"element","tag":"h3","props":{"id":"apps-can-be-your-friends"},"children":[{"type":"text","value":"Apps can be your friends"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Additionally, there was the need to integrate several key apps."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://apps.shopify.com/subscription-payments","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Recharge Subscriptions"}]},{"type":"text","value":" for the ability to sell subscription products"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://apps.shopify.com/advanced-custom-field","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Advanced Custom Fields"}]},{"type":"text","value":" for adding a bunch of important information about the products"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://apps.shopify.com/connected-inventory","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Connected Inventory"}]},{"type":"text","value":" for the ability to sell products in bundles"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://apps.shopify.com/product-reviews","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Customer Reviews"}]},{"type":"text","value":" for loads of stars"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://apps.shopify.com/order-printer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Order Printer"}]},{"type":"text","value":" for easily printing the package labels and receipts"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For Recharge Subscription, I made sure that the subscription products are added to cart with the correct monthly billing information. I also implemented a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"one-click checkout"}]},{"type":"text","value":" for quick and smooth buys."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Advanced Custom Fields are used mainly for product pages where different types of information is necessary. Products can have a list of ingredients, additional images, custom description for body text and other features."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Connected Inventory is vital if you want to sell your products in bundles. It allows you to link different products so that a box of five different chocolates registers in the stock quantity of the individual products. I have set up these relationships for the bundle products so that the numbers always match."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Customer Reviews is pretty self explanatory. The key element here is the design. It was important to get the style of the reviews to match the overall theme of the shop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For Order Printer I designed custom labels which were made exactly for particular label sheets. This allows to simply print the labels and streamlines the process of packaging and posting."}]},{"type":"element","tag":"h3","props":{"id":"images-large-but-light"},"children":[{"type":"text","value":"Images? Large but light"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An important requirement for Fellow Creatures was image optimization. As the shop uses large images and gifs, it was essential to optimize them to make the shop load fast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I use "},{"type":"element","tag":"a","props":{"href":"https://bulkresizephotos.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Bulk Image Resizer"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://tinypng.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Tiny PNG"}]},{"type":"text","value":" for optimizing images in advance. However, I also implement a solution which serves different sized images on different devices. On mobile, you might only need a 400x300 image, so why load 1920x1080? This greatly improves the performance for mobile shoppers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Another important aspect of the Fellow Creatures brand was a fun and playful design. This includes the use of moving elements and images. I have designed an animated SVG strip on the homepage and a logo slider. Also, try going to the "},{"type":"element","tag":"a","props":{"href":"https://www.fellowcreatures.co.uk/collections/frontpage","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"shop page"}]},{"type":"text","value":" and hovering over a product. The image starts moving in a loop! These small touches are really what makes a website special."}]},{"type":"element","tag":"h2","props":{"id":"final-thoughts"},"children":[{"type":"text","value":"Final thoughts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All this work was worth it in my eyes. Zsolt is very happy with the site, it generates revenue, and we continue to work on further ideas and improvements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visit the store on "},{"type":"element","tag":"a","props":{"href":"https://www.fellowcreatures.co.uk/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"FellowCreatures.co.uk"}]},{"type":"text","value":"."}]}]},"head":{"title":"Fellow Creatures Store","description":"Find out how I developed the e-commerce website on Shopify that sells vegan chocolates.","image":"/image/portfolio/fellow-creatures.jpg"},"fields":{"image":"/image/portfolio/fellow-creatures.jpg","order":100,"skills":["Shopify","Liquid","Tailwind CSS"]},"featured":true,"type":"full","_type":"markdown","_id":"content:portfolio:fellow-creatures.md","_source":"content","_file":"portfolio/fellow-creatures.md","_extension":"md"}]