


It can be compressed much more but lose a bit more information since you don’t need as much detail in these. JPEG - For real-life photography of people and locations.PNG - Good for graphic designs or images that you need to see the small details of This comes at the cost of a larger file size.Here are just a few of the most common ones I usually see: Each comes with its own set of pros and cons depending on the view of the user. Many formats can serve different purposes. It’s important to think about what type of file format you will want to use. Ctrl + Drag - Will change only the height or length without stretching the image.Shift + Drag - Will scale the entire image up or down while keeping the same ratio.Here are two controls you need to properly edit your image using Figma on windows. The process is very easy as all you have to do is drag and drop then change the image to your liking. This will make it appear like it is part of the design and make any text easier to read.īelow, I am using Figma to resize and crop my image. Tips and tricks: If a banner image for a blog or webpage appears slightly lower quality than you would like it to be, consider applying a transparent overlay. A safe size to stay in while maintaining quality would be to make it the standard high definition size of 1920 x 1080 pixels. From my experience, I find that the largest image on the page will be the hero image at the top. You don’t need image dimensions to be 6000 x 6000 pixels if it is only going to be used for a small profile image or headshot that will be seen at 300 x 300 pixels. When deciding what size the image should be, think about the largest size that image will be viewed at. People think that they have the highest quality image to impress their customers or even themselves but they don’t realize this very negative impact.

Deciding how big or what resolution this image should be is determined by the largest size your image will be viewed. Cropping and resizing your imageīy default, the photo we downloaded is very large and high quality. In this guide, we will be visiting the 5 steps I go through when optimizing images for page speed and search engines. The more images a page has, the slower the load speed will become. The number of images added to a page directly affects load speed time. By ignoring the necessary steps for image optimization, you’re setting yourself up for an uphill battle. Many people love to get stock images from copyright-free stock photography sites like Unsplash. They build a story and tend to make a much more lasting impression than just a large body of text. Images grasp our attention and help us relate to what we’re seeing. We’ve all heard the quote “A picture is worth a thousand words.” Even though it is cliche, it is true and maybe worth even more. One common mistake I have seen when looking into live and currently drafted web pages for their SaaS SEO strategy is that images are poorly optimized for website health and speed in general.
