The victim? Your page load speeds. Thumbnails are usually presented at critical points during the shopping process. If they are preventing your category pages from loading quickly, you could lose a potential customer. So, in order to let crawlers know about unidentified images, you must list their location in an image sitemap.
Or you can submit the sitemap to Google using the Search Console. Google has many guidelines for image publishing , which may help your website rank higher on SERPs. In addition, you can use Google sitemaps to give Google more information about the images on your website, which can help Google find more of your images than it would on its own.
Google Webmaster Tools has many suggestions for correctly formatting your sitemap. It is important for you to add specific tags for all of your images. You can also create a separate sitemap to list images exclusively. Follow these guidelines that Google suggests when creating a sitemap with image information. Websites often have an assortment of decorative images, such as background images, buttons, and borders. Anything non-product related can likely be considered a decorative image.
Although decorative images can add a lot of aesthetic appeal to a webpage, they can result in a large combined file size and slow load times.
You want to check the file sizes of all the decorative images on your site and use a template that minimizes file sizes.
One trick you can use to eat away at your background image size is to cut out the middle of the background image and make it a flat color or even transparent. This can decrease the file size substantially. Content delivery networks CDNs are a go-to place to host images and other media files. They can increase your page load speeds and help solve bandwidth issues. The one drawback is when it comes to backlinks.
As you may know, backlinks are critical for SEO, and the more backlinks you have, the better your site does in the search engines. By placing your images on a CDN, you are most likely removing the image from your domain and placing it on the domain of the CDN. So when someone links to your image, they are actually linking to the CDN domain. There are ways around the image SEO issues associated with CDNs, but be sure to have a professional help you strategize your move first.
The entire point of optimizing your images is to help increase your bottom line. We've talked about reducing file sizes and getting the search engines to index your images, but what about testing images to see what converts to more customers? We'll also send you updates on new educational guides and success stories from the Shopify newsletter.
We hate SPAM and promise to keep your email address safe. Get started. It has over 1, reviews and maintains a 4. It works to save you time and effort when optimizing images for your store. It automatically optimizes images and uploads them to your Shopify store. You can restore to the original image at any time and optimize images manually, too.
TinyPNG is the most popular image optimization tool on the web. You can shrink images for your apps or store, plus shrink animated images. You know some image SEO strategies to get your product photos into Google image search results.
You know how to fully leverage alt attributes. You know the difference between file types and when to choose each option. Get free online marketing tips and resources delivered directly to your inbox. In the meantime, start building your store with a free day trial of Shopify. Try Shopify free for 14 days, no credit card required. By entering your email, you agree to receive marketing emails from Shopify. Email address. Your store name. Create your store.
Opens in a new window Opens an external site Opens an external site in a new window. On the web, DPI is irrelevant and only pixel dimensions matter! For example, slideshow images are usually wider; blog images are medium-sized at a width equal to the page width minus the sidebar ; thumbnails are smaller, etc. Here are instructions for finding the element selector in other browsers.
For example, full-page slideshows that are popular on wedding photography sites keep the original aspect ratio of images. By the way, please reconsider using a homepage slideshow in the first place. So for any images that span the entire width of the browser, images should be pixels in width , and any height you prefer depending on whether you want to keep the original aspect ratio of your photos or go for a more panoramic crop.
This is not a scenario where we need to double the image dimensions for retina screens, because that would create huge px images with large file sizes as well, not to mention the risks of image theft. Thumbnail galleries are special scenarios where you ignore the size of your thumbnails, and instead, make sure images are large enough when enlarged.
Since those images will open up in a full-screen view, I recommend sizing them to at least pixels on the longest edge , so they look large enough on desktop and tablets. Restricting the image dimensions like this will keep the file size reasonably small, resulting in a faster image loads if the slideshow allows navigating between images using side arrows, bullets, swiping on mobile or keyboard arrows on desktop :.
Choosing a quality WordPress theme can do all this for you. Using the methods described above, you can determine the actual width of the content area by measuring any paragraph of text, for example:. Alternatively, you could use a browser extension like View Image Info properties to get that same info:. Armed with that knowledge pixels in this example , you can now double that size to take into account retina screens so pixels in width here.
Depending on your specific site theme, and your image theft risk-tolerance :- , you can lower that number down to a more reasonable pixels on the longest edge so px in width for horizontal images, or px in height for vertical ones, maintaining their original aspect ratio of course.
Which leads us to the second most important aspect…. Choosing something like 60 or 70 gives you good-enough quality for much smaller file sizes sometimes you can see a reduction in file size without any perceived quality loss. But between and , the quality difference is unnoticeable, while the difference in image file size is enormous.
Most photographers will know that images with gradients pose a big problem here walls, skies, background colors. And always save JPG images in the sRGB color profile, which is what most browsers understand, to avoid any image color integrity issues. Besides your photographic work, your website likely contains various other graphical elements: logos, small icons, banners, separators, video thumbnails, etc. Instead of using JPG, any graphics that contain areas of solid color created by you in Photoshop or other tools online could be better saved in other lossless file formats with absolutely no perceived visual differences.
Simple image format decision tree source. Without relying on a pixel-grid, SVG files have the great benefit of being infinitely scalable without any loss in quality. You have to test this out yourself, on a per-image basis. But like I said, this only holds true for graphics with solid colors. Whenever you try this same experiment with a regular photo taken with your camera , JPG usually wins by a lot.
Even if you correctly set the right pixel dimensions and compression levels when exporting your images using Photoshop or Lightroom, for example , the following tools can take image optimization to the next level. Lightroom are already down to their lowest acceptable compression visually, I found using plugin reduces file size but also reduces the noticeable visual quality. But even when going for a lossless compression type, where the results are pixel-identical to your original images, these tools can reduce file sizes as much as possible, along with many other useful features that help make your website faster.
It comes down to personal preference: choose the compression level that best suits your workflow and your goals for the website.
Image optimization is both an art and a science: an art because there is no one definitive answer for how to best compress an individual image, and a science because there are well-developed techniques and algorithms that can help significantly reduce the size of an image. There are a bunch of great plugins that do a lot of work for you, automatically. They take every image you upload and then compress it to optimize the file size.
A free account with them gives you a decent monthly quota, and you can get a premium plan to allow optimizing many more images per month if you need to. You can also pay a one-time fee to get a bunch of one-time image optimization credits useful when using their bulk optimizer to go through your existing Media Library. In this case, make sure you properly configure the plugin settings to only choose the thumbnail sizes that matter to your site.
Otherwise, those one-time set of credits will go by really fast. Then regenerate all past thumbnails , and then, finally, do a bulk optimization of your entire Media Library.
Website care plans. Alternatively, a nifty little tool that can quickly analyze and compress your already-published photos is Image Optimization Tool by WebsiteToolTester , the process is quite simple:.
Click to download the optimized images as a ZIP archive that you can replace the old images with. Before diving into image-specific testing tools, know that you can gain a lot of insights from these two popular website speed testing tools: Google PageSpeed Insights and GTmetrix.
The page intentionally does a lot of things wrong in order to highlight its problems in testing tools:. The Google PageSpeed Insights report outlines some important performance opportunities that you might encounter on your own site:.
While the browser is responsible for resizing the image to fit its container, it still has to download the full file from the server, taking up more time and bandwidth. That means that images should only be sized as large as needed by your page layout see part 1 of this guide. If you start out by sizing your image to the appropriate pixel dimension first, you will likely have won more than half the battle. That act alone will bring your image much closer to the appropriate file size.
There are a number of free and paid options out there to help you size your photos for the web PicMonkey and PicResize to name just a small few if you plan to do it yourself. A website design professional will use software such as Photoshop, which will also afford some additional compression options to help optimize the appearance of the photo. Update: In early , Google launched a new app for sizing your photos called Squoosh. Just drag your photo into the screen and size accordingly.
How to Get Started Blogging: 6 Tips. Do I need an SSL certificate for my website? How to add captions to Facebook videos.
0コメント