After reading all day about one method or the other I am still not sure what is the best for me, all sites explain the same thing but when I want to know the things that really worries me, nobody talks about that.
My case: I have almost all my images using width 100% and height to auto, and the image containers had dynamic size, for example 30vw, or 40%, etc. (not sure if in this case I still need to set height and width values in the img tag)
What I need to use if I want to provide different sizes for my images and webp format as well and leave the decision to the browser what to choose?
Can I provide webp image without picture and source tag?
Can I use the picture method and still let the browser choose what image shown?
Not sure either why we need to choose the fallback with simple img src for the smallest image, in that case if someone enter with IE and a big screen then the image will be always pixeled. In those cases I'd prefer make some users wait a little longer than provide them with a low resolution image.
Also.. having a low resolution image with the fallback option, not sure how influences in the individual image seo ranking.
Your description looks like a common use case for responsive images. If you have for example an image that is shown at 50% width on large screens and at 100% width on viewports smaller than 900px, your HTML could look like this:
<picture>
<source
type="image/webp"
sizes="(min-width: 900px) 50vw, 100vw"
srcset="image-500.webp 500w, image-1000.webp 1000w, image-1500.webp 1500w"
>
<img
sizes="(min-width: 900px) 50vw, 100vw"
srcset="image-500.jpg 500w, image-1000.jpg 1000w, image-1500.jpg 1500w"
src="image-1000.jpg"
>
</picture>
This way browsers that support <picture> and webp images select one of the image-*.webp files, browsers that support srcset and sizes select one of the image-*.jpg files and all other browsers show the image-1000.jpg.
The most important part with this technique is to specify the sizes attribute correctly so browsers can make good decisions which image to load. You can find more information about it here: https://ericportis.com/posts/2014/srcset-sizes/
The image you want to display on “old” browsers can be freely selected via the src attribute. Or you “polyfill” the feature via JavaScript with tools like Picturefill or respimage.
You can omit the <picture> and <source> elements and do the type switch on the server side via HTTPs Accept header as an alternative.
Related
I need to load a different image depending on screen size. On web you would use the picture element:
<picture>
<source srcset="big.jpg" media="(min-width: 800px)">
<img src="small" />
</picture>
Note that this is different to an image with srcset. With srcset the browser decides which image to load. I need to control this as it's an entirely different image, not just a different resolution. More info here: https://dev.to/jessefulton/explain-htmls-img-srcset-vs-picture-tag-like-im-five-167p
Can this be done with React Native Web? There's a few conversations on the github repo but I dont think they do exactly what I need:
https://github.com/necolas/react-native-web/pull/1456
https://github.com/necolas/react-native-web/pull/1408
I found a library but it seems to optimise a single image, not allow you to specify different ones:
https://github.com/ladas-larry/react-native-responsive-image
Maybe I could hack by code splitting, then reading the screen width, and then load the image I need?
Is it possible to resize images on the fly and cache the result with Drupal?
I have some big images (e.g. 2000x2000px) and I want to display a preview of the e.g. 100x100px.
I know there is a theme_image_style function. But it seams to only create the <img> with the right size and not effectively resize the image.
I look at modules/images/image.admin.inc and they used the function [image_style_create_derivative][2].
Yes, you should use Drupal's Image styles (Configuration -> Media -> Image styles). There you should create your style.
Then, on front-end, when ever you want to display image with that style (in that resolution) you can use image_style_url() function:
https://api.drupal.org/api/drupal/modules!image!image.module/function/image_style_url/7
It accepts 2 parameters - one is image style machine name and other is image URI, which you can get if you print out all image field properties.
You can also select image styles from back-end interface...i.e. when creating a view for some image you can select to be displayed in specific image style.
In both cases those image styles are generated the first time image is used.
In response to your comment on MilanG's answer, using image_style_url() is the best option on the backend. There is also
https://www.drupal.org/project/resp_img
which may be something worth looking into. From a UX perspective, you don't want to force the user to load a 2000x2000 px image every time they load the page. Regardless of the outputted size, the image is still going to render as a 2000x2000 px image with a large size. image_style_url() or using image styles in the GUI create a new file that will load much quicker and is the preferred method.
I want to present an image to my visitors, and I don't mind if they download it (they can always take a screenshot anyway), but I don't want this image to appear in any search results ever.
While I know that I can politely ask bots not to index my content, I don't trust them. Therefore, I want them to not recognize my image. Two ideas:
Create my image through e.g. PHP's image functions: <img src="image.php">. But I guess Google understands this.
Publish my image as a table, with each cell 1x1 pixels and the background color of that pixel: <td style="width:1px;height:1px;background-color:#36ef2a"></td>.
Better ideas?
Does this include not trusting /robots.txt file in your setup? Not sure if that is what you meant.
What type of images are they? If they are mostly text, and can be represented with drawings, you can try using the HTML5 Canvas Element and/or Inline SVG to present your image.
I'm not sure if you can use background images to help your point inside the CSS.
Very large images will not render in Google Chrome (although the scrollbars will still behave as if the image is present). The same images will often render just fine in other browsers.
Here are two sample images. If you're using Google Chrome, you won't see the long red bar:
Short Blue
http://i.stack.imgur.com/ApGfg.png
Long Red
http://i.stack.imgur.com/J2eRf.png
As you can see, the browser thinks the longer image is there, but it simply doesn't render. The image format doesn't seem to matter either: I've tried both PNGs and JPEGs. I've also tested this on two different machines running different operating systems (Windows and OSX). This is obviously a bug, but can anyone think of a workaround that would force Chrome to render large images?
Not that anyone cares or is even looking at this post, but I did find an odd workaround. The problem seems to be with the way Chrome handles zooming. If you set the zoom property to 98.6% and lower or 102.6% and higher, the image will render (setting the zoom property to any value between 98.6% and 102.6% will cause the rendering to fail). Note that the zoom property is not officially defined in CSS, so some browsers may ignore it (which is a good thing in this case since this is a browser-specific hack). As long as you don't mind the image being resized slightly, I suppose this may be the best fix.
In short, the following code produces the desired result, as shown here:
<img style="zoom:98.6%" src="http://i.stack.imgur.com/J2eRf.png">
Update:
Actually, this is a good opportunity to kill two birds with one stone. As screens move to higher resolutions (e.g. the Apple Retina display), web developers will want to start serving up images that are twice as large and then scaling them down by 50%, as suggested here. So, instead of using the zoom property as suggested above, you could simply double the size of the image and render it at half the size:
<img style="width:50%;height:50%;" src="http://i.stack.imgur.com/J2eRf.png">
Not only will this solve your rendering problem in Chrome, but it will make the image look nice and crisp on the next generation of high-resolution displays.
i'm buildling a website and I want to create a translucid menu. I know that .gif image types enable transparency, but from my experience, not translucidy(anything between being transparent and opaque) - by default it seems to set the opacity to 100%, ie a solid image without any translucity/transparency.
I'm not sure if the issue is with the file type, or with how I'm exporting my menu. If it's worth anything, I'm using Fireworks to create and export my menu.
As is, I'm exporting my seperate files for my menu as .pngs, which seem to support translucent images, but I know that I'll be wanting to reduce the file size of these images soon, so is there a better alternative to getting a semi-transparent image other than using the .png file type?
Thanks,
Patrick
I'd say PNG is probably the best bet. The more modern browsers (read: not IE6) understand the 8-bit alpha channel it provides, whereas GIFs just have the transparency key.
Often these days, the bottleneck on sites isn't the size of the image (either in dimensions or in data) but rather the number of requests that it takes to load a page. More modern website designs try to pack as many images into one using techniques like CSS Spriting (woot.com, most of google). The other bottleneck is often not setting caching up correctly, forcing return visitors to reload a bunch of stuff.
You'll see google's various pages caching everything it can, and reducing the number of things a single page needs to download (combine all Javascripts into one, all CSS stylesheets into one) so that the browser is make 2 and 3 requests instead of 15-20.
I'd go with PNGs, and look into CSS sprites and caching as an alternative optimization.
See here for an example of an image sprite used on google's homepage.