![]() ![]() This is because we’re using a retina screen when inspecting the image. You can see in the example below that when we inspect the image, it’s being displayed at 780x520px, but its actual size is 1560x1040px. So if you have an image of 750x500px, for retina it should be 1500x1000px when uploading to your site. Just remember, with retina screens you do require your images to be twice as large as the intended space. ![]() Once you’ve installed the extension, this tool will allow you to find out the image sizes of every image element on your site.Ĭheck out the images on your site, make notes, and then with this knowledge, you’ll be able to tailor your photographs exactly to fit the spaces as they are intended in the design kit. The first method to find image sizes for your site is by using the Image Size Info extension for Chrome (If you don’t use Chrome on your computer, we highly recommend using it while creating your site). So once you’ve found the correct image sizes for each section on your site, you’ll want to double those sizes, and only then export and upload them to your site. What that means is, you need images twice the size for retina devices so they look nice and crisp. Thankfully, there are a few ways that can help you easily inspect your website, and identify the correct image sizing needed for each element on your site.Īn important thing to remember is that for retina devices, you need to double the image pixel density. One of the hardest parts about creating a website has always been selecting the right images, then making sure they are optimized and have the correct image dimensions for each section on your site. Characters from other languages, question marks, spaces, percent signs may upload incorrectly or cause unexpected behavior in your galleries or blog posts.įor example, if you’ve just done an engagement shoot in Joshua Tree National Park, label the images, couple-engagement-joshua-tree-park_0001.jpg this will be much more SEO friendly, and could provide better ranking for your site. PNG should be the format you use if the image you are uploading has a transparent background, i.e. your logo.įor filenames, make sure they are appropriate for each particular image or blog post. JPG will be the most common format when saving images for your portfolio website, they will also be the lightest in size. You’ll want to label your images correctly for SEO purposes and you’ll want to save them in the right color format (sRGB for web).ĭepending on the purpose, you need to save images in one of the following formats. ![]() You should consider what file type to use, JPG, PNG or GIF depending on the purpose. There are a number of things to consider when optimizing and saving images for the web. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |