Auto x 1500pxįor blog posts, you’ll want to note the width for your images, as they are constrained by width (the height can be auto). Here are the general guidelines for image sizes:įor slideshows, the most optimal size for images would be: 2880 x 1500pxįor galleries, you’ll want to look at the height of the images, as they are generally constrained by height (so width can be set to auto). In this case, you can use the size specified in the “Dimensions” field.įor the image above the best dimensions would be 2024x1350px, which would decrease its size from 792kb. 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 kommentar(er)
